Saving images for a website

Almost every page on a website can be improved visually with an image and it’s often easier to add a picture or diagram to explain something than write a paragraph or two. But image file sizes are often large and can lead to slow page loading times, especially on a mobile device, so some careful work often needs to be done before uploading your images to the WordPress Media Library.

How big is too big?

Well first of all, what is the purpose of the image and what sort of image is it? If it’s a photo then it’ll have to be saved as a full colour image, but if it’s a diagram with only a few colours, you can save it in a much more file-size-friendly format. The most common file types are gif, jpg and png, these are supported by all of the main web browsers and you won’t need special software to create or save them.

In more recent times two more formats have come into play; svg and webp. SVG files are vector images, which means they scale up and down without losing quality or sharpness, they’re often used for logos and are supported by all modern browsers. You’ll need vector-based software such as Adobe Illustrator to create and save svg files and if you’re using WordPress you may well need an svg plugin. WebP is an image format developed by Google, designed to be used specifically on the web, it uses a ccombination of compression algorithms to greatly reduce file sizes while retaining the quality of the original image. You can read more about WebP, which browsers support it and how to use it, by visiting the Google page here.

The most common area where large images are used is within full-width banners or carousels, where the picture needs to be crisp at larger desktop resolutions. In these situations, a compromise needs to be made; a delicate balance of quality against file size.

As a very rough guide, your full-width banner/carousel sized images should be no more than 150kb in size, a lot less if possible and if your carousel is scrolling a few different images, then you need to keep them down below 100kb. Incidental images, within the body text should be kept to 70kb or less.

How do you optimise images for a web page?

So, with file size and quality in mind, we need a tool to save optimised images ready to publish on your site. If you have Photoshop then you’ve got just about the best software for this task, but there are a few alternatives, the cheapest being Pixlr Editor, which is totally free and web-based so you don’t need to install anything.

Saving for Web in Photoshop – Open your image, resize it to the correct dimensions and select File > Export > Save for Web (Legacy). The image will load into a preview window and you’ll be presented with a number of options on the right. If your image is a photo, and we’re going to optimise it, you’ll need to select jpg in the second drop-down option top right. This will change the options immediatley below. Note the file size below the image.

Click the arrow to the right of the Quality box, this will show a slider. Grab the white slider control and move it up and down the bar, you’ll see the file size changing as you do this and you’ll also see the quality of the image in the preview window changing. You need to move the slider to a point where the image quality is acceptable and the file size is sensible. Note that the difference between 100% quality and 70-80% quality is often imperceptible to the eye, but makes a big difference in file size. When you have the setting to your liking, click the Save button and import the saved image to your site.

Saving for Web in Pixlr Editor – This is pretty much the same as for Photoshop (so read the section above), but there are slightly fewer options. Open the image, resize the dimensions to suit (Properties, first icon on the left, Resize Image) and then select Save. A new Save Image window opens. Select jpg and move the Quality slider such that the image still looks good whilst the files size that shows under the Low/Med/High buttons is as small as possible. Click download to get your optimised image and  then upload this to your site.

Optimising file sizes for Diagrams, Icons, etc that only have a few colours

Where your image doesn’t have thousands/millions of colours, you can make further savings when optimising by choosing gif or png-8 as the format and reducing the number of exact colours used in the palette (2 to 256) . Pixlr doesnt have this option, but it does have save to WebP, which Photoshop doesn’t.

How do you optimise images for a web page – Summary

The most important thing here it to keep the file sizes down, so that your page(s) load as quickly as possible. As well as the manual methods above, there are a number of plugins and server-based tools that will automatically optimise images when you upload them. We suggest using these in addition to the initial manual work. If you’re running WordPress search for Image Optimizer in add new plugins, there are a number of excellent tools available and, as ever, if you need help/advice, please do contact us, we’ll be happy to help.