Optimising Images
Images are often the biggest contributor to the total ‘weight’ of a web page. By following a few simple steps before uploading we can help effectively balance their quality and size.
Pre-size your images
Sizing your images to the same pixel dimensions that they will be displayed in the site is a great first step to avoid unnecessarily large file sizes. It also gives you the greatest control over how the image will appear in the page as it won’t get cropped on upload. So if you are able to work to the pixel dimensions, where these are provided inside the content management system, this should yield the best results.
When you upload an image to the Media Library WordPress creates a number of image variations based on the website’s most commonly used sizes. While that’s helpful for serving-up an appropriately sized image the re-saving process isn’t as optimised as what you can achieve offline. As a result this and the built-in WordPress image editor should be seen as more of a fallback where pre-sizing before upload isn’t an option.
Pick the best format
Choosing the most appropriate format for your image can go a long way not just to saving on size but also giving the best display quality. JPEG, PNG, WebP and GIF are the most common web image formats, each with their own strengths. If animation is needed then GIF is your only choice. If your image has transparency, contains text or detailed graphic elements then PNG is the way to go. For anything which is more like a standard photo traditionally JPEG has provided the best quality-to-file-size balance. And it is still a good choice, but if you can save in WebP format you can usually save another 25-30% with no appreciable difference in quality.
The other common format is SVG. As the name suggests Scaleable Vector Graphics are resolution-independent so can be sized up and down without any loss of quality, making them a great choice for logos and user interface elements like icons. However, as working with them requires more specialised software they tend to be reserved for aspects that are baked-in to the website’s template, rather than day-to-day content publishing.
Use Save for web
Most image editing software offers a ‘Save for web’ option at the point of export. Using this is a great start in getting your images slimmed down for use online. Often there will be some additional controls that go along with this. In the case of JPEG and WebP images there is usually a quality slider with settings from 0 to 100%. Adjusting this even a couple of percent can yield significant file size savings. But it’s not a case of one size fits all so it’s worth experimenting to find the lowest acceptable quality setting for each image.
Apply optimisation
After saving out from your image editor of choice there are some great dedicated tools out there for providing additional image compression. Most of these use a lossy approach in that some of the original resolution is sacrificed in the name of size savings. A bit like the compression used in the MP3 audio format attempts to save on the bits of the sound it doesn’t think we’ll notice, tools like TinyJPG attempt to apply a similar smart compression for images. While the keen-eyed might be able to tell in a side by side comparison of certain types of image, in most cases optimised versions will be indistinguishable from their originals and you can save up to 70% compared to the original.
There aren’t any hard and fast rules around how big image file sizes should be. But as a general guide we would suggest that for all but the very largest displaying images you should be definitely be aiming for under 150kb and that for most placements around 30-50kb is a good target.
When you upload to WordPress we have tools in place to automatically apply some additional lossless optimisation. In contrast to lossy optimising lossless, as the name suggests, doesn’t sacrifice any quality. Savings are made by stripping unnecessary meta-data and colour profiles, whilst leaving the core image data intact. The size reductions are smaller but following on from a lossy compression tool it can delivery a handy extra couple of percent saved.
Cumulative savings
Each of those steps will help deliver image assets that are going to load faster for the end-user. It also means less storage space being consumed on your server and a faster website backup/restore process, all of which has the positive knock-on effect of saving energy and reducing the environmental impact of your site. When optimising prior to upload is combined with server-side technologies such as GZIP compression and caching the cumulative impact can be pretty significant.