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.
-
No assunto "responsividade" o bootstrap é campeão. Já ouviu falar?– Jorge.MCommented 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.– Felipe CoelhoCommented 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?– hugocslCommented 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– Juliano SilveiraCommented 21/02/2018 às 19:39
1 Resposta
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.
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
-
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– hugocslCommented 13/03/2018 às 11:14