How to best optimise images for a website

The six foot poster image used as a thumbnail on the footer

It is the bane of any sys admin’s life when managing a site. The six foot poster image used as a thumbnail on the footer of a website… Its absolutely crucial to consider the size of your images on your website for a number of reasons. Here are a few ways you can optimise images for your website to ensure that they load quickly and efficiently:

Use appropriate image file formats: JPEG is a good choice for photographs, while PNG is a good choice for graphics with transparent backgrounds or images with text. GIFs are best for small, simple graphics with a limited colour palette.

Compress your images: Use an image compression tool to reduce the file size of your images without sacrificing quality. This will make them faster to download and load on your website.

Properly size your images: Only use an image a little smaller than the size it will display on your website. This will unnecessarily increase the file size and slow down the loading time of your page.

Use a CDN: A content delivery network (CDN) can help distribute your images across multiple servers, allowing them to load faster for users who are physically farther away from your server.

Use responsive images: Responsive images automatically adjust to the device’s size or screen. This can reduce the load time on smaller screens and lower-resolution devices.

Lazy load your images: Lazy loading defers the loading of images until they are needed, which can help reduce the initial load time of your page.

What about modern formats like webp

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. It can produce smaller image files than JPEG, GIF, and PNG, which can be especially beneficial for websites with lots of images or for websites that are viewed on devices with slower internet connections.

To use WebP on your website, you can save your images in the WebP format and then use them in your HTML or CSS like any other image format. There are however a few things to keep in mind when using WebP:

Not all browsers support webP: As of 2021, WebP is supported by most modern browsers, including Chrome, Firefox, Edge, and Opera. However, it is not supported by Safari or Internet Explorer. If you want to use WebP on your website, you may need to provide fallback options for users accessing your site with unsupported browsers.

WebP can be slower to decode: While WebP can produce smaller file sizes, it can be slower to interpret than other formats like JPEG. This may be noticeable on devices with slower processors or less RAM.

Some image editing software doesn’t support WebP: If you use software like Photoshop or GIMP to edit your images, you may need to use a plugin or extension to save your images in the WebP format.

Overall, WebP can be a good choice for optimizing images on your website, especially if you have many images or if users with slower internet connections access your site. However, it’s essential to keep in mind the limitations and trade-offs of using this format.

What other modern image formats are there

Several modern image formats have been developed in recent years to provide improved compression and performance for images on the web:

JPEG 2000: JPEG 2000 is a modern extension of the JPEG format that provides improved compression and support for transparency and progressive rendering. However, it is less widely supported than the original JPEG format.

JPEG XR: JPEG XR is a format developed by Microsoft that provides improved lossless and lossy image compression. It is supported by Internet Explorer and Microsoft Edge but not by other major browsers.

AVIF: AVIF (AV1 Image File Format) is a newer image format that uses the AV1 video codec to provide improved lossless and lossy compression for images. It is supported by some modern browsers, including Chrome, Firefox, and Edge, but not Safari.

FLIF: FLIF (Free Lossless Image Format) is an open-source image format that provides improved lossless compression for images. A limited number of browsers and applications support it.

BPG: BPG (Better Portable Graphics) is an open-source image format that uses the HEVC (High-Efficiency Video Coding) video codec to improve lossless and lossy image compression. A limited number of browsers and applications support it.

These formats may offer improved performance and compression over traditional formats like JPEG, PNG, and GIF, but they are less widely supported than these older formats. Considering the level of support and the trade-offs of using these newer formats is important when deciding which one to use on your website.

How can Mediamatic help you ?

If you would like any guidence on how to move your business forward, Mediamatic has the necessary skillset to help you manage your business more efficiently and more profitably. if you would like some assistance, please dont hesitate to contact us.

From website management to small loads to help support your growth, we are happy to advise and help where we can. Get in touch to start your no-obligation consultation!

Join our newsletter