Skip to content

How to Serve Next-Gen Image Formats in Modern Browsers

The future of the web is image-heavy. While the original vision was for text and links, it’s increasingly becoming an image-driven world. In fact, research has shown that sites with images make your user more likely to browse around.

If you’re using WordPress, chances are you’re already doing a decent job at optimizing images. That’s good, but there are ways of serving images that can significantly increase your conversion rate. Here’s what you need to know.

What are next-gen image formats?

Next-gen images use formats with superior compression and quality characteristics compared to their GIF, JPEG, and PNG ancestors. These image formats support advanced features designed to take up less data while maintaining a high quality level, making them perfect for web use. 

But, what does this mean for you?

In short, it means that you can provide your website visitors with vivid and vibrant pictures that load quicker, giving them a better user experience. Next-gen images are a great way to help you save storage space and keep your images looking sharp. The formats are designed for the web and are meant to look great on mobile devices like phones and tablets.

If you’re planning on using these newer image formats, make sure that your site is fully compatible with the latest browsers. One way to validate this is to check on https://caniuse.com. It helps you determine which browsers and browser versions support the newer image types.

What are the benefits of next-gen images?

Images can be some of the most important elements of your website. They can spark interest in reading your blog post or even browsing through your site, and have a significant impact on conversions. But no matter how great the images are, if they provide a poor user experience, they cause more harm than good.

If your website is slow or has performance issues, it will hurt your organic search rankings. Speed and performance are important to Google because they impact how users interact with your site. The more images you have, the longer it will take your site to load. If you can cut down on the number of images, then it will load faster. But that may also make it less appealing to visitors.

Images are one of the first areas to investigate to improve site speed. They are responsible for a large part of the loading time on a website. That’s where next-gen image formats come into play. 

Google expects a site to load within three seconds on mobile. Furthermore, if your site takes more than three seconds to load, visitors will bounce. Usually, with slow loading, images are the culprits, and older formats exacerbate the situation. Google’s page experience signals (Core Web Vitals) are included in Google Search Ranking.

Since they use more modern compression approaches, next-gen images have smaller file sizes and load faster, but without losing quality. In fact, most of the time, the quality is superior to larger JPEG or PNG files. If you have limited storage in your hosting plan or your provider caps bandwidth usage, image compression translates to direct savings in your budget. You won’t need to spend more money to increase server capacity, and you will not be penalized for going over your bandwidth limits.

Next-gen images are low-hanging fruit for SEO because they improve your load time without much effort. Depending on the approach you use, you may not need to make any changes to your existing images. A configuration change on your server could be sufficient.

Concerned about how you can improve your site’s load times?

Take a look at your Largest Contentful Paint – a user-centric measurement of how fast the largest image or text block renders on a website page.

How do you serve next-gen image formats on WordPress?

WebP is the most popular next-gen image format. It is an open-source format that Google has developed and 90% of modern web browsers support it. At this point, adopting WebP is a safe bet.

Modifying your WordPress site to support it will improve the user experience for almost all your website visitors.

Serving WebP images on an existing site

The easiest way to serve WebP images on WordPress is to install a plugin. Which plugin you install depends on the approach you want to use.

The first approach is to convert all of your existing website images to the WebP format before serving them. A plugin that can do this is ShortPixel. ShortPixel does batch conversions of existing WordPress media images to the WebP format. When a browser requests an image, if it supports WebP, then the browser will display the next-gen image. 

ShortPixel does more than converting image formats, and it requires a subscription account. WebP Express only serves WebP images, but it is free.

Another approach is to serve images on demand, meaning that the type of image served is determined by the visitor’s browser. To use on-demand WebP image generation, download and install a plugin like WebP Express. If the WebP image does not exist, it is generated on-the-fly and stored for the next browser request.

Serving WebP images on a new site

If you are creating a new website, you have the advantage of building your website with next-gen image formats in mind.

If you’re in this boat, first, create two formats for all of your images: one version in an older format like JPEG or PNG, and another version in WebP format. You need to modify your HTML to adapt to WebP images. If you have many images to convert, batch conversion tools exist to prepare them before the site goes live. You can also decide to only use one format and then use one of the plugins mentioned above to do the conversion.

The new generation of images is superior in terms of image quality and compression. Compared to earlier generations, these images don’t have as many artifacts, which means they look better with all types of displays.

While we’ve seen some dramatic improvements in image size and loading speeds on the web, there is still room for improvement. Before planning major updates to your website, keep up with the latest advances to ensure your website is not obsolete before it goes live!

To learn more about programmatic advertising and how we can help you maximize your website monetization, request a demo with our team today.

Tags: