When optimizing websites for faster page load time, one of the most common errors we see is that images aren’t the proper size, requiring the browser to resize the image every time the page loads. Since images can often make up the bulk of the bytes needed to load a web page, everything we can do to make our images smaller and easier to load will pay dividends in increased site speed.
Make Image Files the Correct Width and Height
Regardless of the size at which an image displays on your site, the browser has to load the entire image, and then resize it, before it can be displayed.
There’s basically no reason for an image to be larger than the maximum size it will be on your site. If you know that your blog content section has a maximum width of 620 pixels, that’s the maximum width your image should be; don’t just upload an image that’s 2000 pixels wide and rely on the browser to resize it. Fetching resources from a network is both expensive and time-consuming, especially on mobile; serving unnecessarily large images can slow page load time and use more of your visitors’ data than is required (RUDE).
Content management systems like WordPress provide you with some size options automatically when you add a photo, so if you use one of those, you may think you’re all set! However, it’s important to note that these tools only affect the size at which the image displays; the size of the file itself is unaffected. You can see this in action by right-clicking on an image and selecting “open image in new tab;” you’ll see the image in all its original-size glory. This may be all right if you’re already using images that are fairly small, but will still slow down your page load time if the imaged you’ve used are significantly larger than how they’ll appear on the page.
Instead of relying on your CMS to size images, use an image editor like Photoshop, or free tools like Pixlr or even good old Microsoft Paint, to edit your image down to the correct size. If you’re on a Mac, you can also use the Terminal to resize your images. If, for example, you want to make the image pictureName.jpg 640 pixels wide, you can navigate to the folder where the image lives and type sips -Z 640 pictureName.jpg. This will resize the image while keeping the aspect ratio the same. If you want to get really fancy, you can even resize images in batches by using wildcards in the image names.
Make Images Responsive
Now that you’ve made your image the maximum size it would be in its container, it’s time to make sure it will also display properly on smaller screens and devices.
The first thing you’ll want to do is make sure that your image widths are relative to the container they’re in, rather than fixed-width. In your stylesheets, you’ll be able to set the width property for img assets; you’ll want to make sure that property is set to 100%, which will mean the image will fill the container it’s in regardless of that container’s size, rather than a fixed value (e.g. 620 pixels). This will mean that as the window gets larger or smaller, the image will resize to fit its container, preventing the dreaded horizontal scroll on mobile devices (I don’t know why we all hate scrolling horizontally so much, but it seems like everyone does hate it).
Let’s take that one step further! Since you’ve taken the time to make your images the maximum size you want them and no bigger, you want to make sure they don’t scale up any bigger than that even on giant screens, since they’ll start to not look too great. To keep images from getting too embiggened, use the max-width property instead. Setting to max-width: 100% will mean the image can get as small as it needs to be, but will never get bigger than its actual size (you can then set height to “auto” to preserve image proportions as they scale).
It’s important to note that if you still have fixed image widths in the image tags themselves, that will override the CSS styling. For example, if your image tag is img src=”http://www.example.com/img.jpg” width=”620” height=”340”, your max-width of 100% will be overridden by the width property, and the image will stay at 620 pixels wide regardless of the size of its container.
Compress Your Images
The other major component of image resizing is compression. Simply put, image compression is a way to optimize images to reduce their file size, ideally without reducing (or noticeably reducing, anyway) image quality. How this works is fairly technical, but in layman’s terms, compression squishes the data of your image into smaller packages to send from the server to the browser, where it’s reassembled into the original image. There are two ways to do this:
Lossless compression compresses the data in such a way that the original can be completely reassembled, without a loss of image quality. This is what you’ll want to go for in most cases – otherwise your images will start to look pixelated and less crisp. PNG and GIF files losslessly compress really nicely; however, GIFs are quite a bit larger than PNGs, so if you have a static image that’s a GIF (as opposed to the animated GIFs we all know and love), consider converting it to a PNG before adding to your site.
Lossy compression allows for images to get much smaller in file size, but with a reduction in image quality. In the example below, you can see that the background of the compressed image has become blurry and pixelated:
JPEG image compression is often lossy. If your images will be fairly small on the page, you can often get away with some lossy compression without the difference in quality being super noticeable to the human eye. I wouldn’t recommend letting image quality get below about 85%, though. If your images are large on the page, the loss in quality is more noticeable – an unfortunate reality given that your big images are going to have bigger file sizes, and be more in need of compression. You might need to play around with seeing how much you can compress your JPEGs while still keeping them at the quality you want.
Google PageSpeed Insights will actually provide you with optimized PNG, GIF, or JPEG assets when you run the tool on a given page, but you’ll want to check those to make sure they meet your image needs (i.e. don’t look weird or bad) before adding them to your website all willy-nilly. There are also a number of third-party tools you can use, such as Compressor.io, or the WordPress Smush.it plugin; Google also recommends the Convert binary command from ImageMagick.
Making your images as small and fast-loading as possible requires a bit more work up-front, but once you build it into your overall content processes, it goes pretty quickly. More importantly, it is the best thing you can do to improve your page load time and your overall site performance.
