Imagens responsivas

O texto na Web se ajusta automaticamente à borda da tela para não estourar. É diferente com imagens. As imagens têm um tamanho intrínseco. Se uma imagem for mais larga que a tela, ela estourar, fazendo com que uma barra de rolagem horizontal seja exibida.

Felizmente, é possível tomar medidas no CSS para impedir que isso aconteça.

Restringir suas imagens

Na folha de estilo, você pode declarar que as imagens nunca devem ser renderizadas em um tamanho maior que o elemento que as contém usando max-inline-size.

Compatibilidade com navegadores

  • 57
  • 79
  • 41
  • 12.1

Origem

img {
  max-inline-size: 100%;
  block-size: auto;
}

A mesma regra também pode ser aplicada a outros tipos de conteúdo incorporado, como vídeos e iframes.

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

Com essa regra em vigor, os navegadores reduzirão automaticamente as imagens para que caibam na tela.

Duas capturas de tela. A primeira mostra uma imagem se expandindo além da largura do navegador. A segunda mostra a mesma imagem restrita dentro da janela de visualização do navegador.

Adicionar um valor block-size de auto significa que a proporção das imagens vai permanecer constante.

Às vezes, as dimensões de uma imagem podem estar fora de controle se uma imagem for adicionada por um sistema de gerenciamento de conteúdo, por exemplo. Caso seu design exija que as imagens tenham uma proporção diferente das dimensões reais da imagem, use a propriedade aspect-ratio no CSS.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

No entanto, o navegador pode comprimir ou esticar a imagem para ajustá-la à proporção desejada.

Perfil de um cachorro lindo e feliz com uma bola na boca, mas a imagem está amassada.

Para evitar que isso aconteça, use a propriedade object-fit.

Compatibilidade com navegadores

  • 32
  • 79
  • 36
  • 10

Origem

Um valor object-fit de contain instrui o navegador a preservar a proporção da imagem, mesmo que isso signifique deixar um espaço vazio acima e abaixo.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

Um valor object-fit de cover instrui o navegador a preservar a proporção da imagem, mesmo que isso signifique cortar a imagem nas partes de cima e de baixo.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}
Perfil de um cachorro lindo e feliz com uma bola na boca. Há espaço extra em ambos os lados da imagem. Perfil de um cachorro lindo e feliz com uma bola na boca. A imagem foi cortada nas partes superior e inferior.
A mesma imagem com dois valores diferentes para "object-fit" é aplicada. O primeiro tem um valor "object-fit" de "contain". O segundo tem um valor "object-fit" de "cover".

Se o corte nas partes superior e inferior uniformemente for um problema, use a propriedade CSS object-position para ajustar o foco do corte.

Compatibilidade com navegadores

  • 32
  • 79
  • 36
  • 10

Origem

Você pode garantir que o conteúdo da imagem mais importante ainda esteja visível.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

Perfil de um cão lindo e feliz com uma bola na boca. A imagem foi cortada apenas na parte inferior.

Envie suas imagens

Essas regras de CSS informam ao navegador como você quer que as imagens sejam renderizadas. Você também pode fornecer dicas em seu HTML sobre como o navegador deve lidar com essas imagens.

Dicas de tamanho

Se você souber as dimensões da imagem, inclua os atributos width e height. Mesmo que a imagem seja renderizada em um tamanho diferente (por causa da regra max-inline-size: 100%), o navegador ainda vai saber a proporção largura/altura e reservar a quantidade certa de espaço. Isso vai fazer com que o outro conteúdo não apareça quando a imagem for carregada.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>
O primeiro vídeo mostra um layout sem dimensões de imagem definidas. Observe como o texto salta quando as imagens são carregadas. No segundo vídeo, as dimensões da imagem foram fornecidas, e há espaço para a imagem, de modo que, quando ela for carregada, o texto não salte.

Carregando dicas

Use o atributo loading para informar ao navegador se deve atrasar o carregamento da imagem até que ela esteja na janela de visualização ou perto dela. Para imagens abaixo da dobra, use um valor de lazy. O navegador não carregará imagens lentas até que o usuário role a tela o suficiente para baixo de modo que a imagem esteja prestes a ser visualizada. Se o usuário nunca rolar a tela, a imagem nunca será carregada.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

Para uma imagem principal acima da dobra, não use loading. Caso seu site aplique o atributo loading="lazy" de forma automática, muitas vezes será possível definir o atributo eager, que é o padrão, para evitar que isso aconteça:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

Prioridade da busca

Para imagens importantes, como a imagem LCP, você pode priorizar ainda mais o carregamento usando a opção Buscar prioridade definindo o atributo fetchpriority como high:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

Isso diz ao navegador para buscar a imagem imediatamente, e em alta prioridade, em vez de esperar até que o navegador tenha concluído o layout quando as imagens são normalmente buscadas.

Mas lembre-se: quando você pede para o navegador priorizar o download de um recurso (como uma imagem), ele precisa diminuir a prioridade de outro recurso, como um script ou um arquivo de fonte. Só defina fetchpriority="high" em uma imagem se ela for realmente importante.

Dicas de pré-carregamento

Algumas imagens podem não estar disponíveis no HTML inicial se forem adicionadas por JavaScript ou como uma imagem de plano de fundo no CSS. Você também pode usar o pré-carregamento para permitir que essas imagens importantes sejam buscadas com antecedência. Isso pode ser combinado com o atributo fetchpriority para imagens muito importantes:

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

Novamente, isso deve ser usado com moderação para evitar a substituição excessiva da heurística de priorização dos navegadores, o que pode reduzir a performance.

O pré-carregamento de imagens responsivas com base no srcset (discutido abaixo) usando os atributos imagesrcset e imagesizes é mais avançado e tem suporte em alguns navegadores, mas não em todos:

Ao excluir o substituto href, você garante que os navegadores sem suporte não pré-carreguem a imagem incorreta.

No momento, o pré-carregamento com base em diferentes formatos de imagem de acordo com o suporte do navegador não é compatível e pode resultar em downloads extras.

O ideal é evitar o pré-carregamento sempre que possível e disponibilizar a imagem no HTML inicial, evitar a repetição de códigos e permitir o acesso a todas as opções compatíveis com o navegador.

Decodificação de imagens

Também há um atributo decoding que pode ser adicionado a elementos img. Você pode informar ao navegador que a imagem pode ser decodificada de forma assíncrona. Assim, o navegador pode priorizar o processamento de outros conteúdos.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
>

Você pode usar o valor sync se a própria imagem for o conteúdo mais importante a ser priorizado.

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 decoding="sync"
>

O atributo decoding não muda a velocidade de decodificação da imagem, mas apenas se o navegador espera que essa decodificação da imagem aconteça antes de renderizar outro conteúdo.

Na maioria dos casos, isso terá pouco impacto. No entanto, em alguns cenários, é possível que a imagem ou o conteúdo apareça um pouco mais rápido. Por exemplo, para um documento grande com muitos elementos que levam tempo para renderizar e com imagens grandes que levam um tempo para decodificar, definir sync em imagens importantes vai instruir o navegador a esperar a imagem e renderizar ambas de uma vez. Como alternativa, definir async pode permitir que o conteúdo seja mostrado mais rapidamente sem esperar a decodificação da imagem.

No entanto, a melhor opção é tentar evitar tamanhos excessivos de DOM e garantir que imagens responsivas sejam usadas para reduzir o tempo de decodificação, o que significa que o atributo de decodificação terá pouco efeito.

Imagens responsivas com o srcset

Graças a essa declaração max-inline-size: 100%, as imagens nunca saem dos contêineres. No entanto, mesmo que pareça bom ter uma imagem grande que seja reduzida para caber, não será uma boa ideia. Se alguém usar um dispositivo de tela pequena em uma rede de baixa largura de banda, vai fazer o download de imagens desnecessariamente grandes.

Se você criar várias versões da mesma imagem em tamanhos diferentes, poderá usar o atributo srcset para informar isso ao navegador.

Descritor de largura

É possível transmitir uma lista de valores separados por vírgulas. Cada valor deve ser o URL de uma imagem seguido por um espaço seguido de alguns metadados sobre a imagem. Esse metadado é chamado de descritor.

Neste exemplo, os metadados descrevem a largura de cada imagem usando a unidade w. Um w é um pixel.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

O atributo srcset não substitui o atributo src. Em vez disso, o atributo srcset complementa o src. Você ainda precisa ter um atributo src válido, mas agora o navegador pode substituir o valor dele por uma das opções listadas no atributo srcset.

O navegador não fará o download de imagens maiores, a menos que elas sejam necessárias. Isso economiza largura de banda.

Tamanhos

Se você estiver usando o descritor de largura, também será necessário usar o atributo sizes para fornecer mais informações ao navegador. Isso informa ao navegador o tamanho que você espera que a imagem seja exibida em diferentes condições. Essas condições são especificadas em uma consulta de mídia.

O atributo sizes usa uma lista separada por vírgulas de consultas de mídia e larguras de imagem.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

Neste exemplo, você informa ao navegador que, acima da largura da janela de visualização de 66em, a imagem precisa ser mostrada no máximo um terço da tela (dentro de um layout de três colunas, por exemplo).

Para larguras da janela de visualização entre 44em e 66em, mostre a imagem na metade da tela (um layout de duas colunas).

Para qualquer item abaixo de 44em, mostre a imagem na largura total da tela.

Isso significa que a maior imagem não será necessariamente usada na tela mais larga. Uma janela do navegador ampla que pode exibir um layout de várias colunas usará uma imagem que cabe em uma coluna. Essa imagem pode ser menor do que uma imagem usada para um layout de coluna única em uma tela mais estreita.

Descritor de densidade de pixels

Há outra situação em que é recomendável fornecer várias versões da mesma imagem.

Alguns dispositivos têm telas de alta densidade. Em uma tela de dupla densidade, é possível reunir dois pixels de informações em um espaço de um pixel. Isso mantém as imagens nítidas nessas telas.

Duas versões da mesma imagem de um cachorrinho lindo com uma bola na boca, uma nítida e outra felpuda.

Use o descritor de densidade para descrever a densidade de pixels da imagem em relação à imagem no atributo src. O descritor de densidade é um número seguido pela letra x: 1x, 2x etc.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

Se small-image.png tiver 300 x 200 pixels e medium-image.png 600 x 400 pixels, medium-image.png poderá ter 2x depois dela na lista srcset.

Não é necessário usar números inteiros. Se outra versão da imagem tiver 450 x 300 pixels, você poderá descrevê-la com 1.5x.

Imagens de apresentação

As imagens em HTML são conteúdo. É por isso que você sempre fornece um atributo alt com uma descrição da imagem para leitores de tela e mecanismos de pesquisa.

Se você incorporar uma imagem que é puramente um destaque visual, sem conteúdo significativo, use um atributo alt vazio.

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

Você ainda precisa incluir o atributo alt. Um atributo alt ausente não é igual a um atributo alt vazio. Um atributo alt vazio informa a um leitor de tela que essa imagem é de apresentação.

Idealmente, suas imagens de apresentação ou decorativas não devem estar em seu HTML. HTML é para estrutura. O CSS serve para a apresentação.

Imagens de plano de fundo

Use a propriedade background-image no CSS para carregar imagens de apresentação.

element {
  background-image: url(flourish.png);
}

É possível especificar várias imagens candidatas usando a função image-set para background-image.

A função image-set no CSS funciona de maneira muito parecida com o atributo srcset no HTML. Forneça uma lista de imagens com um descritor de densidade de pixels para cada uma.

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

O navegador escolherá a imagem mais adequada para a densidade de pixels do dispositivo.

Há muitos fatores a serem considerados ao adicionar imagens ao seu site:

reservar o espaço certo para cada imagem; Descobrir de quantos tamanhos você precisa. Decidir se a imagem é de conteúdo ou decorativa.

Vale a pena gastar o tempo para acertar as imagens. Estratégias insatisfatórias de imagem são responsáveis pela frustração e irritação dos usuários. Uma boa estratégia de imagem faz com que o site pareça ágil e nítido, independentemente do dispositivo ou da conexão de rede do usuário.

Há mais um elemento HTML no kit de ferramentas para ajudar você a ter mais controle sobre suas imagens: o elemento picture.

Teste seu conhecimento

Teste seu conhecimento sobre imagens

É preciso adicionar estilos para que as imagens se encaixem na janela de visualização.

Verdadeiro
Imagens sem contenção serão tão grandes quanto seu tamanho natural.
Falso
Os estilos são obrigatórios.

Quando a altura e a largura de uma imagem são forçadas a usar uma proporção não natural, quais estilos podem ajudar a ajustar a imagem nessas proporções?

object-fit
Especifique como a imagem se ajusta a palavras-chave como contain e cover.
image-fit
Eu inventei essa propriedade não existe.
fit-image
Eu inventei essa propriedade não existe.
aspect-ratio
Isso pode causar ou resolver uma proporção de imagem artificial.

Colocar height e width nas imagens impede que o CSS possa estilizá-las de maneira diferente.

Verdadeiro
Pense neles mais como dicas do que regras.
Falso
O CSS tem uma grande quantidade de opções dinâmicas para dimensionar imagens, mesmo que a altura e a largura estejam inline na tag.

O atributo srcset não _______ o atributo src, mas o _______.

complementar, substituir
srcset definitivamente não substitui o atributo src.
substituir, complementa
Ele também oferece opções adicionais para o navegador, se possível.

A ausência do alt em uma imagem é igual a um alt vazio.

Verdadeiro
Um atributo alt vazio informa a um leitor de tela que essa imagem é de apresentação
Falso
A falta de alt não sinaliza nada para um leitor de tela.