How to Properly size images

There are five main ways to properly size images on a website - reduce their width and height, compress them, implement srcset attributes, use SVGs and use an image management service.

We’ll delve into each of these in more detail below and also cover a few things that won’t help so that you don’t waste any time on the wrong things.

Try PageSpeedPlus Now

Contents

• Reduce the width and height
• Compress
• srcset attribute 
• Image Management Services
• SVGs
• WordPress plugins
• What won’t help: Responsive Images
• Conclusion

Reduce the width and height

This is a ridiculously obvious statement when the topic of this article is how to properly size images but what we mean is don’t serve dramatically oversized images such as a 5000x500px JPG for a blog post primary image when the HTML template only has a main column width of 800px. 

Another common mistake is a high-fidelity logo supplied by a design agency that is 3000x3000px being directly added to a site even though the space for the logo is only 250px in the top left corner. These things can easily slip through so review all of your images to make sure none of them are ridiculously oversized. 

How?
Reducing the width and weight is as easy as opening the file in Photoshop and changing the width to a smaller value.

Implementing validation on the image upload feature in your CMS can also help.

Compress

This is a non-negotiable for properly sizing images and the first thing that should be done with every graphic added to a website. Images contain meta information that is unnecessary for rendering the pixels to the screen such as the created at time. Additionally, with a tiny reduction in quality, a lot of bytes can be shaved off the file size. 

How?
Drop your file onto kraken.io and it will be compressed in seconds for free. Integrating the API into your image upload process would automate this long term.
This is all well known by every website developer but can be overlooked with images added over time so is a timely reminder to check if all images are compressed to the smallest size possible. If not, compress them today.

srcset attribute

The srcset attribute allows multiple variations of an image to be specified in the HTML so the browser can choose which one to render based on the window size when loading the page 

How?
The attribute is understood by all browsers so is easy to implement directly in HTML. Here is an example from developer.mozilla.org.

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

The srcset attribute gives the browser 2 variations of the image to choose from and the size of each one. The sizes attribute says when the width is 600px or less, allocate 480px of space for the image and load the appropriate image from the srcset options, which will be the 480px version.

When this change it made, you can even test on localhost to make sure it works before deploying to production.

Image Management Services

Compressing and generating multiple versions of a file to ensure images are properly sized can be tedious. Various image management services can automate this such as Cloudflare Images, Cloudinary and kraken.io.

<br/

Using those will also open up other features such as converting to next-gen formats such as WebP, auto-syncing to S3, etc. 

How?
We detailed how to implement these in our post on serving images in next-gen formats.

Our recommendation is Cloudflare Images because it’s fast, easy to use and cheap.

SVGs

SVGs are vector images which means they scale up and down to any size programatically on the fly with no loss of quality. When an SVG is used, it will load at the correct size to match the available space of its viewport without unnecessary bytes being downloaded by a browser.

This is because SVGs are text files and contain all the information they need to dynamically resize. They are ideal for logos and icons but not suitable for detailed images such as photographs.

How?
Converting an image from a raster format(JPG, PNG) to SVG can be done on this free Adobe tool  

Positives: autoscale, no loss in quality, SVGs don't work in Photoshop. need illustrator Negatives: not suitable for detailed images

WordPress plugins

Many WordPress plugins exist to help solve these problems that can be installed with one click to avoid any development work. Here are our favourites:

• Ewww - Also helps to Eliminate Render-Blocking Resources
• Optimole
• WP Smushit
• Kraken.io - Our favourite

What won’t help: Responsive Images

Using responsive images is not listed because this will not reduce file size. If a page has a 1MB image, it will still be 1MB on mobile even though the visible dimensions are smaller. Responsive images just mean the browser is minimising the graphic without reducing bytes.

We’re still fans of Responsive images for efficiency purposes. For example, we can’t generate a thumbnail to match the exact dimensions of every mobile device that accesses this blog post so we use a responsive mobile image that caters for all mobile devices. This is specified in the srcset attribute and is different to the image used for desktop viewers.

Conclusion

To properly size images, the first thing is to check whether any massive files are being loaded on a page. After that, a few simple steps can give big savings and ensure you have properly sized images that load fast for users and make the page speed insights warnings go away.

Try PageSpeedPlus Now

You might also like

• Ensure Text Remains Visible During Webfont Load
• Reduce The Impact Of Third-Party Code
• Enable GZIP Compression
• Serve Static Assets An Efficient Cache Policy
• Export PageSpeed Insights Data To Google Sheets
• Monitor Lighthouse Scores