Serving Images in Next-Gen Formats

Serving Images in Next-Gen Formats

We all want to display high-quality images on our website. However, it comes with a cost. As we keep on going for higher resolution images, the image size increases. As the image size increases the speed at which the page load decreases. High-quality images come at the cost of the speed of the website. The higher the resolution the lower the speed.

Slower website leads to a lower google page speed and thereby affecting SEO. In order to optimise our website for SEO, we need to compress our images. When we compress our images the image quality goes down. It all sometimes sounds like a catch-22 situation. However, today we have solution to this problem. It is not as easy as eating a piece of cake but something worth considering. There are some next-gen formats which compresses our images and also maintain high quality of images than older compression in jpeg, png and so on. Next generation formats are the newest technologies available for better looking graphics and faster downloads. These Next-gen formats have made the website lighter and more easily accessible. However, choosing them is not so straightforward as it is seeming. Let’s see why.

What are some of the formats of next-gen formats?

JPEG 2000

JPEG 2000 (JP2) was created by the Joint Photographic Experts Group committee in 2000 with the intention of superseding their original discrete cosine transform-based JPEG standard (created in 1992) with a newly designed, wavelet-based method. It offers some advantages in image fidelity over standard JPEG. It is reboot of JPEG format.

The primary purpose of the format is to preserve metadata through radical compression techniques. While most traditional JPEGs have a limited set of metadata for photographs, JPEG 2000 uses structured XML to include a vast array of metadata information.

It is a very good alternative to JPGs because it can be compressed down even further than a standard JPEG with less loss in visual quality. With a smaller file size and better visual quality, JPEG 2000 is a total win over the standard JPG format. However, the drawback is, JPEG 2000 currently works only on Safari browser so it is beneficial to only those who use Mac, iPhone and iPad.

JPEG XR

The latest JPEG image format of Joint Photographic Experts Group which boasts better compression and supports lossless compression, alpha channel, and 48-bit deep color over normal jpg format. It is slightly below JPEG 2000 with respect to the quality as it doesn’t retain as much metadata as JPEG 2000. However, with what it can achieve it is a very good substitute for normal JPEG. JPEG XR currently works on IE and Edge. These browsers are not mainstream and is not widely used. So, the reach of this format is also very limited.

WebP

This is a new image format which provides superior lossless and lossy compression for images on the web. WebP is Google’s open source image format developed in 2010 on the VP8 format which is a next-gen image format used primarily for image compression. Using WebP, we can create smaller, richer images that make the web faster.

WebP lossless images are 26% smaller in size compared to an optimized PNG. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index. WebP is also a great replacement for GIFs.

Lossless WebP supports transparency (also known as alpha channel), this is something JPEGs can’t do at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3× smaller file sizes compared to PNG.

Lossy WebP compression uses predictive coding to encode an image, the same method used by the VP8 video codec to compress keyframes in videos. Predictive coding uses the values in neighboring blocks of pixels to predict the values in a block, and then encodes only the difference.

Lossless WebP compression uses already seen image fragments in order to exactly reconstruct new pixels. It can also use a local palette if no interesting match is found. WebP is supported in Chrome, Firefox, Edge and Opera and provides better lossy and lossless compression for images on the web. However, not all web browser supports WebP format. A fallback image is some other next-gen format can be used when the web browser doesn’t support WebP images.

Advantages of next-gen formats?

  • They have superior compressions and quality characteristics
  • Lower image file size would lead to faster loading especially on mobile devices where the constant mobility doesn’t assure high speed internet always
  • The low page load time helps in higher average session time and lower bounce rate. If your page takes too long to load your visitors might get tired of waiting and move on to something else
  • Improves your SEO by increasing your website loading speed. Search Engines hate those websites which takes a lot of time to load as it not a good experience for their users. When your page speed increases, it gives a good user experience which is an important factor for search engine websites like Google, Bing, etc.
  • Since the website size is reduced, it also helps in creating faster backups

How to make Next-gen format work?

There are a lot of advantages to make the next-gen format even with those limitation which these formats bring currently. As we can see that there is no next-gen format which works properly on all platforms. For example, WebP is supported on Chrome, Firefox, Edge and Opera but not on Safari. In such cases, we need to assign a fallback image if the original image can’t be seen in the required format. This means that the developer has to work extra in order to gain some valuable google page speed score and increase the speed of the webpage. However, it is all worth at the end when you hard work leads to higher audience reach.

How to show Next-gen images in WordPress?

One major drawback of WordPress is that it doesn’t allow you to directly upload the images in the library for use. It gives a security warning.

However, there are many plugins which you can use to convert the jpeg and png images in WebP format. Most of these plugins not only convert the images in WebP format but will also provide with a fallback image for those web browsers where WebP format is still not working. Some of the plugins are Optimole, Jetpack, ShortPixel, EWWW Image Optimizer, WebP Express and many more. Some of these have only limited free conversion to WebP format. I use WebP Express which use a converter from a range of extensions. Since there is a single library ‘libwebp’ from Google which helps in converting jpeg and pngs to WebP, it doesn’t matter which converter you use. Once your extension is activated you can now convert all your existing images and start using the WebP format in your website.

Next-gen format is worth venturing into if you want to increase the speed of your website. It can slightly complicated when you are working on it the first time, however if you spend enough time to learn how to do it you can crack it and have the extra edge over your competitors.

Leave a Reply

Close Menu
×
×

Cart