Some images gets blurry when using alter html (picture tags)

[rosell-dk]

This can happen when the "Prevent using webps larger than original" option is on It can happen when an image has a "srcset" The problem occurs because when some of the sizes are removed from the srcset.

Example:

HTML before it is altered:

<img 
  width="462" 
  height="600"
  srcset="test.jpg 462w, test-150x195.jpg 150w"
  src="test.jpg"
>

There is two variants of the image in the example - the original and a thumbnail. Lets say that the corresponding webps are both smaller than their originals. Then the HTML will be this:

<picture>
  <source 
    srcset="test.jpg.webp 462w, test150x195.jpg.webp 150w"
    sizes="(max-width: 462px) 100vw, 462px"
    type="image/webp">
  <img width="462" height="600"
    class="webpexpress-processed"
    srcset="test.jpg 462w, test-150x195.jpg 150w"
    src="test.jpg">
</picture>

But let us then assume that the webp version of the big image is larger than the original. Then the result will be this:

<picture>
  <source 
    srcset="test150x195.jpg.webp 150w"
    sizes="(max-width: 462px) 100vw, 462px"
    type="image/webp">
  <img width="462" height="600"
    class="webpexpress-processed"
    srcset="test.jpg 462w, test-150x195.jpg 150w"
    src="test.jpg">
</picture>

The difference is that "test.jpg.webp 462w, " is removed from the srcset attribute in the "source".

Now, let us say that you are on a modern browser that supports webp. A modern browser will use the "source" element INSTEAD of the "img" element, because it supports webp. So. But the highest quality image is not in the source element. There is only the low quality variant. NOT GOOD

It is thus a bad strategy to take out some variants in the srcset for the webps. Either all or none.

So what to do when some of the webps are smaller than the originals and some are larger? Well. The easiest thing for me to implement is to skip if one is smaller, so this is how it is going to work. This also respects the ""Prevent using webps larger than original" in a strict sense.

See more here: https://github.com/rosell-dk/dom-util-for-webp/issues/42

[rosell-dk]

I'm going to release this fix pretty soon. If you cannot wait for that, simply disable the "Prevent using webps larger than original" option (found on WebP settings page, in the general section). If you have page caching enabled, make sure to flush the page cache after changing the option