Rewrite picture element with min width condition into img

is it possible to rewrite the following <picture> element with the min width media query into just a standard <img> tag with the sizes attribute? I had initially though I had to use the picture element for this functionality, but if I can avoid it here I would prefer to, as it’s causing issues with the slider plugin I’m using and how it handles lazy loading.

<picture class="slide">
                <source media="(min-width: 768px)" 
                        srcset="test.jpg 1x, http://test-retina.jpg 2x">
                <img srcset="test-mobile 1x, test-mobile-retina.jpg 2x">
 </picture>

I believe it all depends on whether you want to make certain the image you want is displayed (as with the picture element) or that you will leave it to the browser to decide the best image to choose from your selection depending on the environment it is displayed in (as with sizes).

These two articles should be helpful in advising the right syntax.

https://dev.opera.com/articles/native-responsive-images/

I must admit that I tend to ‘glaze over’ with all that detail as somewhere along the line it got more complex than expected.:slight_smile:

2 Likes

Thanks for the links - it looks like <picture> (art direction) is the right option for me here since I want to serve different images ultimately for different viewport widths

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.