Image formats are a crucial part of website speed optimization as well as user experience. If the hero image or a banner on the front page of your website is too large, it will definitely slow down the time it takes to load the page. On the other hand, a poor-quality image in an online store can turn away a potential buyer, if the product details are not clearly visible, or the image is otherwise of poor quality. This is why new ways to present images in better quality but in a smaller size are of particular interest to web developers.
Image files have two important and essential properties: its resolution and file size. In addition to the image resolution, the format of your image file also affects the resulting file size – how much space it takes up on the hard drive, and how fast it will get transferred over the network to the user’s browser for loading.
The Next Generation of Image Formats
So, what is an image format? Think of it as a digital frame within which your image is presented: the frames around it, and glass on top of it. The borders should not be too heavy, and the glass over the image should not distort the colors or content of the image. In a well-performing image format, these “frames” are light, and it keeps the image’s colors bright and the details sharp.
More traditional image formats such as JPEG, PNG, and GIF are known by many, and they’ve been around for decades. Although these file formats are going to stick around, developers and device manufacturers are particularly interested in new image formats. These next-gen formats offer better performance and save resources on servers and networks. They have become more common in recent years, and it’s very likely that their popularity will continue to grow.
WebP
The WebP format was developed by Google, and it has become very popular due to its versatility. WebP offers an alternative to JPG and PNG images, for example. WebP is able to display high-quality images compressed to a reasonable size, both lossless and lossy compression.
Animations saved in GIF format can be of low quality and large in size, but WebP can handle animation too: it offers a lightweight way to compress and display moving images in a compact size. Short MP4 files can also be easily converted to WebP format.
WebP was released in 2010, and today it is supported by all browsers. Support for WebP images was added in WordPress 5.8, in 2021.
AVIF
The AVIF image format, based on the AV1 video codec, promises even better compression capabilities than WebP, allowing images to be displayed with even higher quality while taking up less space.
AVIF was released in 2019, and support for it can be found in almost all modern browsers. The WordPress core supports AVIF images from version 6.5 onwards.
Other formats: JPEG XL and HEIC
JPEG XL, or JXL, is the newest addition to next-gen image formats, although its use is mostly limited to the Safari browser – at least for the time being. Back in 2017, Apple adopted the HEIC image format and made it the default image file format for iOS 11 devices. It remains to be seen which format will be favored in the future by device manufacturers.
WordPress will not support JXL in the foreseeable future – at least not until its use becomes more widespread. HEIC images however can be uploaded from Apple devices directly to WordPress media library from WordPress 6.7 and onwards. However, all HEIC images are converted to JPG after uploading.
AVIF and WebP in WordPress
Using newer image formats is possible in Seravo’s WordPress hosting, as long as your WordPress version is recent enough. In addition, a small additional configuration is needed for the HTTP server (Nginx).
Using AVIF at Seravo
You can easily use AVIF images at Seravo if you are running WordPress 6.5 or newer, and at least PHP 8.3. In order to serve AVIF images to website visitors, the following configuration is also needed for the HTTP server (Nginx):
location ~* \.avif$ {
add_header Content-Type "image/avif";
}
You can add this configuration to your site yourself by creating a new file (e.g., avif.conf) in the /data/wordpress/nginx path. Adding the file to the server can be done by using an SSH connection. In addition, Nginx needs to be restarted with the command wp-restart-nginx. Seravo’s WordPress experts can also do the configuration for you as an additional service.
Converting Existing Images
If you are using WordPress version 5.8 or newer, you can upload and use WebP images without additional plugins or settings. If your WordPress site and media library already contain a bunch of JPG, PNG, and GIF images, it makes sense to convert them to newer formats using a plugin available for WordPress, such as WebP Converter for Media. The plugin needs to be installed, and with the following Nginx configuration, your site’s images will be converted to WebP format.
To make the configuration, create a new file on the server in the /data/wordpress/nginx path. Name it as you wish (for example, webp.conf) and restart Nginx with the command wp-restart-nginx. More information can be found in Seravo’s developer documentation.
# BEGIN Converter for Media
set $ext_avif ".avif";
if ($http_accept !~* "image/avif") {
set $ext_avif "";
}
set $ext_webp ".webp";
if ($http_accept !~* "image/webp") {
set $ext_webp "";
}
location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif|webp)$ {
add_header Vary Accept;
expires 365d;
try_files
/wp-content/uploads-webpc/$path.$ext$ext_avif
/wp-content/uploads-webpc/$path.$ext$ext_webp
$uri =404;
}
# END Converter for Media
What if I Can’t Use Next-Gen Image Formats?
If WebP and AVIF are not a viable option for one reason or another, it is recommended to use progressive JPG images. There are different ways to save JPG images. A progressively compressed JPG means that the image is not loaded line by line, from top to bottom, but first as a whole in lower quality, after which it sharpens to its final quality.
Many developers, as well as website optimization tools and programs, have long recommended using progressive JPG files on websites because they load most efficiently of all JPG types.
When saving your image, check the advanced settings of the image editing software you are using. Saving as a progressive JPG is possible in most of them: when it comes to open-source programs, at least GIMP and Krita offer this advanced setting when saving an image.
Seravo Plugin and Image Optimization
When your WordPress site is hosted at Seravo, all images uploaded to the media library can be optimized with the Seravo Plugin. The Seravo Plugin is automatically enabled on your site when you choose Seravo’s premium WordPress hosting. Learn more about image optimization or other features of the plugin in Seravo’s knowledge base, help.seravo.com.
Summary
WebP and AVIF load faster than traditional image formats, but modern website optimization isn’t all about technological performance. In order to perform well in search engine results, websites need to take the user experience into account – the real-life human experience of browsing the web. This is why relying on a single image format may not be the best for your site’s SEO or user experience.
The best result for site optimization is achieved by using different formats thoughtfully. What is the purpose of the image? Which part of your site is it displayed, and what purpose does it serve? Is it a decorative image on the front page that should load as quickly as possible, or a product image that requires accuracy and detail?
Navigating the various image formats is not always easy. If you need additional help with speed optimization or image files, our WordPress experts are happy to help you to get started with next-gen image formats!