Javier Casares 18:17 on 2024-06-19
Tags: ,   

The Image Revolution: AVIF and WebP

With the release of WordPress 6.6 in July, extended support for optimized image formats such as AVIF and WebP is being introduced. This update represents a significant improvement in how images are managed and served on the web, which is crucial for both developers and hostingHosting A web hosting service is a type of Internet hosting service that allows individuals and organizations to make their website accessible via the World Wide Web. companies. Below, we explore these formats in detail and their importance in image optimization compared to more traditional formats like JPEG.

What are AVIF and WebP?

AVIF

AVIF (AV1 Image File Format) is an image format derived from the AV1 video codec. It offers superior compression and image quality compared to traditional formats. Key features of AVIF include:

  • Efficient Compression: AVIF provides more efficient lossless and lossy compression than JPEG, resulting in significantly smaller file sizes.
  • Image Quality: Maintains high image quality even at high compression rates.
  • Transparency Support: Like PNG, AVIF supports transparency, making it ideal for a wide range of applications.
  • High Dynamic Range (HDR): AVIF supports HDR, enhancing visual quality on compatible devices.

WebP

WebP, developed by Google, is an image format designed to reduce image file sizes without compromising quality. Its key features include:

  • Lossy and Lossless Compression: Offers both lossy and lossless compression, adapting to different needs.
  • Transparency: Like AVIF and PNG, WebP supports transparency.
  • Animations: WebP can store animated images, offering an alternative to traditional GIFs with smaller file sizes.
  • Loading Speed: Due to its efficient compression, WebP images load faster, improving website performance.

Comparison with JPEG

JPEG has been the de facto standard for web images for many years. However, it has limitations compared to AVIF and WebP:

  • Compression: JPEG uses lossy compression that can result in visible artifacts at high compression rates.
  • File Size: JPEG images are typically larger than their AVIF and WebP counterparts for the same image quality.
  • Transparency and Animations: JPEG does not support transparency or animations, limiting its versatility.

Benefits for Hosting Companies

With the extended support for AVIF and WebP in WordPress 6.6, hosting companies should be prepared to take full advantage of these technologies. Here are some recommendations:

Installation of Necessary Libraries:

  • PHPPHP PHP (PHP: Hypertext Preprocessor) is a general-purpose scripting language especially suited to web development. PHP code is usually processed on a web server by a PHP interpreter. On a web server, the result of the interpreted and executed PHP code would form the whole or part of an HTTP response. GD and ImageMagick: Ensure that the PHP GD and ImageMagick libraries are updated and configured to support AVIF and WebP. This may involve installing additional dependencies or recompiling the libraries with support for these formats.
  • Libavif and Libwebp: These libraries are essential for the compression and decompression of AVIF and WebP images. Hosting companies should ensure they are installed on their servers.

Performance Optimization:

  • ServerServer A server is a piece of computer hardware or software that provides functionality for other programs or devices. Typical servers are database servers, file servers, mail servers, print servers, web servers, game servers, and application servers. Configuration: Adjust server settings to efficiently serve AVIF and WebP images. This includes configuring appropriate HTTPHTTP The Hypertext Transfer Protocol (HTTP) is protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web, where hypertext documents include hyperlinks to other resources that the user can easily access, for example by a mouse click or by tapping the screen in a web browser. headers for cachingCache A cache is a component that stores data so that future requests for that data can be served faster; the data stored in a cache might be the result of an earlier computation or a copy of data stored elsewhere. and compression.
  • Automatic Conversion: Implement solutions that automatically convert uploaded images to these optimized formats.

Education and Support:

  • Training: Provide clients with educational resources on the benefits of AVIF and WebP and how to use them on their websites.
  • Technical Support: Be prepared to assist clients with the configuration and use of these new formats.

Installation on Debian / Ubuntu

Installing libavif and libwebp

Update system packages:

   sudo apt update
   sudo apt upgrade -y

Install essential dependencies:

   sudo apt install -y build-essential cmake git

Install libwebp:

   sudo apt install -y libwebp-dev

Install libavif:
First, install libaom, a library needed for libavif.

   sudo apt install -y libaom-dev

Then proceed with libavif:

   git clone https://github.com/AOMediaCodec/libavif.git
   cd libavif
   mkdir build
   cd build
   cmake ..
   make
   sudo make install

Configuring PHP GD and ImageMagick

Install PHP and necessary extensions:

   sudo apt install -y php php-gd php-imagick

Verify that the extensions are enabled:

   php -m | grep -E 'gd|imagick'

Restart the web serverServer A server is a piece of computer hardware or software that provides functionality for other programs or devices. Typical servers are database servers, file servers, mail servers, print servers, web servers, game servers, and application servers.:

   sudo systemctl restart apache2  # For Apache
   sudo systemctl restart nginx  # For Nginx

Installation on CentOS / Red Hat

Installing libavif and libwebp

Update system packages:

   sudo yum update -y

Install essential dependencies:

   sudo yum groupinstall -y "Development Tools"
   sudo yum install -y epel-release
   sudo yum install -y cmake3 git

Install libwebp:

   sudo yum install -y libwebp-devel

Install libavif:
First, install libaom.

   sudo yum install -y libaom-devel

Then proceed with libavif:

   git clone https://github.com/AOMediaCodec/libavif.git
   cd libavif
   mkdir build
   cd build
   cmake3 ..
   make
   sudo make install

Configuring PHP GD and ImageMagick

Install PHP and necessary extensions:

   sudo yum install -y php php-gd php-pecl-imagick

Verify that the extensions are enabled:

   php -m | grep -E 'gd|imagick'

Restart the web server:

   sudo systemctl restart httpd  # For Apache
   sudo systemctl restart nginx  # For Nginx

Conclusion

By following these steps, hosting companies can ensure their servers are fully prepared to handle images in the AVIF and WebP formats. This will not only improve the quality and loading speed of images on their clients’ websites but also provide a significant competitive advantage in the hosting services market. The update to WordPress 6.6 in July will be a crucial moment to implement these strategies and lead in the support of next-generation image formats.

Props: @adamsilverstein

#performance, #php