Optimise images for web
Reduce image file size to improve page speed and SEO

Why is it important to optimise images for web?

It's important to optimise your images to reduce the file sizes before you upload them to your website because this will mean your users won't have to load needlessly large files just to view your website, which would slow down their experience. If users are using mobile data they may experience even slower page speed due to a slower internet connection and their data plan may only be a limited amount of data per month. Smaller image file sizes help lead to faster page loading times (page speed), which not only results in a better user experience but is also an important metric for SEO ranking. You can test your page speed with Google's page speed tool and if you have unnecessarily large image file sizes they may be identified here; you will need to test each page separately as it won't scan all of the pages on your site at once.

How can you optimise/reduce image file sizes for your website?

There are a few things to consider when optimising images for use on the web. The dimensions of the image, the file type and the quality percentage. To optimise images using ImageForWeb, simply upload your image file, and with the default setting of 70% quality .jpeg you can press the download button without making any other changes and get a smaller file size image, or you can specify a new width for your image to be resized to which will further help reduce image file size. You can specify a new file name and if you leave it blank it will be automatically populated with the original file name and an indication of the new image width in pixels if specified and an indication of the image quality percentage used for the optimisation.

What dimensions should my images be to optimise them?

Your images don't usually need to be larger than the size they end up being rendered on the web page (unless you want to account for high resolution/retina displays). You can find out what size your images are being rendered on the page by right clicking the image and selecting 'inspect' or 'inspect element', then hover over the image in the HTML code shown (usually an <img> tag) and you should see an overlay on the web page showing the dimensions in pixels that the image is being shown at. For 1080p "full HD" displays you can use image sizes of the same size as they render at e.g. if your image is showing at 500px wide, you can optimise your image to be 500px wide. If you want your images to look sharp on high resolution displays, you might want to use image dimensions at double the size the image will render at e.g. if your image is rendering at 500px wide, you can optimise your image to be 1000px wide (assuming your original image has larger dimensions than this).

What quality percentage should I use when optimising images for a website?

The quality percentage option in image optimisation allows you to generate a smaller file size image without changing the dimensions. A value of 70% image quality is often used in image optimisation as a balance of maintaining good image quality and reducing image file size. You can customise this number to your preference or on a per-image basis depending on what you think of the outcome. A very low quality percentage such a 1% may lead to gradients showing as stepped bands of flat colours, but this is dependent on the image. A very high quality percentage of 100% may not be as effective at reducing file size. When you adjust the image quality percentage on ImageForWeb, the image preview is updated in real-time so you can see what effect it will have on the final optimised image.