Everyone wants a website that looks great, and that usually means displaying images on at least some of the pages. Unfortunately for the browsing public, there has been a trend over the past few years for having big, full screen images and slideshows on web pages.
It’s probably a result of increased use of mobile phones, because small images are often a bit underwhelming on the small screen. But it’s also a result of a general increase in connectivity speed of fixed line, WiFi and mobile data connections.
The reason it’s unfortunate for website visitors is that it’s often images that slow down a web page. And that’s normally down to poor practice by web developers or site owners/employees not taking care when uploading them. We’ve identified three main ways in which images can slow down your website.
1. They are not optimised
Optimising images is crucial for keeping the file size, and therefore the download time, to a minimum. An uncompressed camera image can easily be 8–16 Mb in size, so if you’ve got several images, for example on a carousel, that’s a lot of data to download. Most jpeg images, even from a camera, are not this size, fortunately.
There will always be a bit of compression, but how much depends on the quality of the original, from a photographer or stock image vendor.
The truth is, however, that the human eye can’t really detect the subtleties of high quality images, especially on a phone or computer screen. Images can be compressed by 50% or more and there will be no noticeable difference in quality, but a huge difference in file size. Images can be compressed before upload using a photo editor, but there are WordPress plugins that can compress files too.
2. They are too large or numerous
If you have room on your website for a 600 x 400 pixel image but your source image is 1800 x 1200, reduce the physical size of it before uploading, again using an image editor.
That might mean a simple reduction, but you might also be able to crop it to isolate an interesting part of the image. If it’s too big, the browser will have to resize it, and that uses processing power, as well as downloading unnecessary detail.
Putting too many images on a site can also cause it to slow down, as each one is located and downloaded. If your site is image heavy, for example an eCommerce site, make sure they are optimised, but also consider tricks like lazy loading, where images are only downloaded if they are being displayed – anything below the visible screen will wait to be downloaded.
3. They are being pulled from another source
Finally, make sure all your images are actually hosted on your own website, not drawn from multiple other sites. Some larger corporations might have a gallery of images that are shared between multiple domains, or you might be embedding images from social media or other sources.
The more files you can host on your own site, the less time the browser and server will have to spend looking for the URLs of the images. And also, if they are hosted elsewhere, you might have no control over compression, resizing, cropping or server speed, so you’re putting a lot of trust in an external resource that could let you down.
Image speed is just one of the considerations of the front end developer, which is our speciality. As well as ensuring images are fully optimised, we can also investigate ways that HTML5 can be used to eliminate the need for some images altogether (e.g. spacers, borders, transitions and backgrounds), which can turn a 2 Mb download into a few lines of code. Drop us a line to find out more.
