Imagens são responsáveis pela maior parte do carregamento de bytes de uma aplicação web em geral. Não podemos evitar-las, pois imagens são um ponto crucial da nossa aplicação. Mas temos alternativas para reduzir esse impacto com imagens responsivas.
O que são imagens responsivas?
Imagine o seguinte cenário, no seu website você possui uma imagem de apresentação do seu produto com 1600 pixels, na versão desktop não temos nenhum problema, mas o usuário num dispositivo móvel carrega essa mesma imagem numa tela de 340px. Porque então não servimos diferentes tamanhos de imagens para diferentes tamanhos de tela?
Imagens responsivas é uma parte do design responsivo que pode resolver essa questão. Com elas podemos prover diferentes tamanhos de imagens para tamanhos de telas específicos também conseguimos fazer direção de arte disponibilizando recortes específicos da mesma imagem.
Criando imagens responsivas HTML
Com HTML temos algumas alternativas para deixar uma imagem responsiva e servir diferentes tamanhos de imagens de acordo com a sua resolução de tela.
- Media queries
- srcset
- Tag picture
- imagem responsiva css(propriedade image-set)
Srcset
Para esse post iremos trabalhar com a propriedade srcset. Ela permite mais de uma resolução possível das mesma imagem separadas por vírgula, cada valor dessa lista representa um caso possível ela pode ser atrelada a uma condicional definida pela propriedade sizes.
Vamos usar como exemplo uma tag img tradicional para os nossos testes:
<img src="/imgs/amp-workshop-dublin-1024w.jpg" alt="AMP Workshop Dublin">
Code language: HTML, XML (xml)
Agora adicionemos os diferentes tamanhos para a imagem:
- amp-workshop-dublin-640w.jpg
- amp-workshop-dublin-960w.jpg
- amp-workshop-dublin-1024w.jpg
Agora que temos os tamanhos definidos alteraremos a nossa img tag:
<img srcset="./imgs/amp-workshop-dublin-640w.jpg 640w,
./imgs/amp-workshop-dublin-960w.jpg 960w,
./imgs/amp-workshop-dublin-1024w.jpg 1024w"
src="/imgs/amp-workshop-dublin-1024w.jpg"
alt="AMP Workshop">Code language: HTML, XML (xml)Vantagens de usar srcset para imagens responsivas
Experiência do usuário é um ponto importante em qualquer aplicação web, carregando imagens de forma rápida irá melhorar o tempo de carregamento de toda a sua aplicação. Além disso, podemos considerar os seguintes pontos:
- Redução do consumo de dados: O navegador só carrega a imagem necessária, reduzindo o consumo de dados para usuários com planos de dados limitados ou que estão usando a aplicação num dispositivo móvel de baixa conectividade.
- SEO aprimorado: O Google e outros mecanismos de busca reconhecem e valorizam o uso de imagens responsivas, melhora no carregamento de imagens que fazem parte de métricas como LCP, pode melhorar o SEO do seu site.
- Maior flexibilidade: permite oferecer imagens em diferentes resoluções e tamanhos, adaptando-se a diversos dispositivos e layouts.
Como usar srcset para densidade de pixels
Com o código acima especificamos o tamanho das imagens, nesse caso o navegador decidirá que imagem ira carregar conforme a densidade de pixeis e tamanho de tela(janela). No caso das imagens por densidade de píxel definimos o valor que representa a densidade ao no lugar da largura(1x, 2x, 3x):
<img srcset="./imgs/amp-workshop-dublin-640w.jpg 1x,
./imgs/amp-workshop-dublin-1600w.jpg 2x"
src="./imgs/amp-workshop-dublin-640w.jpg"
alt="AMP Workshop">Code language: HTML, XML (xml)Muitas vezes queremos fazer direção de arte, por exemplo, queremos exibir em mobile e table uma imagem com largura cheia e para desktop layout duas colunas. Nesse caso a imagem não será proporcional a largura da tela precisamos especificar para o navegador qual tamanho de imagem queremos, nesse caso faremos a utilização da propriedade size.
Size
Com a propriedade size tomamos o controle e definimos que imagens carregaremos, passando uma media query e o tamanho que identifica a imagem. Vamos colocar tudo junto para isso vamos criar uma página para o exercício:
A imagem do header contém o código que virmos anteriormente, agora adicionemos o código para os thumbnails, quando o usuário estiver no desktop iremos exibir o layout em duas colunas e quando ele estiver no tablet e desktop iremos exibir numa coluna. O controle sobre a quantidade de colunas vem do CSS, mas com a tag image garantiremos o carregamento da imagem correta.
Para a miniatura adicionaremos o seguinte código:
<img srcset="./imgs/thumb-480w.jpg 480w,
./imgs/thumb-960w.jpg 960w"
sizes="(max-width: 480px) 480px,
(max-width: 960px) 960px,
(min-width: 961px) 480px"
src="./imgs/thumb-960w.jpg"
class="thumb-post" alt="post thumb">
Code language: HTML, XML (xml)No código acima temos dois tamanhos 480px e 960px, na propriedade sizes definimos as medias queries que trabalharemos nesse caso mobile(480px max), tablet(960px max), desktop(961px em diante).
O código completa fica da seguinte forma:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive images</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<header>
<img srcset="./imgs/amp-workshop-dublin-640w.jpg 640w,
./imgs/amp-workshop-dublin-960w.jpg 960w,
./imgs/amp-workshop-dublin-1024w.jpg 1024w,
./imgs/amp-workshop-dublin-1600w.jpg 1600w"
src="/imgs/amp-workshop-dublin-1024w.jpg"
alt="AMP Workshop">
<h3 class="page-title">Fellyph Cintra</h3>
</header>
<div class="posts">
<article class="post">
<img
srcset="./imgs/thumb-480w.jpg 480w,
./imgs/thumb-640w.jpg 640w,
./imgs/thumb-960w.jpg 960w"
sizes="(max-width: 480px) 480px,
(max-width: 640px) 640px,
(max-width: 960px) 960px,
(min-width: 961px) 480px"
src="./imgs/thumb-960w.jpg"
class="thumb-post" alt="post thumb">
<div class="content">
<h5 class="title">Post title</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum, soluta earum dolorem magnam eos porro, aliquam ex temporibus tempore dolor suscipit quibusdam sint impedit eveniet non placeat dicta nesciunt.</p>
</div>
</article>
<article class="post">
<img
srcset="./imgs/thumb-480w.jpg 480w,
./imgs/thumb-640w.jpg 640w,
./imgs/thumb-960w.jpg 960w"
sizes="(max-width: 480px) 480px,
(max-width: 640px) 640px,
(max-width: 960px) 960px,
(min-width: 961px) 480px"
src="./imgs/thumb-960w.jpg"
class="thumb-post" alt="post thumb">
<div class="content">
<h5 class="title">Post title</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum, soluta earum dolorem magnam eos porro, aliquam ex temporibus tempore dolor suscipit quibusdam sint impedit eveniet non placeat dicta nesciunt.</p>
</div>
</article>
<article class="post">
<img
srcset="./imgs/thumb-480w.jpg 480w,
./imgs/thumb-640w.jpg 640w,
./imgs/thumb-960w.jpg 960w"
sizes="(max-width: 480px) 480px,
(max-width: 640px) 640px,
(max-width: 960px) 960px,
(min-width: 961px) 480px"
src="./imgs/thumb-960w.jpg"
class="thumb-post" alt="post thumb">
<div class="content">
<h5 class="title">Post title</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum, soluta earum dolorem magnam eos porro, aliquam ex temporibus tempore dolor suscipit quibusdam sint impedit eveniet non placeat dicta nesciunt.</p>
</div>
</article>
<article class="post">
<img
srcset="./imgs/thumb-480w.jpg 480w,
./imgs/thumb-640w.jpg 640w,
./imgs/thumb-960w.jpg 960w"
sizes="(max-width: 480px) 480px,
(max-width: 640px) 640px,
(max-width: 960px) 960px,
(min-width: 961px) 480px"
src="./imgs/thumb-960w.jpg"
class="thumb-post" alt="post thumb">
<div class="content">
<h5 class="title">Post title</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum, soluta earum dolorem magnam eos porro, aliquam ex temporibus tempore dolor suscipit quibusdam sint impedit eveniet non placeat dicta nesciunt.</p>
</div>
</article>
<article class="post">
<img
srcset="./imgs/thumb-480w.jpg 480w,
./imgs/thumb-640w.jpg 640w,
./imgs/thumb-960w.jpg 960w"
sizes="(max-width: 480px) 480px,
(max-width: 640px) 640px,
(max-width: 960px) 960px,
(min-width: 961px) 480px"
src="./imgs/thumb-960w.jpg"
class="thumb-post" alt="post thumb">
<div class="content">
<h5 class="title">Post title</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum, soluta earum dolorem magnam eos porro, aliquam ex temporibus tempore dolor suscipit quibusdam sint impedit eveniet non placeat dicta nesciunt.</p>
</div>
</article>
<article class="post">
<img
srcset="./imgs/thumb-480w.jpg 480w,
./imgs/thumb-640w.jpg 640w,
./imgs/thumb-960w.jpg 960w"
sizes="(max-width: 480px) 480px,
(max-width: 640px) 640px,
(max-width: 960px) 960px,
(min-width: 961px) 480px"
src="./imgs/thumb-960w.jpg"
class="thumb-post" alt="post thumb">
<div class="content">
<h5 class="title">Post title</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum, soluta earum dolorem magnam eos porro, aliquam ex temporibus tempore dolor suscipit quibusdam sint impedit eveniet non placeat dicta nesciunt.</p>
</div>
</article>
</div>
<footer class="footer">
Tutorial by Fellyph
</footer>
</section>
</body>
</html>
Code language: HTML, XML (xml)CSS
.page-title,
.posts,
.footer {
width: 1024px;
margin: 1em auto;
max-width: 100%;
}
.page-title {
text-align: center;
font-size: 3em;
border-bottom: 3px solid black;
padding-bottom: 1em;
}
.posts {
display: flex;
flex-wrap: wrap;
}
.post {
width: 100%;
margin: 1em;
background: white;
display: inline-block;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
border: 1px solid #eee;
box-sizing: border-box;
}
.thumb-post {
max-width:100%;
height: auto;
}
.content {
padding: 1em;
}
.footer {
border-top: 3px solid black;
padding-top: 1em;
text-align: center;
}
@media (min-width: 960px) {
.post {
width: calc(50% - 2em);
}
}
Code language: CSS (css)Como escolher a melhores imagens para srcset?
Considere o tamanho de tela e a resolução do dispositivo, utilize ferramentas como Google Analytics para saber qual é as resoluções mais populares em usa aplicação web. Use formato de imagens modernos para utilizar todo o potencial do seu navegador. E lembre-se de organizar as suas imagens com nomes de forma descritiva para ajudar no seu planejamento das suas imagens responsivas.
Otimização da performance de imagens para srcset
As regras de otimização de performance para imagens responsivas são idênticas às otimizações de imagens convencionais.
- Comprima imagens sem perder a qualidade e legibilidade
- Utilize formatos modernos como AVIF e WebP
- Ative cache nas imagens
- Lazy loading para as imagens fora da primeira dobra
- Utilize dimensões corretas das suas imagens
Conclusão
O post serviu como uma introdução a imagens responsivas, a web se reinventa diariamente e temos outros caminhos para trabalhar com imagens responsivas, se quiser conferir mais tutoriais relacionados a performance confira os seguintes posts:
Deixe um comentário