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
.
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.
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.
Para evitar que isso aconteça, use a propriedade object-fit
.
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;
}
Se o corte nas partes superior e inferior uniformemente for um problema, use a propriedade CSS object-position para ajustar o foco do corte.
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;
}
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"
>
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.
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.
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
contain
e cover
.image-fit
fit-image
aspect-ratio
Colocar height
e width
nas imagens impede que o CSS possa estilizá-las de maneira diferente.
O atributo srcset
não _______ o atributo src
, mas o _______.
srcset
definitivamente não substitui o atributo src
.A ausência do alt
em uma imagem é igual a um alt
vazio.
alt
vazio informa a um leitor de tela que essa imagem é de apresentaçãoalt
não sinaliza nada para um leitor de tela.