Everything you Need to Know About Next Gen Images

Next Gen Images
Share on facebook
Share on twitter
Share on linkedin

Next generation website images, more easily known as next gen images, are the latest way to serve and show images on your website for optimal speed performance and user experience. According to Google’s website performance and speed audits, by using next gen image formatting you can increase your page scores. Currently, the majority of websites serve their images in two universally standard file types, either JPEG or PNG. Since the 1990s, this has been known as the most optimal method of displaying website images. However, the new kids on the block are changing how websites can now serve images, with next gen image formats providing a more optimised image format. These formats are: WebP, JPEG 2000 and JPEG XR. By using one of these formats, your image optimisations will help boost your website’s performance scores.

Why are Next Gen Images Beneficial?

Google’s focus on companies to improve user experience and have higher-performing websites has continued throughout 2021. The continuous rollout of algorithm changes that benefit fast-loading websites is affecting businesses. Image optimisation is one of the most important changes you can make, and one of the easiest. Therefore, how can you utilise the benefits of using next gem image formats?

Google and other browsers favour the use of image types such as WebP because of their superior compression and quality characteristics, compared to their counterparts, PNG and JPEG. For example, WebP can offer a pristine replacement of JPEG, GIF and PNG images, it supports compression, lossy compression and even animated images. Image sizes are one of the biggest killers of website speed, therefore, by using WebP images, you can reduce your file sizes from 25%-50% on average.

By reducing the file sizes of your images, you are also, in turn, reducing your page size, allowing it to load faster and provide a better user experience and therefore your website will be favourable to Google. Additionally, using next gen images helps with your mobile performance, which has even more importance, more so than desktop.

According to Google, encoding your images with next gen file types, rather than the traditional PNG or JPEG, means that they will load faster and consume less cellular data. If we look at the WebP image format, the lossy compression uses predictive coding to encode an image. In layman’s terms, it uses already seen image fragments to exactly recreate new pixels.

What are the Problems with Next Gen Images?

If you are planning to, or already use, next gen images such as WebP (the most widely used format), you must be aware of the issues surrounding it in order to solve them. There is one key issue with WebP, JPEG 2000 and JPEG XR images, and that is, they are not compatible across all browsers. Yes, it is a big problem. You do not want to display an image in WebP, which is not compatible with Safari or IOS users, this could cause a lot of issues. Below is a next gen image compatibility chart that shows the compatibility of WebP images:

How can you use Next Gen Images on your Website?

While this presents a major problem for business owners, there is a simple solution. You can set fallback images, therefore, if the user is viewing your website on a browser where WebP is compatible, then it will display as WebP, otherwise, it will use a fallback image format that you can set in JPEG or PNG, which is compatible across all browsers.

How can you serve WebP images, or other next gen formats, using HTML?

<picture>

                <source srcset=”yourimage.webp” type=”image/webp”>

                <source srcset=”yourimage.jpg” type=”image/jpg”>

                < source src=”yourimage.jpg” alt=”#”>

</picture>

The above format allows you to set an image as WebP while also having a fallback image for those browsers that do not fully support their usage. Wrapped within picture tags, you set your next gen image format, in our case it is WebP, then you set the fallback and declare the image type, then you set the fallback again, using the src attribute, as opposed to srcset, used by the other source tags.

There are many free online resources that you can use to convert your JPEG and PNG images to WebP. My all-time favourite for the best results is https://ezgif.com/jpg-to-webp. However, there are many different websites that can handle WebP conversion for free with added benefits also, such as bulk conversions.

How can you serve next gen images using WordPress?

Most users on WordPress only upload PNG or JPEG image types to their media libraries, in order to now serve in WebP, you do not have to reupload the converted image, there are other methods you can use. WordPress offers a variety of plugins that can help optimise your website, one plugin is to convert images to WebP. For that, you can use this plugin the WebP Express plugin which does a fantastic job and has over 100,000 installations.

Additionally, you can use another great plugin called ShortPixel Image Optimizer, with other 300,000 installations, this plugin can help you optimise your images for speed and performance enhancements on your website.

The End Goal

The end goal of every website owner is to provide the best performance and user experience to generate the most business from their website. Therefore, by adopting a next gen image format on your website, you will be making great strides towards your overall objective, favoured by users and Google alike. Image optimisation is one of the simplest, yet most effective, techniques you can do to increase website performance and rank higher on Google.

Subscribe to our newsletter for the latest tips & tricks in the online world!

404-small-circle
Improve your website speed and SEO

Free Google Cheat Sheet

404-small-circle
Google's Website Test - Quickly Improve Scores

Free Cheat Sheet