Optimized images — the low-hanging fruit of web performance
This is a brief action plan to get you started! You will learn what you should do, what you have to remember, and which tools to use. Eventually, you will never have to worry about your images again.
TL;DR
- 🎯 Choose the right image format
- 🥊 Compress your image assets
- 📱 Use responsive images
- 🥱 Lazy load
- 🕸 Use CDN
🎯 Choose the right image format
There are various image formats available for use on the web. Most of the graphics that you see online are in JPG format. While JPG is the most popular (as it has been around for a very long time), there are many other image formats available that are often more suitable for use.
JPEG (Joint Photographic Experts Group)
JPEG is a lossy format, which means that the image is distorted from its original state to be able to fit into a smaller file. JPEG files are usually good for photographs. It does not support transparency. JPEG is the most commonly used image format on the web because it offers good compression and the best browser support.
PNG (Portable Network Graphics)
PNG is another widely used image format. It is a lossless format, which means that the image is identical to its original state. PNG might be preferred over JPEG for more precise reproduction of photographs (leading to larger file size) or when transparency is needed. PNG files are usually good for logos and images with text.
SVG (Scalable Vector Graphics)
SVG is a vector-based image format. An SVG file can be scaled to any size without losing any quality. This is great for images that you want to be able to zoom in on or make very small without any loss of quality. SVG is best suited for icons or illustrations. The pitfall seems to be that you’re not always in the hold of vector source code to generate SVG images.
WebP (Web Photo)
WebP is a newer image format and it was made by Google. It supports both lossless and lossy compressions. It is good for both photographs and illustrations. It is also good for logos and icons. WebP generally has better compression than JPEG and PNG and is designed to supersede them. However, it’s not supported by Internet Explorer (if that is a thing for you).
AVIF (AV1 Image File Format)
AVIF is the newest in the gang. It is both a lossless and a lossy format (depends on the chosen algorithm). It has the best compression levels with superb quality outputs and is designed to supersede JPEG, PNG, and WebP. It can be used for photographs, images with text, logos, whatever… Just be wary that its browser support is not so great. When using AVIF, you should include fallbacks to formats with better browser support e.g., WebP.
Recommendation
Go for WebP! That’s a safe bet. And a quality one.
🥊 Compress your image assets
Most of the image formats offer various levels of compression. JPEG can be saved with quality 0–100, and you usually get the best quality/file size ratio with compression around 80. When compressing PNGs you can choose compression levels 0–9 and you always get the same quality… Wait, what?! Yes, PNG is a lossless format so you always get the same quality of the image as the source has. 0–9 just tells the compressor how hard it has to try to find the optimal compression. The harder it tries, the lower the file size.
This description of JPEG and PNG saving options is just a simplification to quickly get to the point — every file format has its specifics but you don’t need to know them all. The only thing you need to remember is the fact that almost any image you stumble upon on the web can be compressed. Really.
TinyPNG
The name suggests PNG but this tool can compress WebP and JPEG files too! Just drag&drop any of these and be amazed by the savings. Typically the file size can be shrunk by up to 70 %.
TinyPNG uses smart lossy compression techniques to reduce the file size of your WEBP, JPEG, and PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!
That’s smart! And it works. With an average web page having over 1 MB of images (more or less compressed) the potential is really massive.
SVGOMG
Even vector files can be compressed — SVG files exported from various editors usually contain a lot of useless information. This includes hidden elements, default values, editor metadata, comments, and other redundant data that can be safely removed without affecting the resulting SVG. You can use SVGOMG to quickly check what can be stripped off. If you want to use it programmatically SVGO (which SVGOMG is based on) is a way to go.
Website Image Analysis Tool
Have all of your images tested at once! And get recommendations on image size, format selection, quality, and encoding which can dramatically improve page load speed.
Get your web page tested, now!
📱 Use responsive images
With responsive images, you can serve different images to different devices, depending on their screen size and resolution. This allows you to provide a better experience for your users while using fewer resources.
Resolution switching: Different sizes
This is the standard way of including an image — the same image will be loaded for desktop, tablet, and mobile.
<img src="fruit.jpg" alt="Low-hanging fruit">But it could be done smarter so that desktop devices get the largest image, tablets smaller, and mobiles the smallest.
<img srcset="fruit-720.jpg 720w,
fruit-960.jpg 960w"
sizes="(max-width: 800px) 720px,
960px"
src="fruit.jpg"
alt="Low-hanging fruit">scrset attribute says what image can browser choose from (fruit-720.jpg and fruit-960.jpg) and specifies their sizes (720w, 960w — these are the intrinsic sizes of the images).
sizes attribute provides a hint to the browser what image size would be best to choose when certain media conditions are met.
Fallback image for browsers not supporting srcset and sizes attributes is always a good idea (fruit.jpg).
Resolution switching: Same size, different resolutions
To support multiple display resolutions (in, e.g. low-end smartphones vs. high-end smartphones) you can hint the browser to choose an appropriate resolution image by using srcset attribute with x-descriptors.
<img srcset="fruit-480.jpg,
fruit-720.jpg 1.5x,
fruit-960.jpg 2x"
src="fruit.jpg"
alt="Low-hanging fruit">This is quite self-explanatory (knowing that 1x is implied, so you don’t need to mention it) — fruit-480.jpg will be served for low-density screens, fruit-960.jpg for high-density screens.
Resolution switching provides you with the ability to serve optimized content for every device type. Typically, this allows you to save a lot of bandwidth when serving mobile devices.
🥱 Lazy load
Let’s assume (and it’s a logical assumption) that images on a web page are placed evenly — some in the header, some across the content, and some in the footer. This means you won’t get a chance to see them all right away on a page load (above the fold) but one by one as you scroll down.
That’s a great opportunity to put off loading of the images until they’re actually needed-about to be shown. That’s called lazy loading.
<img src="fruit.jpg" alt="Low-hanging fruit" loading="lazy">Adding loading=”lazy" attribute is all you need to do to enable lazy loading. One would say: “Wow!” And he would be right. Just be cautious that it’s not a good idea to use lazy loading for images above the fold as it may hurt your Largest Contentful Paint (LCP) or Cumulative Layout Shift (CLS). These images need to be loaded as soon as possible.
FYI lazy loading is not supported by some older browsers but this is not a problem as the loading attribute will get just ignored in them.
🕸 Use CDN
Increased performance — A CDN can speed up the loading of images on your web pages by caching them close to your users. This can result in a significant improvement in page load times.
Increased reliability — A CDN can help to ensure that your images are always available, even if your own server is experiencing problems.
Increased scalability — A CDN can help you to handle large volumes of traffic to your images, ensuring that they are always available no matter how popular your site becomes.
Reduced costs — A CDN can help to reduce the amount of bandwidth that you need to purchase, helping to keep your costs down.
🎬 Summary
This was a brief introduction to image optimization techniques with a lot of simplifications and some information left out intentionally. Just make sure you cover (at least to some extent) all of them. It’s worth it.
