[FAQ]

Doing some updates on my business’s website on this Friday arvo here in Auckland, and I’m trying to get my head around image formats.

I want my product photos to look really sharp, but I also need the site to load quickly. At the moment, I’m just saving everything as a JPG, or a PNG if it’s a logo that needs a transparent background. But I’ve been reading about other formats like WebP.

What’s the go-to format these days for the best balance of quality and speed? Should I be using different formats for different types of images? Any advice on what’s best practice would be great.

[Jeff Bullas]

An excellent question. Optimising your images is one of the highest-impact things you can do for your website’s performance.

Brief Answer: The best practice today is to use the WebP image format for almost all images on your website. It provides superior compression and smaller file sizes compared to traditional JPG and PNG formats, leading to faster load times with no loss in visual quality.

The goal is to deliver the best possible visual experience at the lowest data cost, and modern image formats are specifically engineered to achieve this.

For years, the standard was to use JPG for all photographic images and PNG for any graphics that required a transparent background, like your logo. JPGs are great at compressing complex photos, while PNGs preserve the clean lines of simple graphics. These are still important as fallback formats.

However, the modern standard is now WebP. This image format was developed by Google to be a more efficient replacement for both JPG and PNG. For a typical photograph, a WebP image can be around 25 to 35 percent smaller than a JPG of the same visual quality. For a simple graphic with transparency, it can be significantly smaller than a PNG. This directly translates to a faster-loading website, which improves your user experience and search engine ranking. As of now, WebP is fully supported by all modern browsers, so it is a safe choice.

The ideal strategy is to have your website serve WebP images to every browser that supports it, while automatically falling back to a JPG or PNG for the rare user on an outdated browser. Many modern website platforms and content delivery networks can handle this conversion for you automatically. By ensuring your images are as small and efficient as possible, you make sure the rest of your site’s content, like your important text and videos, can be delivered to the user as quickly as possible.

Cheers,
Jeff

[Author]

Posts