No bug "Add Image Size" Not Working Properly

Hello.  Recently purchased and installed this plugin, and for the most part it's working as intended.  I wish It would create a thumbnail at the size specified for the image in the HTML and use that one if appropriate to the screen size, but I can work with the fixed size.

The one issue I am having is that if I turn on "add image size", it adds the size of the original image (in my case, 1280x960 for most of my images), rather than the size of the thumbnail.  This has the effect of stretching my article intro images horizontally, as I have a max-height defined for those in css, but no max width in order to allow for images that are either landscape or portrait orientation to be rendered correctly.  It also does little to avoid CLS when you tell the browser the image is 1280x960, and then provide it with a thumbnail that is 400x300.  Am I missing something as to how this is supposed to work?

Alex Wilhelm schreef :

Hello.  Recently purchased and installed this plugin, and for the most part it's working as intended.  I wish It would create a thumbnail at the size specified for the image in the HTML and use that one if appropriate to the screen size, but I can work with the fixed size.

Hi Alex, thanks for your subscription. So let me explain as to why having an thumbnail in the specified size will not 'work'. We are actually not creating thumbnail (a smaller size of an image), but we are creating multiple sized images of the image and we then offer these to the browser in a so called img srcset. So in the srcset thare are all the image listed along with their resolution. The browser will decide what image it will use based on the screen quality and or device it is displaying the image on: always taking into consideration the best possible quality with the lowest imact on performance / bandwidth. Now if you have an image with a width of 2400 pixels, there are several srcset images created (dependent on your configuration), fot this example e.g. 400px, 600px, 800px, 1600px
Now when the browser is is on a tablet with a resolution of 800px, it will download and display the 800px image from the srcset to the visitor, but if you have a tablet with a screen dpi of 2 and a resolution of 800px, it will not take the 800px but the 1600px image as that has the best quality on a 2dpi screen.

This means that we can stop 'thinking' in terms of sizing the images for the best possible display as that now is the responsibility of the browser. If we do this ourself (sizing images) then we will always end-up with a compromis as either the image is to large or to small for the visitor.

The one issue I am having is that if I turn on "add image size", it adds the size of the original image (in my case, 1280x960 for most of my images), rather than the size of the thumbnail.  This has the effect of stretching my article intro images horizontally, as I have a max-height defined for those in css, but no max width in order to allow for images that are either landscape or portrait orientation to be rendered correctly.  It also does little to avoid CLS when you tell the browser the image is 1280x960, and then provide it with a thumbnail that is 400x300.  Am I missing something as to how this is supposed to work?

Converting the images to a srcset is seamless: it doesn't change anything on the visual display of the image on the page. Adding the width / height does so this will only work if the original image is sized exactly to fit is and is not resized by the browser / css.
So although you can turn that on, you should not as it can break the displaying of the image.

Does this make sense Alex?
Feel free to follow up, ochResponsiveimages is very powerfull and a big part of that power comes from it's 'simplicity': it is really a set and forget plugin!

regards,
Ruud.

Thanks for the reply. I do more or less understand how the srcset works, I'm mostly referring to them as thumbnails because I have another plugin that will open the original image in a lightbox for those readers who want to see something in more detail, and I have all of my images scaled down somewhat in the HTML from their full size in order to keep the image to text ratio a bit more reasonable on the page.  Part of the "problem" is that I have not been entirely consistent over the years in what size images I include in the article, so there's no "one size fits all" size that I can set as the largest break point.  It wouldn't be a terrible job to go back and adjust some image sizes in old articles to make better use of the size break points, at least for a desktop user.  Also I can just not worry about it .  Giving the option of an 800px image to be displayed at 600px is still much better than only having the original 1280 image available.

I had a plugin previously that generated a thumbnail / small size image at whatever size was specified in the HTML, and it worked great, but sadly has not been updated to support Joomla 4/5.

I was hoping to avoid it, but perhaps I just need to manually create intro / full article images at a specific resolution for all of my articles.  If I did this, would the "add image size" option still break the formatting on small screens?  It probably would...  I might need to experiment a bit.

The dpi of 2 resulting in an 800px display using the 1600px image is something I didn't realize.  That may be why I have noticed that page speed insights seems to be using the larger images on it's mobile test, even though smaller ones exist.  Or maybe page speed insights is just somewhat broken itself...

Regarding image size attributes and CLS, is there any way to avoid CLS when using srcset?  It seems that what you are saying is that by the very nature of having multiple image sizes that the browser can request, there's no way to tell the browser to save space for the image?

Alex Wilhelm schreef :

Regarding image size attributes and CLS, is there any way to avoid CLS when using srcset?  It seems that what you are saying is that by the very nature of having multiple image sizes that the browser can request, there's no way to tell the browser to save space for the image?
 

Avoiding CLS is not dependent / controlled by the srcset, but by the width / height attributes set on the <img> element. This basically tells the browser what the width / height are before fetching the image.
The size of the image doesn't matter as long as the aspect ratio of the images (in the srcset) are the same: if not, the browser is reserving the wrong space > either the height or width is then not correct resulting in CLS.

Ruud van Lent schreef :

Alex Wilhelm schreef :

Regarding image size attributes and CLS, is there any way to avoid CLS when using srcset?  It seems that what you are saying is that by the very nature of having multiple image sizes that the browser can request, there's no way to tell the browser to save space for the image?

 

Avoiding CLS is not dependent / controlled by the srcset, but by the width / height attributes set on the <img> element. This basically tells the browser what the width / height are before fetching the image.
The size of the image doesn't matter as long as the aspect ratio of the images (in the srcset) are the same: if not, the browser is reserving the wrong space > either the height or width is then not correct resulting in CLS.
 

Right, but in order to avoid CLS, the browser needs to be told how much space to reserve for the image, right?  If you tell the browser the image is 1280x960, and then based on the srcset the image the browser actually displays is 400x300, won't the browser have reserved too much space?

You tell the browser what space to reserve via the width / height attribute on the <img> element: this is the display width and not per definition the image width. You can have an image of 200 by 200 displayed with width 100 and height 100.
As all the images created by ochResponsiveImages have the same aspect ratio, they will then all display correct with the width / height set (100 x 100) on any browser device.

ochResponsiveImages respects the width / height set on the image. So setting that width / height is what you need to do for preventing cls.
Note that this has nothing to do / cannot be set with css as css loads after the the reserved space is taken. So preventing cls can only be done by (manually) adding the image height / width on the image itself.