How to Optimize Images for Website Delivery

Tips for decreasing image file sizes to improve website performance and speed

Train speeding along
Fast loading speeds are an important part of a website's success.

Websites have become incredibly heavy, with the average size of a webpage now weighing in at over 2MB! This is double the size that websites were just 5 years ago and around 150 times larger than sites were 20 years ago when the average page was only 14.1k! What has caused this dramatic increase? There are a number of factors, including scripts, CSS files, fonts, advertising, and social widgets, but the #1 contributor to heavy webpages is images.

Images account for nearly 62% of a page’s overall size. Current design trends that favor gigantic, screen spanning images help fuel this situation, since images that are large in physical size are generally large in file size as well. This problem is compounded when images are used on sites without first being optimized for web delivery.

If you want your site to be user friendly and work well for all visitors on all devices, then that site must load quickly. Since images likely account for more than half of your page’s size, the best place to start optimizing a site for better performance is by starting with that site’s images.

Using the Correct Size

The first thing to be mindful of when it comes to image optimization for websites is to make sure that you are using the correct size for any images you add to that site. Taking a photo directly from a digital camera or downloading it from a stock image site without resizing that image accordingly is a common cause of too-large images.

This scenario is one that often happens once a company takes over a website from the web team who created it. In using their CMS to add new content/pages to that site, they often include images that are inappropriately sized. The site’s CSS may constrain the display size of those images so that the site’s layout does not break, but the image itself is much larger than it needs to be.

For instance, if the largest size an image will be displayed on the site is 1000 pixels wide, then the image itself should not be sized larger than that. If you instead us a 4000 pixel wide image taken from your high quality digital camera, then even if the site squeezes the display of the image down, it will still be downloading a 4000 pixel wide image which will absolutely destroy that site’s performance.

Before adding any images to a website, make sure you understand the optimal size for these images (this should be part of your training in how to manage your site) and be sure to resize your file as needed. You can use a tool like Adobe Photoshop for this or, if you do not have a license for that software, a free online alternative like Pixlr will also do the trick.

Use the Correct Image Format

In addition the right image size, you should also be sure to use the correct image format. Because different image formats are ideal in different situations, using the right format can help keep file sizes manageable. For instance, if your image is an illustrated element, like a logo or an icon, using an SVG file can significantly reduce that image’s file size while also allowing for total flexibility in terms of how large that image is displayed.

This is because SVG files are vector graphics, so they are small sized images that can be sized larger without any quality loss. Speaking of image quality…

Consider Image Quality

The quality that you save an image at matters greatly when it comes to that image’s file size. There is a temptation to save all images with the highest quality possible so that they look really great when used on a webpage, but this course of action would leave you with unwieldly large image sizes. Instead, you need to find a balance between good quality and reasonable file size.

The way that you compare quality settings for your images will depend on which software you use. In my own work, I use Adobe Photoshop and its “Save for Web” functionality. This allows me to compare my images with different settings to find that perfect balance.Often, you will find that an image with a quality setting of "5" looks just as good as when you set that quality to "10", but the reduction in file size is dramatic!

Saving the image as a "10" would have no actual benefit to your site or its appearance, but saving it as a "5" absolutely helps that site load quicker!

One thing that I do consider when selecting image quality is how the image itself will be used on the site. If it is a background or a smaller teaser-style image, I will often go with a lower quality setting to save as much size as I can. If the image is a large hero shot that is featured on the homepage, however, I may opt for a slightly higher setting since the image will be a focal point of the page and I want that image to really make an impact. 

Further Optimize Images

Finding an optimal quality setting is important, but once you have found those settings and saved your images, there is still further optimization that you can do by losslessly compressing all of your files.

Images have meta data included in their files. This data does not affect the display of the image itself, so including it in the files serves no purpose for your site. You can remove this data (and not change image quality) by using a tool like ImageOptim (for Macs) or FileOptimizer (for Windows). By running your images through these tools, you can shave off some significant file size. Larger images will only be reduced slightly (10% or so), but smaller images can see dramatic file reductions. When I ran this on a website recently, I saw some images reduced to 12% of their original size and the homepage of the site alone was cut in size by 1/3 just by losslessly compressing its images.

Consider Responsive Image Techniques

Making sure the images that you use on your websites are optimized is important, but there are still challenges, especially when you consider responsive websites. Even though images on those sites can resize for different screen sizes, the largest size is what is often needed to ensure that the quality of the image is maintained for the largest screens. This means that a small screen device will download an image much larger than it actually needs, taking a performance hit in the process.

This challenge is one that is being met with new responsive image techniques.

Some of the techniques that web professionals are now using on responsive sites include new HTML elements and attributes like the <picture> element or the “srcset” and “sizes” attributes. These all allow you more control over images and which sizes gets delivered to which screens.

Other possible solutions for better responsive images are Javascript based, like the Adaptive Images solution created by Matt Wilcox. This solution has some requirements (Apache, PHP, Javascript), but it is definitely something you can consider adding to your toolbox of ways to optimize the delivery of images to websites.

A Note on Testing

Once you have your images optimized and uploaded to you site, be sure to test that site’s performance. You may find other opportunities for performance enhancements that will allow you to make your site even faster!