Website images are a key element of every web pages. Many modern website designs include full screen background images or full screen width banner or hero images. Custom photography as well as vast troves of stock images give website designers and owners endless possibilities to use high quality website images. But all those images account for a huge proportion of your page file size – and as we’ve talked about in previous posts – page file size is a techy thing, but it’s really important for optimal website performance. If your website is professionally designed and built, your website images should be optimsed. But if your website hasn’t been professionally built, your images are likely not optimised for web. If this is you, or if you manage images on your existing website, this post looks at how to ensure your images aren’t messing with website performance.
There is a lot of confusion about website images and quality. None of the steps outlined below will have any effect on the display quality of your image.
What Format Should My Images Be In
Generally speaking, jpeg and PNG images are best for the web. There’s now a newer image format which has been created especially for the web. It dramatically reduces your page file size, which is an awesome thing. We’ll look at how to take advantage of this new image format shortly. First, let’s take a quick look at the difference between jpeg and png images.
JPG and PNG Image pros and cons
Both PNG and jpeg images are what’s known as ‘bitmap’ or ‘raster’ images. The biggest difference that effects how we use them for the web is that a png can include a transparent background. Let’s say your business logo is company initials – “ACE”. And it has to show over different coloured backgrounds. The background of a jpeg image will always appear white. Even if you deleted the background in a photo editor, for example, when you save the image it will save with a white background around it. When we then place that image over a different coloured background, the white will show up.
In this instance the png comes to the rescue. With this file format we can choose to preserve the transparency of the image. The PNG will appear just as we saved the file, with no background of its own. This allows the background of whatever is underneath the image to show up and appear as the background of the image itself. For this, we sacrifice a little file size. As a general rule, png images with transparency will produce a larger file size than jpeg images. However, by following this guide you’ll find out how to ensure those images are as small and website friendly as can be. If your image requires a transparent background, use a PNG. Otherwise, Jpeg is your safest otion.
What size should my images be? And what’s image resolution?
The short answer to keep in mind is – no bigger than they need to be.
Full screen width images. Regardless of the display height, if your image is going to span the width of the screen, it must be at least 1920px wide. But it shouldn’t be much wider. Depending on the source, you could could have an image up to 5000px wide. So the first step is to resize the image so that it’s width is no more than 2400px (this is the absolute max width you could need). You’ve just reduced the file size by around 50% already.
Full screen width and height images. If your image is also to display at full screen height, you can leave the image as is for now. But if your image is to be used in a banner style, it’s likely you can ‘pre-crop’ the image, removing those portions which won’t display. This is likely to give you another 20% – 30% in file size savings. So already, we’ve reduced your image sizes pretty significantly. The reality is though, we need to get them smaller still.
In content images. Images shown within the page content can usually be used at much smaller sizes than full width background style images. It can be difficult to predict exactly what size will be need but we can use this as rough guide. If it’s to cover less than half the full width of a desktop computer screen, you can reduce the width to around 1200px. Based on this you can make further common sense reductions. Staff profile photos, product images and so on can generally be saved at 1000px wide.
Okay and what about the resolution?
In the previous section we talked about image size in pixels. This isn’t to be confused with resolution. You could have an image 5000 pixels wide or an image 150 pixels wide. And both could have a screen resolution of 72 PPI. PPI stands for pixels per inch of screen width. And 72 PPI is the standard resolution for website images. There’s no need for any of your images to have a higher resolution than this.
Compressing images for the web.
Now that you have your cropped and resized image, it’s time to remove any of the unnecessary background data that your image includes. Whether your using images taken with a camera or phone or downloaded from an image stock library, your image likely contains lots of extra meta information that makes the file size larger than it needs to be. Intelligent optimisation tools can also further reduce the file size by resampling the image. This results in imperceptible quality loss but very significant reduction in size.
There are several ways to compress and optimise images for the web. If your website uses WordPress, there are several plugins that work well. These plugins can be used to optimise all your existing images as well as new uploads. We’ll look at these more closely below.
Stand-alone image optimization tools are also available online. TinyJPG and TinyPNG both accept either PNG or JPG images. Similarly, Optimizilla provides for both image formats. Both platforms work the same way – simply upload your images, let them be processed, and download optimised result. Just remember to distinguish your optimised versions from the original versions when you upload them to the website.
WordPress Image Optimisation Plugins
A number of widely used and well-supported WordPress plugins can help with image optimisation. The makers TinyJPG mentioned above produce a plugin which achieves the same result right within the WordPress dashboard. In independent tests, TinyJPG norally performs extremely well. ShortPixel, Imagify and Optimole perform similarly well.
Working with images in WebP. As mentioned in a previous section, there’s a new web-specific image format on the block. It’s called WebP. But don’t go converting all your website images just yet. While this format offers even more reduction in your image file sizes, it’s not fully supported across the web. To make use of the new image format consider providing an alternative, webP version of each image on your site.