Images play a crucial role in website performance and SEO. They take up 1,054 KB on desktop pages and 900 KB on mobile pages, making them the largest contributor to page weight on homepages, while accounting for about 40% of the total page weight. Optimizing them with next-gen formats like WebP and AVIF can therefore significantly reduce page load times and improve user experience. In this guide, we’ll cover everything you need to know about serving images in next-gen formats in WordPress.
What are next-gen image formats?
Next-gen formats like WebP and AVIF offer superior compression compared to traditional formats like JPG and PNG. Here’s a quick comparison:
- WebP: Developed by Google, WebP provides better compression than JPG and PNG while maintaining high image quality. It supports both lossy and lossless compression, transparency (like PNG), and animations (like GIF). Lossless WebP images are 26% smaller than PNG, and lossy WebP images are 26-30% smaller than JPEGs. The big advantage of WebP over AVIF is that it is widely supported across major browsers, including Chrome, Edge, and Firefox.
- AVIF: Based on the AV1 video codec and therefore making AVIF its counterpart, AVIF is an even more advanced image format than WebP. It offers superior compression efficiency (50% smaller than a JPG), meaning smaller file sizes with better quality and also supports lossy/lossless, transparency and animation. However, AVIF has more limited browser support compared to WebP, making it a less universally compatible option.
Can you upload WebP/AVIF in WordPress?
Yes, WordPress natively supports WebP uploads, meaning you can directly upload WebP images and serve them to all your visitors easily. However, if you upload WebP images manually, they won’t be optimized further unless you process them beforehand. This can lead to unnecessary large file sizes if they haven’t been properly compressed before uploading.
AVIF, on the other hand, is not yet supported in the WordPress media library. This means you can either upload an unoptimized file or choose not to upload a file at all. Not a great choice, right?
Best practice: Convert JPG, PNG or GIF to WebP/AVIF in WordPress
Instead of uploading WebP directly, the best practice is to upload images in standard formats (JPG/PNG/GIF) and then convert them inside WordPress with a plugin. This ensures images are properly optimized before serving.
The best plugin for image optimization is ShortPixel Image Optimizer (SPIO), hands down. It’s also the best way to convert images to WebP and AVIF in WordPress. The process involves just a few simple steps:
- Install SPIO on your WordPress site: ShortPixel Image Optimizer – WordPress.org
- Go to Settings > ShortPixel and configure the settings to your liking.
- Now go to Settings > ShortPixel > WebP/AVIF & CDN.
- Enable “Create WebP Images” and/or “Create AVIF Images”.
- Upload your images and let the plugin optimize and convert them to WebP/AVIF.
Now, we still need to serve them to all users. For that, we have three methods.
1) Serve locally stored WebP/AVIF files
ShortPixel allows you to generate WebP/AVIF files and serve them from your own server. To enable this feature:
- Go to Settings > ShortPixel > WebP/AVIF & CDN.
- Activate the option: “Serve WebP/AVIF images from locally hosted files (without using a CDN).”
- Choose a delivery method:
- Using the
<picture>tag syntax: This method scans your HTMLHTML HTML is the fundamental language used to create and structure content on web pages. It consists of a set of tags or codes used to describe a web page's structure and content. Each HTML tag has a specific function, like indicating headings, paragraphs, images, links, and other visual elements on a page. Through these tags, web browsers interpret and display content in an organized and understandable manner for users. HTML is essential for building any web page and provides the foundation upon which other elements and styles are added to achieve the desired design. source code for<img>tags and replaces them with<picture>tags containing references to the original image, WebP, and AVIF versions. The browser will automatically select the best format, prioritizing AVIF. This approach avoids server configuration (unlike the.htaccessmethod) but is less effective—it only applies to<img>tags, not background images—and has a greater performance impact. - Without altering page code (via .htaccess): This is the most performance-efficient method because the server directly delivers WebP/AVIF files instead of relying on WordPress. However, it does not work on Nginx servers. If you have an Nginx server, we’d recommend you checking their official documentation.
- Using the
2) Use ShortPixel’s CDN to deliver WebP/AVIF
The second method ShortPixel offers is delivering WebP/AVIF via its built-in CDN. This method:
- Does not depend on your web serverWeb server A web server is a software program installed on the server where your website resides. It's responsible for receiving, processing, and responding to requests from users' browsers, delivering the content of requested web pages. The most common web servers in WordPress are Apache, NGINX, LiteSpeed, and OpenLiteSpeed.’s configuration.
- Dynamically rewrites image URLs to serve optimized versions. Each time a page loads, ShortPixel scans the HTML and replaces standard image URLs with ones pointing to
spcdn.shortpixel.ai. Your original physical files remain unchanged. - May be slower than local delivery if your server is already fast.
- Some image URLs may not be replaced depending on how your website is built.
To enable this method, simply go to Settings > ShortPixel > WebP/AVIF & CDN and turn on “Deliver the next generation images using the ShortPixel CDN” option. Keep in mind that you must also enable either “Create WebP Images” or “Create AVIF Images.”
3) Generate WebP and use another plugin for delivery
If you prefer not to use ShortPixel’s delivery options, you can still use the plugin to generate WebP files and let another plugin handle delivery. The most popular compatible options are:
- LiteSpeed Cache: You’ll need to enable the “Image WebP Replacement” setting under LiteSpeed Cache > Image Optimization > Image Optimization Settings.
- WP Rocket: You will have to enable the WebP Compatibility add-on.
- Cache Enabler: Simply enable the “Create a cached version for WebP support” option.
Unfortunately, these three plugins are also caching plugins, so using them solely to deliver your WebP files might be overkill. However, if you’re already using one of them, feel free to take advantage of its WebP support!
Remember, you must generate WebP versions with ShortPixel beforehand and disable both native ShortPixel delivery methods. In ShortPixel’s settings, make sure:
- Create WebP Images: Enabled.
- Deliver the next generation images using the ShortPixel CDN: Disabled.
- Serve WebP/AVIF images from locally hosted files (without using a CDN): Disabled.
What’s the fastest way to serve WebP/AVIF?
Of all the possible configurations, the fastest way to serve WebP/AVIF images in terms of performance is usually to let the server handle the delivery. This means:
- Using .htaccess on Apache servers, which you can configure directly from ShortPixel’s settings.
- Manually configuring Nginx, either through your hostingHosting Hosting is the service that allows you to store your website online so that others can access it. It's like renting a space on the internet to make your site available 24/7. provider or by yourself if you manage the server.
However, if your audience is worldwide or your server isn’t powerful enough (e.g., Bluehost, HostGator, SiteGround, GoDaddy, etc.), a CDN will likely provide better performance. See step #2 above.
In any case, we recommend first compressing your images with ShortPixel to ensure the final WebP and/or AVIF files are as small as possible.
I still would like to upload my WebP or AVIF files directly to WordPress…
No problem at all! That’s usually much easier, but be sure to optimize the files before uploading them.
I already compress my images before uploading them to WordPress. Is that a problem?
Not at all. If you already compress your JPG/PNG/GIF images before uploading them, you just need a solution to create and deliver their next-gen formats. To do that, you can use a simple plugin like Modern Image Formats. The recommended settings are as follows:
- Image output format — AVIF. It’s better than WebP.
- Output fallback images — Checked, so you always have the original format available.
- Generate all fallback image sizes — Checked, so you always have the original format available.
- Picture element — Unchecked for better performance. This option is the same as ShortPixel’s, and while it offers good compatibility, it changes the HTML structure, which can be problematic in some cases.
While serving WebP or AVIF via the server (e.g., using an .htaccess file or Nginx configuration) is better than letting WordPress handle it, the Modern Image Formats plugin is the next best option. It relies on WordPress hooks and filters to perform the replacement on the fly, rather than using JavaScriptJS JavaScript, abbreviated as "JS," is a programming language used to create interactivity on websites. It allows you to add elements like animations, dynamic forms, and real-time updates without needing to reload the page. JavaScript, like CSS, can be inserted directly into the HTML code or can be added as external .js files referenced by the HTML code. or modifying the source code.
Conclusion
The best way to serve images in next-gen formats while achieving great performance is:
- Upload images in JPG or PNG format.
- Make sure the images are compressed before uploading, or use ShortPixel Image Optimizer to compress them afterward.
- Use ShortPixel Image Optimizer or Modern Image Formats to convert images to WebP or AVIF, depending on whether they were compressed before uploading.
- Choose the best delivery method based on your server setup. If possible, let the server handle it (Apache/LiteSpeed/Nginx) instead of WordPress.
And if you need any help with this, we can help you!
