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:
rosell-dk/dom-util-for-webp#42
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:
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:
But let us then assume that the webp version of the big image is larger than the original.
Then the result will be this:
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:
rosell-dk/dom-util-for-webp#42