-1

Estou em duvida no meu projeto qual a melhor forma de trabalhar com imagens responsivas DIRETO NO HTML, no html5 a tag possui o atributo srcset que permite essa mudança utilizando o prefixo "w" ao selecionar a tela, mas em algumas pesquisas que realizei dizem que a tag permitira maior facilidade nesse trabalho árduo já que ele permite utilizar as propiás medias query que se popularizou tanto no css e queria saber a opinião da comunidade sobre o assunto. E se existe alguma outra forma de realizar a responsividade das imagens de outra forma sem prejudicar o desempenho do site.

4
  • No assunto "responsividade" o bootstrap é campeão. Já ouviu falar?
    – Jorge.M
    Commented 20/02/2018 às 18:57
  • Depende do seu projeto, pois por exemplo o srcset não é 100% compatível com todos os browsers: caniuse.com/#search=srcset. Eu optaria por media-queries. Commented 20/02/2018 às 19:03
  • Jorge por favor me explica como que o Bootstrap trata o tamanho da imagem?? Vc acha que image-fluid já é suficiente?
    – hugocsl
    Commented 20/02/2018 às 19:53
  • Concordo que o bootstrap e a primeira ferramenta a se pensar em caso de responsividade, mas quando se trabalha com imagem e importante ter no minimo 2 versões dela uma para mobile e outra para pc (na verdade geralmente vejo sendo trabalho com 4 versões da mesma foto), e esse sim e o foco da minha pergunta Commented 21/02/2018 às 19:39

1 Resposta 1

-2

Eu acredito no srcset com certeza. Primeiro que ele é mais semântico que que uma tag img mais simples, vc pode usar <figcaption> etc.

Depois que pelos teste que fiz ele carrega apenas a imagem pra resolução certa. inserir a descrição da imagem aqui inserir a descrição da imagem aqui

Com isso vc pode manter uma qualidade maior nas imagens e não ficar usando apenas uma imagem "espichada" para qualquer resolução, mudando apenas width e height nos @medias, aqui vc realmente usa uma imagem diferente de forma prática!

Vc pode usar o srcset dessa forma por exemplo:

<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>

Veja aqui um exemplo prático e repare que quando vc exibir o Snippet em "Tela toda" a imagem vai mudar.

.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>

Aqui tem um exemplo prático. https://codepen.io/olivier-c/pen/QNYRPG

Recomendo a leitura dessa resposta Mobile First: Aparecer imagem somente no desktop

E da documentação no Git da W3C: http://w3c.github.io/html/semantics-embedded-content.html#element-attrdef-img-srcset

1
  • Amiguinhos do "Down Vote" fiquem a vontade para dar uma resposta melhor! A comunidade serve para isso, para acrescentar algo aos demais. Aqui é um espaço aberto para você também contribuir! Eu ficaria feliz em saber o que posso melhorar na minha resposta ou o que está errado nela. []´s
    – hugocsl
    Commented 13/03/2018 às 11:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .