Support » Plugin: WebP Express » Ignore Img elements already within Picture elements

  • This stumped me for a long time! It was breaking any img tags that were already nested within a picture tag, and leaving the HTML in a bit of a mess.

    After some deep diving, I came across this comment in this file

    // TODO: We should not replace <img> tags that are inside <picture> tags already, now should we?

    This seems like quite a big breaker for me :-S I suppose its a complex REGEX… or you catch a wider element set and skip if it has indeed matched a picture. For now, because i control the HTML, I can get it to ignore those images by adding the webpexpress-processed class to my img tags that are within a picture tag.

    It would be nice to work out a solution for this one!

    Still think the plugin is great, there are just one or two small things that would make it a little more robust 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • I had the same issue, I fixed I was able to fix it on my end with some info hidden (lol) in the readme.txt

    = Can I make an exceptions for some images? =
    There can be instances where you actually need to serve a jpeg or png. For example if you are demonstrating how a jpeg looks using some compression settings. It is possible to bypass both the redirection and the HTML altering for certain images. Here is how:

    *Alter HTML*
    Alter HTML is programmed not to substitute image URLs with query strings (better safe than sorry). You can exploit that and simply add ie ?original to the image URLs in question.

    To bypass the *redirection*, you can add the following in the .htaccess where *WebP Express* has placed its rules (this is usually in the wp-content folder). The rules needs to be added *above* the rules inserted by *WebP Express*.

    RewriteCond %{QUERY_STRING} original
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteRule . - [L]

    With those rules in place, you can add “?original” to the URLs of those images that you want to keep serving as jpg / png.

    Alternatively, you can specify the filenames individually in the .htaccess:

    RewriteRule ^uploads/2019/02/example-of-jpg-compressed-to-80\.jpg - [L]
    RewriteRule ^uploads/2019/02/image2\.jpg - [L]
    RewriteRule . - [L]

    If you got any further questions, look at, or comment on [this topic](

    • This reply was modified 2 years, 2 months ago by algaebarn.
    Thread Starter willryanuk


    The way I fixed this, after looking at the source code was to add the class ‘webpexpress-processed’ to the img element within the picture tag. This prevents webp Express from processing it. Not ideal, but good for now.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Ignore Img elements already within Picture elements’ is closed to new replies.