Saving images for web

Keep your website loading fast

When uploading an image to your website, it’s very important to consider the file size of the image first.

For a example, if you were to upload a 12MB image to your website, it could take up to 13 seconds for the image to download to a user browsing your website on their phone.

Connection typeDownload speedDownload time
3G7.2 Mbit/s

If we resized that image down to around 250KB, it would take less than a second to download.

Image sizes explained

A 12MB image downloaded from a stock website could be a very big, very high quality image. You might need this size image when creating a brochure for print, however on your website, it is likely that a much smaller image will look just as good.

Option 1: Reduce the size (width and height) of the photo:

I find the easiest way to do this is via Adobe Photoshop.

Firstly if you open the image up into your canvas. If you then navigate to Image-> Image Size, you will be presented with the options to reduce the width and height of your image whilst retaining the aspect ratio.

If you ensure the “constrain proportions” box is ticked, it will automatically calculate the correct aspect ratio for you by entering in either the width or height you would like the image to be.

The size of the image you need to reduce the image to varies depending on how much of the screen it takes up in your website. Generally speaking a full width slider could be approximately 2000px in width. A product photo generally needs to be between 600px to 1000px. If you are unsure of the best dimensions, speak to your developer, but whatever you do don’t upload a 12MB image.

Option 2: Run the image through an image compressor

There is a great tool called TinyPNG: https://tinypng.com/ that allows you to upload your image to their website. They then use a smart lossy compression techniques to reduce the file size of your PNG files. The great thing is you can hardly notice a difference once completing this:

Image from https://tinypng.com/

If you are uploading lots of images, they also have an Adobe Photshop plugin that you can install to your program.

There are lots of other ways you can resize your photos for web, but where possible aim to keep the size as low as possible whilst retaining a sufficient level of quality within the picture.

As a rule of thumb you could use the following ranges for your website:

Full width slider image (50KB – 350KB)
Fixed width slider image (50KB – 250KB)
Productimage (50KB – 250KB)

On some websites where you are looking for crystal clear quality in the image, or you are working with Retina based devices, you may decide to increase image sizes more than this and take a hit on the page load times.

One comment

  • I comment on other story but did not see this – really great article, scott very interesting – keep good work up!

Leave a Reply

Your email address will not be published.

top
feedback_mix.png