Why you can’t make your logo bigger & why your avatar looks like crap on social media.
Over the years, there’s been a series of client help requests and frequently asked questions that pop up over and over again. That’s why this series of “how-tos” that address these issues in layperson terms, aimed specifically to help the design buyer rather than the designer (though designers new to logo design may find them helpful too.) We started with our logo files and formats feature, followed by a look at the technical aspect of logo colors. Today, we’re going to address two of the most common questions we get asked when clients start working with their brand assets. They are “why is my logo blurry on my website?” and “why does my little icon (.ico file or avatar) look like crap?” Both involve the same issue – image resolution – and the limitations of raster (pixel based) images on electronic screens. To answer either of those questions, one has to understand a little about these concepts:
PPI: This is an acronym of Pixels Per Inch and refers to the pixel density of an electronic screen such as your TV, monitor, smartphone or tablet. It is also used to describe the pixel density of a digital image, correctly for PRINT and incorrectly for SCREENS (more on that later.)
DPI: This is an acronym of Dot’s Per Inch or the number of dots in a inch of an image that’s to be PRINTED. Generally speaking, the more dots per inch, the higher the quality of the print and noticeably more sharpness and detail. To make things a little confusing, designers often use DPI and PPI interchangeably when describing the pixel density of web-based images.
Resolution: Technically speaking, resolution refers to the absolute number of pixels in an electronic display – your TV, monitor, smartphone or tablet – expressed in a measurement of the number of pixels wide width x the number of pixels deep. Designers will often refer to the resolution of an image too, when they’re referring to the PPI or DPI of the image.
PX: This is an abbreviation of the word pixel, and is used to describe the absolute pixel size of an image. Thus, an image that is said to be 100 PX wide, is 100 pixels wide. This is the unit of measurement of images on electronic screens.
Screen resolution and your logo
Whenever you use your logo in the ‘real’ world – printing and the like – you’ll generally use vector files. These are files with extensions like .EPS and .PDF and feature unlimited and variable resolution. You can print your logo at any size without image degradation, be it postage-stamp sized or big enough to put on the side of a building. No worries at all. When it comes to online usage, your website let’s say, things are a little different. That involves raster (pixel based) files with extensions like .JPG or .PNG. When a .PNG or .JPG version of your logo is previewed on a website (or any form of electronic screen) it is made up of pixels, little colored squares that your eye interprets as a complete image. Here’s how small a pixel is on the device you’re viewing this page with (as long as the viewing size is 100%.)
You can probably barely see it – the pixel is dead center of the red circle – and the black square at the right is that same pixel enlarged seven times to 7 pixels square. 700% of the original. Those little pixels make up every image on the internet, your smartphone, your tablet and your monitor.
Key Points: Pixels are the unit of measure for images on screens. Individual pixels are square, they’re packed into a grid and each individual pixel is a solid color. Pixels are usually abbreviated from to PX when describing image sizes. An image size that is described as 500px x 400px is one that’s 500 pixels wide by 400 pixels high. NOTE: People often get confused between FILE SIZE and IMAGE SIZE, when they mean completely different things. FILE SIZE refers to the amount of storage required for the image file on a hard drive and is usually measured in bytes, kilobytes for most web files. IMAGE SIZE refers to the visual size of the picture, expressed in pixels for web design.
To illustrate our Key Points graphically, let’s take our own logo and resize a 35px x 35px section of it:
The takeaway here is also that whenever you use an image larger than 100% of it’s intended size, the individual pixels become more apparent the further away from 100% you get. In fact, the scaling of raster (pixel-based) images is where ALL the issues usually lie. Let’s take a look at how raster images are resized and why that is.
Re-sizing your logo images for the web.
The proper way to scale (change size of) a raster image is through a process called “resampling.” This is the default method of image scaling in most design software, Photoshop for instance, and involves constantly reassigning different color values to a changing number of pixels, in an attempt to retain the original appearance as much as possible. The software HAS to do that because as you decrease the image size, the number of available pixels also decreases:
Whenever you, or your designer, scales an image using this method, the FILE SIZE also decreases because there’s less color data contained in the file. This is good because it speeds up your website in terms of image download. The second method of scaling an image is simply resizing it in your web page using code. For instance, setting a 500px wide image as a 250px image. That’ll work in a pinch too, but there are some issues to keep in mind. Let’s take a look:
An image that’s been resized downwards will generally – depending on the amount of reduction – look very similar as one that’s be been scaled down by resampling and then used at 100%. You haven’t reduced the number of pixels though, you’ve just asked the browser to pack more of them into a smaller space. Remember, the pixels are in the device that the picture is being viewed on, and you can’t magically make more available -100px is always 100px – so the browser will guess what to do with the image. Here’s the problem – while you’ve effectively reduced the IMAGE SIZE by resizing, the FILE SIZE will remain exactly the same. You haven’t removed any color data as with our resampling example and over a multi-paged website, these unnecessarily large files represent a lot of wasted bandwidth and slower downloads. Now, what about making an image bigger than 100%? That’s a real problem everywhere, software or browser, resampling or resizing.
Make the logo bigger. “I can’t. I only have a raster version.”
When it comes to enlarging an image size, it’s works pretty much the same way. You can either resize the image using a browser, which simply increases the pixel size en mass, or you (or your designer) can enlarge the image with resampling in Photoshop or similar, before adding it to your web page. That process will ADD pixels to the image. Here’s a look at both.
We’ve already seen that when a raster image is enlarged through resizing, the pixels become visible and the image blurry. This diagram explains why that is. Alas, whenever you enlarge a pixel-based image size with resampling, the image is STILL going to look blurry. The software has to guess how to spread out the color values into an INCREASING number of pixels and has to figure which colors go where. Let’s take our logo again, and enlarge it with resampling in Photoshop:
To its credit, Photoshop has tried pretty hard to figure out what color to make those new pixels. It’s still not great though, a certain amount of blurriness is visible off the hop, getting increasingly worse the further we get away from the original size. That, by the way, is the best it will get if enlarging a raster (pixel-based) image. Let’s compare this to when we do the same thing using resizing in a browser without resampling:
Neither is great. Resizing in a browser is worse. So what’s the solution? Simple – you, or your designer, go back to the vector version of your logo and export a larger raster image that you CAN use at 100%. If you don’t have a vector version of your logo, get one. The sooner, the better.
Key Points: ANY TIME you scale a raster (pixel based) image larger than 100% of its original size, it will appear blurry or pixelated. A raster version of your logo should always be used at 100% of original size or slightly smaller. If scaling your images down, it’s always best to use software like Photoshop to do so. Use the software’s resampling feature (usually default) for best results. Use your vector logo files to create pristine .JPGs or .PNGs at 100% of their size if you need larger images. If you don’t have a vector version of your logo, they can be created (requires technical knowledge and access to vector-based design software.)
Your logo as a social media avatar.
All social media platforms use avatars – little square pictures that most companies plop their logo into as part of their online marketing presence. They vary in size, but to illustrate this with the most visual example, we’re going to use a favicon, the smallest “avatar” there is. A favicon (short for “favorites icon”) is an icon associated with a website or webpage intended to be used when you bookmark the web page. Web browsers use them in the URL bar, on tabs, and elsewhere to help identify a website visually. A favicon is typically a graphic 16 x 16 pixels square and is saved as favicon.ico in the root directory of your server. You’d be surprised at how many people believe that by uploading their full-size logo to an online .ico generator, they’re going to get back a perfectly legible version. They won’t. Here’s why:
Taking the top image, we reduced it to the 16px x 16px size constraints of a favicon. It broke up because at 16 pixels across and deep, there’s simply not enough pixels to contain the image color data required to make it legible. Here’s a couple of examples of what you can do:
The image on the left isn’t bad – It holds together quite nicely when reduced – but it’s just as series of diagonal lines. The image on the right isn’t bad either, but it’s just a simple capital letter. What about something more complicated? Let’s have a look at a real logo:
Not great but usable in a pinch (Because there’s so few pixels, and software resampling mangles most logos, .ico files are often tweaked and hand-edited at the pixel level for better results. The same may be required for other avatars too, depending on your logo.) Anyway, here’s how the favicon looks if we zoom in to pixel level:
Why is this a big deal? Simple. This is the same basic concept that’s applicable to avatars on ALL social media platforms. Let’s take a look at how they appear around Twitter, using our account as an example.
Twitter has numerous sizes for your avatars, depending on what device we’re talking about. On their desktop website, there’s primarily three different sizes. Your main profile avatar that’s 200px x 200px. Then there’s your timeline and feed avatars which are 24 and 36 pixels square respectively. The profile image is fine, but the timeline and feed avatars don’t have a lot of pixels with which to spread around color data.
Key Points: If you want to use avatars effectively on social media, your logo needs to be square (or at least a square version available) and simple (or have a simplified version.) In many cases, expecting to use a full-blown version of your logo is unrealistic. Very small avatars or favicons may need to be tweaked at the pixel level to improve legibility, but there’s only so much you can do with such a limited number of pixels.
The misconception of 72dpi images on the web
We’ll close this up with a common misconception about image resolution on screen based devices (something I’ve been guilty of on many occasion and many of our older technical articles need to be purged of.) Designers still refer to web images as being 72dpi (which is Dots Per Inch and has always been a PRINT term) or 72ppi (which IS in pixels and an digital image term, but still refers to images headed for PRINT.) At one point on some monitors, 72 pixels wide absolutely represented 1 inch. 72ppi remains the default setup of many web-image handling software and was considered standard. This is no longer true. Because there are so many resolutions of monitors, smartphones, tablets and the like, it’s impossible to know if 72 pixels represents an inch on this screen or that. Look at the image above. The bit marked (B) is EXACTLY 72 pixels wide at 100%. Unless that image is exactly 1″ wide on your device, it isn’t previewing at 72 pixels per inch. Many designers (including myself) STILL refer to web images as 72 dpi when it’s incorrect, or 72 ppi when it’s a redundant term. Here’s the bottom line: web files are measured in absolute pixels – 300px wide for example – and used as percentages of their original sizes.
Key Point: It’s the device resolution that matters. A screen will preview a 100% scale 72px image at exactly 72 pixels wide. What size that is in inches depends on the device resolution. It’s irrelevant anyway.