Categorias
HTML5 Tutoriais

Introdução a imagens responsivas com srcset

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 de nossa aplicação. Mas temos alternativas para reduzir esse impacto, por exemplo, geralmente nossa aplicação web possui diferentes usuários com diferentes tamanhos de tela.

Imagine o seguinte cenário, em 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 em um 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

Com HTML temos algumas alternativas para servir diferentes tamanhos de imagens de acordo com sua resolução de tela.

  • Media queries
  • srcset
  • Tag picture

Srcset

Para esse post iremos trabalhar com a propriedade srcset. Ela permite mais de uma resolução possível das mesma image 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">
Imagem utilizada no exemplo

Agora vamos adicionar 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 vamos alterar 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">

Com o código acima especificamos o tamanho das imagens nesse caso o browser decidirá que imagem ira carregar de acordo com a densidade de pixels e tamanho de tela(janela). No caso das imagens por densidade de pixel definimos o valor que representa a densidade ao no lugar da largura:

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

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 sera proporcional a largura da tela precisamos especificar para o browser qual tamanho de imagem queremos nesse caso iremos fazer a utilização da propriedade size.

Size

Com a propriedade size tomamos o controle e definimos que imagens iremos carregar, 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:

Versão Desktop
versão tablet e mobile

A imagem do header contém o código que virmos anteriormente agora vamos adicionar 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 em uma coluna. O controle sobre a quantidade de colunas vem do css, mas com a tag image vamos garantir o carregamento da imagem correta.

Para o thumb vamos adicionar 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">

No código acima temos dois tamanhos 480px e 960px, na propriedade sizes definimos as medias queries que iremos trabalhar 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">
<h1 class="page-title">Fellyph Cintra</h1>
</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">
<h2 class="title">Post title</h2>
<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">
<h2 class="title">Post title</h2>
<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">
<h2 class="title">Post title</h2>
<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">
<h2 class="title">Post title</h2>
<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">
<h2 class="title">Post title</h2>
<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">
<h2 class="title">Post title</h2>
<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>

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);
}
}

O post serviu como introdução a imagens responsivas temos outros caminhos para trabalhar com imagens responsivas e vamos abordar em mais posts, se quiser conferir mais tutoriais confira a página da categoria tutoriais ou deixe um comentário.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *