Image Optimisation for Cavewire

Keeping image file sizes down is a very important part of maintaining a well functioning website.

The accumulation of large files uploaded to a site directly affects page load time which then passes on a bad experience to the users.

On Average more than 53% of people will exit a page if it takes more than 3 seconds to load and the best way to avoid this is to make sure everything is optimised for web.

Designers and Developers don’t always agree when it comes to the acceptable pixelation of an image and when it comes to finding out why a page is loading slow they can and will find out the reason.

By following the steps in this guide you will most likely avoid these kind of situations.

Resolution, Ratio and File Size

Resolution

72 PPI (pixels per inch) is the resolution that every web image should be. It is the highest resolution that monitors can show.

Ratio

Ratio is referring to the Length and Width of an image in most cases pixels.

E.g 2000 x 900px.

File Size

File Size is the measure of space a file takes up. If optimised as much as possible you shouldn’t exceed the dredded MegaByte mark. For e.g a good file size for an image that has dimensions of 2000 x 900px at the correct resolution of 72 ppi is approximately 360 KB.

How to Optimise Images for Web (Without Photoshop)

Step 1. Resize the Dimensions and Resolution

The default Mac application ‘Preview’ has image resizing functionality that is easy to use.

Select the image you wish to resize. Preview handles most popular image formats including JPEG, TIFF, PNG, and GIF.
From the Preview menu bar select Tools > Adjust Size.
In the size adjustment box that appears, you will notice you have several options.
To adjust the dimensions of your image, you can set a custom height or width. Keep in mind that you will want to keep your image proportions locked so stretching does not occur.
You can also adjust the resolution (pixels per inch) that your photo contains. For images that will only be seen on a screen, make sure the resolution is 72 ppi.

Step 2. Optimise Further

There are many different programs that allow you to easily lower the file size of an image. One of the best is called ‘Tiny PNG’ https://tinypng.com/

Tiny PNG uses smart lossy compression techniques to reduce the file size of images. By selectively decreasing the number of colours in the image fewer bytes are required to store the data. How it works is not so important, making sure you use it is. Reduces file size up to 80%.. Magic!

Example Image (2000 x 900px 72 ppi) saved from photoshop was 1.6mb (1600 KB)

After using Tiny PNG the file size was reduced to 360 KB (savings 77%).

The same procedure can be done be manually done with Photoshop but is more fiddly and time consuming.

Size Guide

Full Width Banner Image

A full width banner is the largest image you will utilise on a website.

The max width of an image that stretches the full width is often capped at 2500px so by any means you shouldn’t exceed this.

Max: 2500px Wide - More important visual images
Min: 1500px Wide - Less important

2 Image Banner Image

A ratio that works well for most 2 Banner Sliders is 1080 x 650px

Keywords: images, product images, product image size,

Articles in this section