So you just posted your new logo to the website, and it looks fine on your desktop but fuzzy on your phone. You post a higher resolution logo, but no luck: it’s better but still not super sharp. What gives?!
Prior to the advent of Retina displays most web images were optimized for 72 pixels per inch (ppi), since almost all screens were at that resolution. The newer Retina screens, which display at much higher resolutions (ranging from 218-458 ppi, depending on device) need to interpolate (doubling or tripling) the older lower-res images, causing them to blow up and look fuzzy.
But even higher res images can also appear slightly blurry if they’re line art graphics, like logos or infographics. How come?
Fixed Resolution on Retina Screens
The simple answer is that pixel-based images (like JPGs or PNGs) are a fixed resolution. So even a high-resolution image needs to be stretched or shrunk if it’s not the exact resolution of the device. A 300ppi logo viewed on a 326ppi iPhone XR will have some pixels that fall “in-between the cracks.”
This also affects photos, though the human eye is more forgiving with photos because we tend to focus on the subject and scene to find meaning and tune out small imperfections. But with logos, these small imperfections are quite noticeable, even annoying.
So What’s the Answer?
In theory, you could make a logo for every resolution, but that’s impractical because there are so many devices with different resolutions and the list seems to grow every year. As of this writing, there are 18 different Apple retina display resolutions, and that doesn’t count other devices with high-density displays like those from Samsung.
SVG (Scalable Vector Graphics)
The better solution is to move away from fixed pixel-based formats like JPG or PNG to vector formats. For the web, this format is called SVG (Scalable Vector Graphics).
SVGs are “resolution independent” since they are not created with pixels but points, lines and curves that use mathematical equations to draw the graphic. This means they’ll look sharp at any resolution, regardless of the size of screen or device. SVGs have been around for a while, but were not well supported in older browsers, and there was no real need prior to retina displays.
The main benefits of SVGs are:
- They can be scaled to any size with no image integrity loss.
- They do not increase in file size when an image is spatially increased. This is especially important for minimizing web page size and loading speed.
- SVG images are XML text files so Google can index them easily.
SVG Limitations
The only real limitation of SVGs is they are not the right file format for all images, such as photos, which need to remain in bitmap or pixel-based formats. That said, however, a good deal of the images on your site can be vector-based, and the great news is that most company logos are first created in programs, such as Adobe Illustrator, that create vector images. In fact, if the logo you currently use is a JPG or GIF, chances are it was originally created as a vector image and then saved into its current raster or pixel-based form.
Other Uses
While we're only discussing logos here, SVGs can also be used for nearly anything that is a line drawing or simple illustration. This would include things like infographics, static maps, static charts or banners.
Update Your Website Today!
SVGs are the modern way to make your website look sharper and load faster—and, ultimately, makes you look better.
If you're one of our clients, rest easy. We've been updating all our client sites with SVGs at no charge to provide an optimal viewing experience for their visitors.
If you're not one of our clients, ask your branding agency or designer if a vector format was used to create the original logo, and, if so, to save it as an SVG file format. Then ask your developer to upload it to your site and make any necessary code adjustments.
Have additional questions? Contact us.
Thanks and be well,
~Your Friendly Animus Rex Team
Additional Information
https://en.wikipedia.org/wiki/Retina_display#Models
https://watb.co.uk/5-reasons-you-should-be-using-svgs-over-pngs/