The “Using the <PICTURE> tag syntax” option replaces the img
HTML tags with picture
tags so that ShortPixel can deliver WebP and/or AVIF files correctly. It is one of the two options you can use to deliver next generation images on your website. You can find it on your WordPress dashboard, under Settings > ShortPixel > WebP/AVIF & CDN > Serve WebP/AVIF images from locally hosted files (without using a CDN).

WebP or AVIF don’t show up #
There are a few possible explanations for why this delivery method does not work and you still see the JPG/PNG/GIF versions instead of WebP/AVIF:
- You optimized all your Media Library before selecting the “Create WebP Images” option. Please check out this article: I optimized already all the images but then I realized that I didn’t select the option to generate next-gen images, what can I do?
- The WebP or AVIF version was not generated on purpose because they are larger than the original image. Check out this article: Why is my image not converted to WebP or AVIF?
- The original image is in a folder outside the typical uploads folder (which is /wp-content/uploads/). Please take note of where exactly the images are stored and add the paths as custom media folders: How to optimize images of WordPress themes and plugins
- The images are background images. If your images are loaded via CSS with the
background-image
property, ShortPixel Image Optimizer cannot serve them as WebP or AVIF using this method. - The lazy-loading solution you are using conflicts with SPIO. Try disabling all lazy loading features on your website to see if this fixes the problem. If it does, we recommend that you use a different lazy-loading solution.
- The images are served via JavaScript mechanisms.
- A cache solution is serving old pages. It can be your browser, server, CDN or a cache plugin. Try clearing them all: How to clear WordPress cache
- You have used a page builder for page creation. Our feature may not work well with pages created with some of these tools.
- You have a Windows Plesk server. You need to add a MIME type for .webp (
image/webp .webp
) or .avif (image/avif .avif
) extensions on your server.
Images looking distorted #
Sometimes, images lose their aspect ratio or encounter similar styling issues after you enable the “Using the <PICTURE> tag syntax” delivery method. Example:


This is the explanation:
- When the <picture> tag method is enabled, the HTML structure changes because all
<img>
tags are replaced with<picture>
tags, and the<img>
tags themselves are moved one level below, under the<picture>
tag. - As a result, some CSS rules stop working because there is now a
<picture>
tag above the<img>
tags.
Unfortunately, there is no universal solution for this. The only possible fix is either adding a manual CSS adjustment to the website or using an alternative delivery method (see below).
Missing duotone support #
When adding a Cover Gutenberg block, and applying a Duotone filter to it, the filter is lost on the frontend if the <picture> delivery method is active.
The reason for this is the same as the previous issue: SPIO adds a new <picture>
tag in the HTML where there was previously an <img>
tag. The <img>
tag is then moved one level below, causing selectors like .wp-duotone-blue-red.wp-block-cover > .wp-block-cover__image-background
(which the Duotone filter relies on) to stop targeting the correct element.
Unfortunately, there is no universal solution for this. The only possible fix is either adding a manual CSS adjustment to the website or using an alternative delivery method (see below).
Alternatives #
If none of these apply to your case, or if you can’t fix the issue, we recommend you trying an alternative solution for next-gen images delivery:
- Use the second local delivery option built into SPIO (Without altering the page code (via .htaccess)): WebP instructions / AVIF instructions
- Deliver images using the ShortPixel CDN in SPIO.
- If you have an NGINX server, you can configure NGINX to transparently serve next-gen format files when supported.
- Add ShortPixel Adaptive Images to your site and use it to serve the next-gen images. Read more about the differences between ShortPixel Image Optimizer and ShortPixel Adaptive Images here: ShortPixel Adaptive Images vs. ShortPixel Image Optimizer.
- Use another plugin to deliver the WebP/AVIF files created by ShortPixel, such as Cache Enabler or WP Rocket.
- If you use LiteSpeed Cache, you can use it to deliver the WebP files generated by ShortPixel.