Hello,

It would be better to change the default "width" attribute for a data-width one to define the default size of the image. It's a bad practict to use width and height attributes on images. (if you scan your website on dareboost, it will be reported as a problem).

Even better option, let user configure the attribute they want in backoffice. You already allow to add a class, etc... for lazyload integration. Would be cool to be able to change that "width" attribute.

Thanks

Alex

Hi Alex

Thanks for your feedback. The ResponsiveImages plugin currently does not set a width or height attribute. All it does is to generate resized image copies and add a sizes attribute to your image tag. If there is a width attribute on your image it was there before the plugin did it's work.

Maybe another plugin or the wysiwyg editor has added it?

Hello,

First, thanks for your fast reply.

Yes, the plugin don't add any width attribute, but it seems that it read the width attribute you set to define the size of the default image. Let me explain :

I have a 1000 x 1000px image, I defined 3 breakpoints in my srcset : 400, 800, 1200, my image is in a container that have a width of 250px.

If I write :

<img src="dummy.png" alt="Dummy" />

The plugin rewrite like this

<img src="/storage/app/media/dummy.jpg" alt="Dummy" srcset="/storage/app/media/dummy.jpg 1000w, /storage/temp/public/f29/378/957/dummy__400.jpg 400w, /storage/temp/public/f29/378/957/dummy__800.jpg 800w" sizes="(max-width: 1000px) 100vw, 1000px">

And so, even in my 250px container, the image that will be loaded is the 1000 x 1000 px one.

If I write :

<img width="250" src="dummy.png" alt="Dummy" />

The plugin will rewrite like this :

<img width="250" src="/storage/app/media/dummy.jpg" alt="Dummy" srcset="/storage/app/media/dummy.jpg 1000w, /storage/temp/public/f29/378/957/dummy__400.jpg 400w, /storage/temp/public/f29/378/957/dummy__800.jpg 800w" sizes="(max-width: 250px) 100vw, 250px">

And this is what I expect, as my container is 250px large, I would like to be able to load the correct image (the 400 px one as my max-width is 250 and the nearest defined breakpoint is 400).

The problem is : To do that, I have to use the width attribute, which is not recommanded. I would like to be able to use a neutral (data-width) or something else, but not width.

Didn't look at the code, but it seems the plugin read the width attribute to set the max-width under the size attribute. That is the purpose of my post.

Last updated 7 years ago