We are running a new marketing campaign, and made a mistake that is pretty common for traditionally-trained graphic designers turned web designers — we made an important image far too large for web. Luckily our team caught the goof up and fixed it, but I thought it might be instructive for users to see why it doesn’t make sense to use large images when a small image will do the job. Let’s talking about optimizing images for web.
The original image
The designer used a 1900×600 artboard in Illustrator and output a PNG image at 2x, and then uploaded it to the website. Here it is:
Now, we design our pages for the most common monitor display size, which right now in 2021 is 1920px wide. If this 3800px image is displayed on a 1920 inch screen, the visitor’s computer has to shrink it down to the right size — it discards about every other pixel. So even though your image has 3800 pixels in each row, your customer’s computer monitor can only display 1920 of them at any time, no matter what.
In fact, because I’m using a boxed layout for the post you’re viewing now, the image above isn’t even being displayed at 1920 pixels. It’s showing at 1024 pixels wide, which is the width of the viewing area box. Your browser is essentially deleting 2 out of every 3 pixels before it shows the image on you display.
Put another way, you are making your website visitor’s browser erase part of your work to fit it on the screen.
It’s a habitual mistake we designers make — for better images we must use higher resolution images, but that’s not exactly correct. Let’s compare several versions and file formats of this image to see how file size and quality are affected.
The original image, shrunk to 1900px
So, I’m a little lazy, and rather than size the original artboard up to 1920, I just exported the original 1900px image to see how the size would change. You can see that the new image is about 180kb smaller than the original.
But this image has some problems.
Just like before, if you use an image that is too large, the browser has to choose pixels to remove, but if you use a file that is too small, like the 1900px one I output, the browser has to invent pixels to display it at 1920. This means your visitor’s browser is guessing what the image is supposed to look like in order to fill the screen. (Yes, we’re talking about full-width hero style images for the moment.)
Plus, you can see that in this image, there is a lot of empty space on the left, top, right, and bottom of this image. The PNG filetype is very good at handling this type of image. Rather than saying something like “make pixel 1 on row 3 green and pixel 2 on row 1 green”, PNG says something like “make pixels from 1-1920 on row 7 green”. It’s good, but it’s still wasteful of file space and server resources, not to mention unnecessary to save files with large blank spaces like this one:
Time to get smarter with image optimization
One of the reasons we love PNG is that it allows transparency. Since I’m building a website, I can partner the power of a transparent PNG with some CSS to begin optimization.
So, first I trimmed off all of the excess space from the original image and exported it as a transparent PNG — this time, just 131kb. I dropped it onto a section with a background color that is dark green, and poof! The image looks like the giant banner above, but the filesize is smaller, and I’m leveraging what the webpage is already doing (setting a background color for the section behind the hero image) to save some file space.
Here’s the result:
I realized that my top header was set to a min-height of 482 pixels, and the image at height 424 pixels was slightly too large. I hadn’t noticed the issue before, because the browser was shrinking the image to fit, as described before, so I shrunk the image a little farther, and exported it again. Now it’s just 97k:
Image Optimization with WebP
The folks at Google wrote a nifty new file format called WebP. WebP is made specifically for web, and it combines PNGs transparency features with lossy compression options to make super tiny file sizes. When I exported the image as a WebP image at 100% (no compression, lossless), the resulting file was 49k, just under half the size of the PNG file at the same resolution:
So experimenting with some compression settings, I output the PNG at 50% compression. Here’s the result:
I can see a few artifacts on the donut and pie slice, but the average user will never notice, and at a filesize of 38k, I’m feeling a lot better about this file.
I decided to go farther, and output the same image at 21%, or a much higher lossy compression. Now the image has very noticeable artifacts near the Brands Baked Fresh Daily text, and the Made In House text is noticeably less crisp:
So for me, the savings of 10k with the very lossy file wasn’t worth it, and I used the 50% lossy file on the webpage. Leveraging file optimization settings and CSS, I was able to cut that asset down from 331k to 38k with no noticeable loss in quality for our website viewers.
SVG – Perfect files
Buckle up, buttercup, because now we are going to talk about some advanced image usage with SVG. SVG is different than PNG or WebP, because it is vector-based, not pixel based. Imagine PNG and WebP like someone coloring in little squares on a grid:
Once you zoom in, you can see the little pixel squares, and you can see that the image is imperfect close up. PNG and WebP files use sophisticated algorithms to tell your browser which color to display on each little square of an image.
SVG is vector-based, meaning that instead of recording pixel locations and colors, it records the outlines and edges of a file. SVG says “start here, and make a curve or shape that looks like this and fill it with this color then move this far and make another shape and fill with this color”. Because SVG is recording relative locations and not pixel colors, SVG files can be scaled to any size, no matter how big or how small, without any jaggies or pixelization. An SVG file always renders perfectly crisp, regardless of its display size as demonstrated below:
(SVGs don’t usually have background field colors, just as this one doesn’t, but it’s easy to set a background color for their containers when you design for web.)
SVG is the best display choice to use when creating an icon, like these I experimented on a while back, but when you’re talking about more complicated designs like the one above, it’s a balancing act between file sizes. This complicated SVG is 270k — smaller than our 3800 pixel image, but significantly larger than our 38k WebP image. In this case, SVG is not the best filetype, however, in some cases, it is.
Optimizing images for web is more than just file size compression; it’s ensuring that you’re using the right filetype at the right resolution for your client’s needs. File sizes matter, because overlarge images make pages load slowly, and visitors will leave websites that are frustratingly slow. It’s complicated stuff that takes understanding how filetypes and websites and compression works plus attention to detail — what we do best at Metro Nova Creative. Let us optimize your new or existing website.