Optimising images for the web is an important part of any website’s design. Images that are not optimised can lead to slow loading times, reduced user engagement, and worse search engine rankings. Optimised images are smaller in size, meaning they take up less bandwidth and load faster. Additionally, they can also be optimised to be more SEO-friendly, helping to boost search engine rankings. The process of optimising images for the web includes compressing the file size, using the appropriate image format, and running it through an image optimiser. Doing this will ensure that the website’s images are optimised for the web, improving the user experience and search engine rankings.
Images don’t need to be huge!
When you take a photo using your fancy SLR or your Next Gen smartphone with 6 lenses and a billion megapixels you can find the size of the file gets pretty big, 5 – 20+ megabytes is not uncommon. If you put this image straight onto your website it is going to take a long time to load. Why? Well, there are three points we need to discuss when looking at image size.
The size of the image is called resolution, a large image size would be around 1024 pixels by 680 pixels, (They might come off your phone 2 or 3 times this size). But the truth is that the image doesn’t need to be that large to look great on your website,
Image file types matter
Image file format is the second piece of the puzzle. The best image file format for the web is JPEG (Joint Photographic Experts Group) which is the most common and widely used image format for web purposes. JPEG files are smaller than PNG files. PNG, JPEG, and GIF each have their benefits. JPEG is great for most images with lots of colour and PNG for simple images. If you’re really looking for website speed you should convert them to a WebP format.
Image file size is the final piece of the puzzle, the file size of an image is the storage space it takes up on your website and affects how long it will take to load. The best websites deliver quality images that load fast, and the smaller your image. That’s where image compression comes in.
CTA – Looking for a Performance boost for your website? Our one off Website Boost is the solution for you.
What is Image compression?
Image compression is a process of reducing the size of an image without noticeably reducing the image quality. It involves encoding schemes to reduce the amount of data used to represent the image, thus reducing the amount of space needed to store or transmit it. Image compression can be used for various purposes, such as reducing the file size for faster transmission, reducing the memory required for processing, or providing a better experience when displaying the images on a digital device. Techniques used for image compression include vector quantisation, wavelet compression, and run-length encoding.
How to compress your images
At Lighthouse we recommend the Smush Plugin. It is a freemium plugin that will compress your images, it describes the process as “Smushing” the images. And at this point you can even set them to a WebP.
Load it up and click go! It’s very intuitive and super fast, that’s why it’s one of our Quick Wins.
Using a CDN or Lazy Load your images?
Ok you’re going to need some tech support for this but using a Content Delivery Network (CDN) is generally a better practice than lazy loading images when it comes to web development. A CDN is essentially a network of servers distributed across the globe that can be used to serve content quickly.
When a user visits your website, the CDN will detect their location and serve the content from the closest server, resulting in faster loading times and better overall performance.
Lazy loading, on the other hand, is a technique that only loads images when they appear within the viewport on a page. This can be useful for saving bandwidth and improving page speeds, but if a user’s connection is slow, the images will take a longer time to load.
So, if you’re looking for a faster, more reliable way to serve content, a CDN is the way to go. However, if you want to reduce your page’s loading times and save bandwidth, lazy loading may be a better option.