Used wordpress + bootstrap 4
There are 2 options for images, 1 for desktopa and 1 for mobile.
The template is adaptive. Inserts as html code into the page.

So the question is how to download only the desired image?

I manage the display in this way.

<div> <img class="m" src="URL" alt=""> <img class="d" src="URL" alt=""> </div> .m { display: none; } @media (max-width: 540px) { .d { display: none; } .m { display: block; } }

Maybe I’m generally wrong approach to the implementation and there are more correct solutions. Maybe there is some kind of wordpress plugins or something in bootstrap.

    1 answer 1

    It is possible and the way you wrote, but all this is a waste of time. WordPress in the latest versions uses srcset to adapt the images on the site. This approach provides for the creation and listing of several image sizes, and the browser chooses the size that best suits the current screen size. For example:

     <img width="400" height="400" src="//test.kagg.eu/wp-content/uploads/2017/08/779366a5-4648-386d-a3e1-c3d63b994237-400x400.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="" srcset="//test.kagg.eu/wp-content/uploads/2017/08/779366a5-4648-386d-a3e1-c3d63b994237-400x400.jpg 400w, //test.kagg.eu/wp-content/uploads/2017/08/779366a5-4648-386d-a3e1-c3d63b994237-150x150.jpg 150w, //test.kagg.eu/wp-content/uploads/2017/08/779366a5-4648-386d-a3e1-c3d63b994237-157x157.jpg 157w, //test.kagg.eu/wp-content/uploads/2017/08/779366a5-4648-386d-a3e1-c3d63b994237-100x100.jpg 100w" sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px">

    Display pictures using standard WordPress tools, and you will get the adaptability of the pictures on the site.

    • Thank. It is a pity that with the support this attribute is bad. - Dima
    • one
      Why do you think so? Can I use read? See the test.kagg.eu/shop page, including IE and Edge. - KAGG Design
    • @Dima cm caniuse.com/#search=srcset By the way, the srcset in the VP also automatically “aligns” the protocol if the site is available in different ways. - SeVlad
    • Well, I'm about the same. In the barn of Grandma Pelagia is not yet written. You look at the real page, stuffed with srcset. I gave you a link. - KAGG Design
    • Watched here. developer.mozilla.org/ru/docs/Web/HTML/Element/img Previously, this resource did not let me down, sorry I was wrong. - Dima