What is the best way to work with responsive images?

Question

What is the best way to work with responsive images?

Asked 6 years, 10 months ago

Viewed 236 times

-1

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.

In the subject "responsiveness" bootstrap is champion. You’ve heard?

– Jorge.M

2018/02/20 at 18:57
It depends on your project, for example srcset is not 100% compatible with all browsers: https://caniuse.com/#search=srcset. I would go for media-queries.

– Felipe Coelho

2018/02/20 at 19:03
Jorge please explain to me how Bootstrap treats image size?? Do you think that image-Fluid is enough already?

– hugocsl

2018/02/20 at 19:53
I agree that bootstrap is the first tool to think about responsiveness, but when working with image and important to have at least 2 versions of it for mobile and other for pc (in fact I usually see it being work with 4 versions of the same photo)And that’s the focus of my question

– Juliano Silveira

2018/02/21 at 19:39

1 answer

Browser other questions tagged html5 media-queries img picture

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-02-20T19:59:57+00:00

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