High quality feature photos and crisp website graphics on a website can look great but imagery on your website will often be one of the largest portions of your websites total download size.
There are lots of great reasons for optimising your websites images including…
- Faster download times
- Less bandwidth use
- More CPU efficient interactions
- SEO benefits (Google takes load times in to consideration)
By following these simple considerations you can be sure that you can reap these benefits while maintaining your design vision.
- Investigating image load times
- Choosing the right image format
- Appropriate image dimensions
- Image compression and optimisation
- Image caching
- Content delivery networks
Investigating image load times 🔍
There’s only so much time in a day so it’s always good to focus your efforts first and foremost on things that will have the largest impact when it comes to website optimisation.
I recommend you run your URL through Pingdom Tools and scroll down to the ‘waterfall’ file requests section. Here you will be able to see all of the resources on your web page including the images and what load impact they are having. Pick out the largest offenders and get to work on those first!
Choosing the right image format 💾
You may have heard of different file extensions such as JPEG, GIF, PNG, etc. Image file types are not a one-size-fits-all deal and you may find you have a much lower file size from a more appropriate file type for your file. As a rough guide, check the following table of the most common web image file types to see what you should be saving your images as.
JPEG (or JPG)
JPEG (or JPG) stands for Joint Photographic Experts Group (JPEG or JPG) and is best for photos. JPEG is commonly referred to as a ‘lossy’ file type and can keep file sizes down in exchange for some loss in quality depending on how it has been saved. A JPEG will compress files by removing colour data from the photo and merging groups of similar colours sometimes giving the pixelated look that will come from saving them at too poor quality. JPEG should not be used for images with text, large blocks of colour, or simple shapes because crisp lines will blur and colours can shift.
When you save a JPEG file, editors such as Photoshop will ask you to choose a quality from 0 to 12. Setting this below 5 will probably result in a pixelated image because lots of data is being chopped out to reduce the file size. Anything between 8 and 12 is regarded as best.
JPEG also offers the options of Baseline, Baseline Optimised, or Progressive…
- Baseline (Standard) – The original standard format.
- Baseline Optimised – This JPEG format option provides optimised colour with better compression. It is supported by all modern browsers, but was not supported in the very earliest of Web browsers. It’s your best choice for JPEG files today.
- Progressive – Creates an image displaying ‘progressively’ as it loads, starting out pixelated, and gradually getting clearer as it loads. It doesn’t make the download any faster, but can give the illusion of speed since the blocky image is loaded faster on a slow connection.
Summary: JPEG is best for photographic images. Saving as Baseline Optimised at around 10/12 quality will give you a moderately optimised photo with minimal loss.
PNG stands for Portable Network Graphic (PNG) and was created in 1995 as a successor to the GIF. PNG-24 can support up to 16 million colours which gives them an advantage over a GIFs limited 256 indexed palette. PNG is also a ‘lossless’ format which means that there is no loss in quality when saving in this format unlike JPG. Another handy feature of PNG is that it supports transparency so you can overlay the image on to other items.
PNG often outputs a large file size than other file formats but this trade-off can be worth it to take advantage of this functionality. Other points in this article can help to off-set these file size increases through further optimisation and delivery.
Summary: PNG is ideally suited to detailed graphics such as logos, graphics, images of text and icons because of it’s near-perfect pixel-to-pixel reproduction.
GIF stands for Graphics Interchange Format and is an older image format than it’s brothers. Nowadays the GIF is most commonly associated with animated graphics (though now even for this purpose is falling out of favour with HTML5 video instead).
GIF is lossless similar to PNG however it is limited to 256 colours per image which means that any complex graphics are likely to be significantly distorted. There aren’t many reasons I can think of why you would use a GIF in favour of a well optimised PNG or SVG but please feel free to contest that in the comments below!
Summary: Better options for most use-cases on the web now! Generally avoid.
SVG stands for ‘Scalable Vector Graphic’ and is the only vector format in this bunch (as opposed to ‘raster’). A vector graphic is a set of mathematical instructions that tells the browser how to reconstruct the image out of curves and shapes rather than on a pixel-by-pixel level. The advantage of this is that the graphic can be reproduced at any size without any pixellation and for simple images can be generated from very small file sizes (with exponential savings the larger you are trying to reproduce).
You may not have a choice to save your image as an SVG, your image will have to have been created as a vector file first of all in a program such as Adobe Illustrator or Affinity Designer. However, if you do have a SVG vector version of your image then this is often an excellent choice for use directly on the web.
Summary: Excellent format for simpler graphics such as logos, icons, clip-art style graphics, etc. Fast loading and versatile.
Appropriate image dimensions 📐
An images dimensions refers to it’s pixel width and height. Image scaling refers to the size you are serving the image up as on your web page.
Saving an image with too small dimensions and then having the browser scale it up can cause pixellation and blurriness (SVG excluded!). Saving an image with too large dimensions and scaling it down could unnecessarily increase load size and time.
When choosing what size to save your image as it is important to consider the size it is going to be viewed. If your image is going to be a full width banner on your page that has a maximum width of 960px, then saving your image at 960px wide is going to be a safe bet.
For images where the width will be known and fixed, it is ideal to save your images at exactly this width for the crispest reproduction.
Things get a little more complicated when considering retina and super retina displays such as the ones in modern smartphones. If we declare an image as 100px² in our HTML, a retina display will actually use 200px² to display this (@2x) and a super retina display would use 400px² (@4x). This retina effect is most noticeable on images where crisp pixel lines come in to play such as logos, icons and images of text. For these types of images it is advisable to save them at exactly 4 times the size you plan to scale and reproduce them. It is less important on photos where the pixels are less distinguishable.
Reponsive images and srcset
For responsive images, serving up a HD size cover image suitable for a large desktop would be overkill for a small mobile device. Fortunately, there is a relatively new HTML feature called srcset which allows you to choose which image file is served up at different screen widths. You can read more about srcset and responsive images at MDN here.
Image compression and optimisation 🔨
Once you’ve chosen an appropriate format for your image and given it some suitable dimensions you’ll be left with a fairly reasonably sized file but there is more you can do to trim these down! There exists a wide array of clever algorithms for compressing and optimising images. Some lossy, some not, and many still compatible with use on the web.
I personally use ImageOptim for Mac, this free & open-source app allows me to set my thresholds for lossiness and how extreme I want the optimisations, drop in a folder of images of any of the formats we’ve discussed and it will get to work.
How much data you can shave off your images with little or no quality loss depends greatly on the image however in my experience it can often be as much as 70%!
There are a number of online utilities you can use. I have not had a chance to test but have been recommended. Let me know if you know of any others in the comments below!
Image caching ⚡️
The best way to reduce the download time of your images is to not have to download them at all! By taking advantage of browser caching, you can ensure that repeated downloads of the same image for a user are avoided and instead is loaded from the users local cache saved to their device. Good uses of this include a logo, icons or header images that are loaded on every page.
Most images will not change and can be cached for extended periods of time, for example, 14 days.
To control image caching, you need to alter the header that is sent with the images file. This is something that you need to do on your websites hosting/server and will depend on your set-up. Here’s some more information for the most common set-ups:
Content delivery networks 🌍
Content delivery networks are a distributed network of servers around the world.
Your websites images will likely be stored on a single server at one location by default without a CDN. For example, all of my hosting clients websites are hosted in London, UK. Generally, the closer a visitor is geographically to the hosts server, the faster download times they will receive from the website.
A CDN can cache all of your websites images (and other static resources) to servers around the world. A good CDN can then automatically detect where the visitor is connecting from and route them to a download on a geographically closer server to improve download times. This is particularly noticeable when avoiding the slow trip across the Atlantic ocean between America and Europe.
My personal favourite CDN provider is Cloudflare. It is completely free and only requires you to change your nameservers to ones they provide or you. Much of the caching is then automatic and can be controlled with some simple settings. Your hosting company may also offer CDN services that they can help you to configure.
I hope you’ve found some of these tips useful! How much have you managed to shave off your website?