What is the best way to work with responsive images?

Question

I am in doubt in my project which is the best way to work with DIRECT HTML responsive images, in Html5 the tag has the srcset attribute that allows this change using the prefix "w" when selecting the screen, But some of the research I did said that the tag would make it easier to do this hard work because it allows you to use the medias query that has become so popular in css and wanted to know the community’s opinion on the subject. And if there is any other way to realize the responsiveness of the images otherwise without harming the performance of the site.

Answer 1

I believe in srcset for sure. First that it is more semantic than a simpler img tag, you can use <figcaption> etc..

After the tests I did he only uploads the image to the right resolution.

With this you can maintain a higher quality in the images and not just use a "splashed" image for any resolution, just changing width and height us @medias, here you really use a different image in a practical way!

You can use the srcset so for example:

<figure>
  <picture>
    <source media="(min-width: 2000px)" srcset="suaimagem-grande.png" sizes="100vw"/>
    <source media="(min-width: 1500px)" srcset="suaimagem-pequena.png" sizes="100vw"/>
  <figure>
<picture>

See here a practical example and notice that when you display the Snippet in "Full Screen" the image will change.

.item {
      background: url(http://placecage.com/600/200) no-repeat;
      background-size: cover;
      padding: 10px;
      position: relative;
      display: flex;
  }
  picture {
      margin: auto
  }

<figure class="item">
  <picture>
     <source srcset="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-128.png" media="(min-width:768px)" />
     <source srcset="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/137/f-check_256-128.png" media="(min-width:450px)" />
     <img src="http://placecage.com/300/300" alt="imagem de fundo do banner" />    
  </picture>
</figure>

Here is a practical example. https://codepen.io/olivier-c/pen/QNYRPG

I recommend reading this answer Mobile First: Show image only on desktop

And the W3C Git documentation: http://w3c.github.io/html/semantics-embedded-content.html#element-attrdef-img-srcset