ClassicPress and WebP and AVIF Images

Let us explore in this post ClassicPress and WebP and AVIF Images. With the ever-evolving web, image formats have also advanced to meet the demands of high-resolution displays and faster page loads. Learn how how they stack up against traditional formats like JPEG, PNG, and GIF.

Introduction

In the pursuit of lightning-fast websites and captivating visuals, developers and designers are embracing modern image formats. WebP, AVIF, and HEIF/HEIC have emerged as frontrunners, offering improved compression and stunning visual quality. In this blog post, we’ll delve into these cutting-edge formats, their advantages, and how they compare to the legacy formats JPEG, PNG, and GIF.

वेबसाइटों को तेज और आकर्षक बनाने की दिशा में, डेवलपर्स और डिजाइनर आधुनिक इमेज फॉर्मेट की ओर रुख कर रहे हैं. WebP, AVIF, और HEIF/HEIC ने बेहतर संपीड़न और शानदार दृश्य गुणवत्ता प्रदान करके खुद को साबित किया है. इस ब्लॉग पोस्ट में, हम इन नए इमेज फॉर्मेट की पड़ताल करेंगे, जो JPEG, PNG, और GIF जैसे पुराने फॉर्मेट की तुलना में कैसे बेहतर हैं, और हम देखेंगे कि वे कैसे फायदेमंद हो सकते हैं.

WordPress supports WebP images from version 5.8 (released in July 2021). AVIF support might be required using plugin for versions older than 6.5.

The “New” Image Formats

Each of the modern image formats, i.e WebP, AVIF, and HEIF/HEIC brings distinct advantages, offering improved compression, stunning visual quality, and faster loading times.

WebP Format

WebP is a cutting-edge image format introduced by Google, designed with web performance in mind. It supports both lossy and lossless compression, making it versatile for various web applications. WebP images often result in smaller file sizes compared to their JPEG or PNG counterparts, leading to quicker page loads and an enhanced user experience.

One of the key strengths of WebP lies in its broad browser support. Major browsers, including Chrome, Firefox, Edge, and Opera, all natively support WebP, ensuring your images display correctly for a significant portion of your audience.

AVIF Images

AVIF is a next-generation image format developed by the Alliance for Open Media. It boasts state-of-the-art compression, delivering significantly smaller file sizes than other formats, often with superior visual quality. AVIF supports advanced features such as alpha channels, high dynamic range (HDR), and wide color gamuts, making it the ideal choice for showcasing high-quality visuals on modern displays.

While AVIF is not yet as widely adopted as WebP, its exceptional performance and visual fidelity make it a compelling option for forward-thinking developers. With browser support steadily increasing, AVIF is a format worth considering for future-proof web design.

HEIF/HEIC Format

HEIF (High-Efficiency Image Format) and its iOS variant, HEIC, are innovative formats designed to efficiently store and deliver high-quality images. HEIF/HEIC offer advanced compression, outperforming JPEG in terms of file size reduction while maintaining excellent visual fidelity.

One of the standout features of HEIF/HEIC is their ability to store multiple images, image sequences, and even short videos within a single file. This versatility is particularly advantageous for mobile devices, where storage and bandwidth optimization are crucial.

A quick look at jpeg XL Image format

JPEG XL is a new image format developed by the JPEG committee, designed to provide better compression and improved image quality. JPEG XL is optimized for high-resolution images and supports features like alpha channels and HDR. It doesn’t have a fixed file extension yet. However, the JPEG XL committee has proposed the following file extensions for JPEG XL files:

• .jxl for JPEG XL files with lossy compression
• .jxlz for JPEG XL files with lossless compression
• .jxlp for JPEG XL files with progressive compression

These file extensions are not yet widely supported, and it’s likely that different software and devices will use different file extensions or no file extension at all.

Legacy Image Formats

JPEG, PNG, and GIF are the legacy image formats that have been widely used on the web for decades. Despite the emergence of modern alternatives, these formats still hold their ground due to their compatibility and specific use cases.

JPEG is known for its versatility and widespread support, making it ideal for displaying photographs and complex images with millions of colors. PNG, on the other hand, shines with its support for transparency and lossless compression, making it perfect for icons, logos, and images with text. GIF, while limited in color depth, has become synonymous with animated images and short, looping videos.

below you will see the same image, compressed for better optimized delivery. This is also a .jpg image.

While these legacy formats may not offer the same level of compression or visual quality as their modern counterparts, they remain relevant due to their compatibility with older browsers and devices, ensuring a consistent user experience across the web.

Pros and Cons of Multiple Image Formats

Adopting multiple image formats like WebP, AVIF, and HEIF/HEIC offers a range of benefits and considerations:

Pros:

• Improved compression and smaller file sizes lead to faster page loads and reduced bandwidth usage.
• Stunning visual quality enhances the user experience, particularly on high-resolution displays.
• Broad browser support for WebP and growing support for AVIF ensure compatibility for most users.

Cons:

• Managing multiple formats can increase complexity, especially when providing fallback options for older browsers.
• HEIF/HEIC support is primarily focused on Apple devices, requiring conversion for use on other platforms.

Automating Image Optimization

To streamline the management of multiple image formats, consider using plugins like ShortPixel. This plugin automates image optimization, converting images to WebP, AVIF, or JPEG, and serving them based on browser support. ShortPixel or similar plugins ensure your images are delivered in the most efficient format, improving performance without manual intervention. I am specifically mentioning this one plugin, (there are several others), because I have tested it extensively with ClassicPress, including this site.

How to embed these Image Formats in web page

I. Direct Embed the image

This section will be updated shortly.

II. Using html code

Here’s an example of how to use the <picture> element to display multiple formats of the same image, ensuring compatibility and responsiveness:

<picture> <source srcset="link-to-image.avif" type="image/avif">

<source srcset="link-to-image.webp" type="image/webp">

<img src="link-to-image.jpg" alt="R2D2"> </picture>

In this example, the browser will first check for AVIF support and load “image.avif” if available. If not, it will try WebP, and finally fall back to the JPEG format (“image.jpg”) to ensure compatibility.