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

Proposal: Updating WP_MEMORY_LIMIT

During the Contributor Day at the WordCamp Europe 2022, the 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. Team found that WP_MEMORY_LIMIT is set as 40 MB (single site) and 64 MB (multisiteMultisite Multisite is a WordPress feature which allows users to create a network of sites on a single WordPress installation. Available since WordPress version 3.0, Multisite is a continuation of WPMU or WordPress Multiuser project. WordPress MultiUser project was discontinued and its features were included into WordPress core.https://codex.wordpress.org/Create_A_Network.). Furthermore, the WP_MAX_MEMORY_LIMIT is set as 256 MB.

WP_MEMORY_LIMIT is the value for the WordPress Memory Limit, usually referred to the frontend memory, and WP_MAX_MEMORY_LIMIT is the value for the 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. Memory Limit, usually referred to the backend memory.

History

Around September 2013, the WP_MEMORY_LIMIT value changed from 32 MB to 40 MB (32+8). Some tests done by the Hosting Team suggest that the memory used on WordPress is around 16 MB.

The PHP memory_limit sets the maximum amount of memory in bytes that a script is allowed to allocate. This helps prevent poorly written scripts for eating up all available memory on a 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.. Note that to have no memory limit, set this directive to -1. Check the PHP page for more information.

PHP values

The first part gets the value from PHP, and if not exists, sets a default value. Thereafter, if the value is incorrect (in bytes) sets the memory limit from the constant.

This PHP value has evolved:

Some questions

Why change the WP_MEMORY_LIMIT value?

To level it to the PHP standard.

If the hoster has some kind of limitation, misconfiguration, an incorrect value or does not allow changing it, the value used is the lesser, of 40 MB, which usually produces memory errors, when it should use the PHP default value, which is generally acceptable in new installations. At this time, 20 latest versions of WordPress (since WordPress 4.1 / 2014-12-17) can use PHP 5.6.40+ so it would meet the minimums set by PHP.

Can, actually, the value be greater than the PHP value?

Yes. That’s why there is an intent to include something like:

WP_MEMORY_LIMIT <= WP_MAX_MEMORY_LIMIT <= memory_limit

Premises

We should keep in mind some basic assumptions when incorporating PHP memory limits based on what users can do.

The memory limit set by computer systems are set for a reason. And that reason should be enforced; therefore, PHP’s memory limit should not be exceeded, and in case it needs to be exceeded, it should be changed by the system administration.

Users can set the values they want from the wp-config.phpwp-config.php One of the most important files in a WordPress installation is the wp-config.php file. This file is located in the root of your WordPress file directory and contains your website’s base configuration details, such as database connection information. configuration file. Often, extremely high values are set to hide a memory consumption problem due to bad programming. With a few visits it usually works, but it is a short-term fix.

We must be realistic about the memory limits of the WordPress CoreCore Core is the set of software required to run WordPress. The Core Team builds WordPress. and the normal use of a WordPress, whether it is a simple WordPress or a WordPress Multisite. Most WordPress sites install plugins and themes that make memory spikes higher.

PHP has its baseline memory limits that should serve as a reference for its use and application.

Proposal

Considering that since 2008, and PHP >5.2.0 the memory_limit value is equal to 128 MB, should we consider an update of this value in the WordPress base configuration, or at least an update of the values?

The proposal from the WordPress Hosting team is for WP_MEMORY_LIMIT:

  • WordPress Single: define('WP_MEMORY_LIMIT', '128M');
  • WordPress Multisite: define('WP_MEMORY_LIMIT', '192M');

Another patch should be:

WP_MEMORY_LIMIT <= WP_MAX_MEMORY_LIMIT <= memory_limit

Users can modify the WP_MEMORY_LIMIT and WP_MAX_MEMORY_LIMIT at wp-config.php and should have some limitations in values, as far as WordPress cannot overflow PHP.

Getting the values

When doing some calls to PHP functions and values, got this:

  • php.iniphp.ini The main configuration file of PHP.: memory_limit -> value: 256M
  • function: memory_get_usage -> value: 2097152
  • updating the ini_set memory_limit to 512M -> value: memory_limit = 256M
  • function: ini_get_all[memory_limit]
Array (
  [global_value] => 256M
  [local_value] => 512M
  [access] => 7
)

So, the real values are, always, in the ini_get_all[memory_limit].

After doing some tests, maybe hard-coding the values is a bad idea, but having some “limits” is cool (like now) but reading the real values.

Ticket: 56390 Updating WP_MEMORY_LIMIT

Props: @javiercasares, @crixu, @bernardzijlstra, @mikeschroder.

#core, #performance, #php

WordPress Hosting and WebP support

WebP is a containerized graphics format that works with both lossy and lossless compression. Originally from On2 Technologies, it is now being developed by Google under the BSD license.

The format intends to be a new open standard for true-color graphics with lossy compression, and is therefore being presented as a direct competitor to JPEG, which expects to be outperformed in the production of smaller file sizes with comparable image quality.

WordPress 5.8+ supports the WebP image format.

With the launch of the Performance Lab pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory or can be cost-based plugin from a third-party., WordPress is working intensively on optimization. In future versions, a series of messages related to the use of WebP as a format will be incorporated into the Site HealthSite Health This WordPress functionality will perform a number of checks on your installation to detect common configuration errors and known issues, and also allows plugins and themes to add their own checks..

This means that, in case the 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. is not up-to-date, users can be alerted to contact their 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. provider to configure the server to support this format.

The WordPress Hosting Team wants to help set up the necessary elements for WebP to work and be ready, before these new messages are included natively in the WordPress coreCore Core is the set of software required to run WordPress. The Core Team builds WordPress..

More information from the Core Team about enabling WebP by default.

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

The native support feature for WebP is available in several versions of PHP. For example, in PHP 5.4+, PHP 7+ and PHP 8+.

As of now, some of the functionalities that are included:

  • Normal WebP (VP8): supported since PHP 5.4
  • Transparent WebP or alphaAlpha The alpha phase of the release life cycle is the first phase of software testing. transparency (VP8X, VP8L): supported since PHP 7.0
  • Animated WebP (VP8X): not supported at all.

ImageMagick

ImageMagick with WebP support requires the WEBP delegate library. Specify the encoding options with the -define option See WebP Encoding Options for more details.

There are some precompiled packages:

  • Ubuntu (18-20-21): apt-get install libwebp-dev
  • Debian (9-10-11): apt-get install libwebp-dev
  • CentOS 7: yum install libwebp-devel
  • CentOS 8-9 / Almalinux 8: dnf install libwebp-devel

About WebP format

Google, in its Web optimization project, has made available a WebP information portal.

Which web browsers natively support WebP?

Webmasters interested in improving site performance can easily create optimized WebP alternatives for their current images, and serve them on a targeted basis to browsers that support WebP.

  • WebP lossy support
    • Google Chrome (desktop) 17+
    • Google Chrome for Android version 25+
    • Microsoft Edge 18+
    • Firefox 65+
    • Opera 11.10+
    • Native web browser, Android 4.0+ (ICS)
  • WebP lossy, lossless & alpha support
    • Google Chrome (desktop) 23+
    • Google Chrome for Android version 25+
    • Microsoft Edge 18+
    • Firefox 65+
    • Opera 12.10+
    • Native web browser, Android 4.2+ (JB-MR1)
    • Pale Moon 26+
  • WebP Animation support
    • Google Chrome (desktop and Android) 32+
    • Microsoft Edge 18+
    • Firefox 65+
    • Opera 19+

+make.wordpress.org/core/

#performance