As imagens costumam ser o recurso mais pesado e mais comum na Web. Como a otimização das imagens pode melhorar significativamente a performance do seu site. Na maioria dos casos, otimizar imagens significa reduzir o tempo de rede ao enviar menos bytes, mas você também pode otimizar a quantidade de bytes enviados ao usuário ao exibindo imagens com tamanho adequado para o dispositivo do usuário.
É possível adicionar imagens a uma página usando os elementos <img>
ou <picture>
.
a propriedade background-image
do CSS.
Tamanho da imagem
A primeira otimização a ser realizada quando se trata de usar recursos de imagem é para exibir a imagem no tamanho correto. Neste caso, o termo tamanho se refere ao as dimensions de uma imagem. Tendo em vista que não há outras variáveis, uma imagem é exibida em um contêiner de 500 por 500 pixels seria dimensionado de maneira ideal em 500 pixels 500 pixels. Por exemplo, usar uma imagem quadrada de 1.000 pixels significa que a imagem duas vezes maior conforme necessário.
No entanto, há muitas variáveis envolvidas na escolha do tamanho adequado da imagem, tornando a tarefa de escolher o tamanho adequado da imagem em todos os casos ser bastante complicado. Em 2010, quando o iPhone 4 foi lançado, a resolução da tela (640 x 960) era o dobro do do iPhone 3 (320 x 480). No entanto, o tamanho físico da tela do iPhone 4 permaneceu praticamente igual à do iPhone 3.
Mostrar tudo em resolução mais alta deixaria o texto e as imagens significativamente menor, ou seja, metade do tamanho anterior, para ser exato. Em vez disso, 1 pixel se tornou dois pixels de dispositivo. Isso é chamado de proporção de pixels do dispositivo (DPR, na sigla em inglês). A O iPhone 4 e muitos modelos de iPhone lançados depois dele tiveram uma DPR de 2.
Voltando ao exemplo anterior, se o dispositivo tiver um DPR de 2 e a imagem for exibido em um contêiner de 500 por 500 pixels, depois uma imagem quadrada de 1.000 pixels (conhecido como tamanho intrínseco) agora é o tamanho ideal. Da mesma forma, se o dispositivo tiver um DPR de 3, então uma imagem quadrada de 1.500 pixels seria o tamanho ideal.
srcset
O elemento <img>
é compatível com o atributo srcset
, que permite especificar um
lista de possíveis origens de imagem que o navegador pode usar. Cada origem de imagem especificada
precisa incluir o URL da imagem e um descritor de largura ou densidade de pixels.
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>
O snippet em HTML anterior usa o descritor de densidade de pixels para indicar ao navegador
para usar o image-500.png
em dispositivos com DPR de 1, image-1000.jpg
nos dispositivos
com uma DPR de 2 e image-1500.jpg
em dispositivos com uma DPR de 3.
Embora tudo isso pareça furado, a DPR da tela não é a única consideração na escolha da imagem ideal para uma determinada página. O endereço layout é outra consideração.
sizes
A solução anterior só funciona se você exibir a imagem no mesmo pixel de CSS em todas as janelas de visualização. Em muitos casos, o layout de uma página e o código muda de acordo com o dispositivo do usuário.
O atributo sizes
permite especificar um conjunto de tamanhos de origem, em que cada
o tamanho da origem consiste em uma condição de mídia e um valor. O atributo sizes
descreve o tamanho de exibição pretendido da imagem em pixels CSS. Quando combinadas
com descritores de largura srcset
, o navegador pode escolher qual origem da imagem
é melhor para o dispositivo do usuário.
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
No snippet HTML anterior, o atributo srcset
especifica uma lista de objetos
os candidatos que o navegador pode escolher, separados por vírgulas. Cada candidato em
a lista consiste no URL da imagem, seguido por uma sintaxe que indica o
largura intrínseca da imagem. O tamanho intrínseco de uma imagem são as dimensões dela. Para
exemplo, um descritor de 1000w
indica que a largura intrínseca da imagem é
com 1.000 pixels de largura.
Usando essas informações, o navegador avalia a condição de mídia no sizes
e, nesse caso, recebe a instrução de que, se a largura da janela de visualização
exceder 768 pixels, a imagem será exibida com 500 pixels de largura. Em menor
dispositivos, a imagem será exibida em 100vw
ou em toda a largura da janela de visualização.
O navegador pode combinar essas informações com a lista de imagens srcset
fontes para encontrar a imagem ideal. Por exemplo, se o usuário estiver em um dispositivo móvel
dispositivo com uma largura de tela de 320 pixels com um DPR de 3, a imagem é exibida
às 320 CSS pixels x 3 DPR = 960 device pixels
. Neste exemplo, o modelo mais próximo
o tamanho da imagem seria image-1000.jpg
, que tem uma largura intrínseca de 1.000
pixels (1000w
).
Formatos de arquivo
Os navegadores aceitam vários formatos de arquivo de imagem diferentes. Formatos de imagem modernos, como WebP e AVIF podem oferecer uma compactação melhor do que PNG ou JPEG, tornando tamanho de arquivo de imagem menor e, portanto, levar menos tempo para fazer o download. Por veiculação imagens em formatos modernos, é possível reduzir o tempo de carregamento de um recurso, o que pode resultar em uma Maior exibição de conteúdo (LCP) menor.
WebP é um formato com amplo suporte que funciona em todos os navegadores modernos. WebP geralmente tem melhor compactação do que JPEG, PNG ou GIF, oferecendo com perda e compactação sem perdas. O WebP também oferece suporte à transparência do canal Alfa, mesmo quando usando a compressão com perda, um recurso que o codec JPEG não oferece.
O AVIF é um formato de imagem mais recente e, embora não tenha um suporte tão amplo quanto o WebP, tenha um suporte razoável para todos os navegadores. O AVIF suporta dados com perdas e sem perdas, e os testes mostraram uma economia de mais de 50% quando em comparação com JPEG em alguns casos. O AVIF também oferece Gamute de cores ampla (WCG) e Recursos de High Dynamic Range (HDR).
Compactação
No que diz respeito a imagens, existem dois tipos de compactação:
A compressão com perdas funciona reduzindo a precisão da imagem por meio da quantização. e informações de cor adicionais podem ser descartadas usando chroma subamostragem. A compressão com perdas é mais eficaz em imagens de alta densidade com muito ruído e cores, normalmente fotos ou imagens com conteúdos semelhantes. Isso ocorre porque é muito menos provável que os artefatos produzidos pela compactação com perda sejam notados. em imagens tão detalhadas. No entanto, a compressão com perda pode ser menos eficaz com imagens que contenham bordas nítidas, tais como silhueta, detalhes igualmente indefinidos ou em textos. A compressão com perdas pode ser aplicada a imagens JPEG, WebP e AVIF.
A compressão sem perdas reduz o tamanho do arquivo ao compactar uma imagem sem dados e perda de talentos. A compressão sem perdas descreve um pixel com base na diferença do seu pixels vizinhos. A compressão sem perdas é usada para arquivos GIF, PNG, WebP e Formatos de imagem AVIF.
É possível compactar as imagens usando o Squoosh, o ImageOptim ou uma imagem de otimização de custos na nuvem. Ao compactar, não existe uma configuração universal adequada para todos os casos. A abordagem recomendada seria testar diferentes níveis de compactação até encontrar um bom equilíbrio entre a qualidade da imagem tamanho do arquivo. Alguns serviços avançados de otimização de imagens podem fazer isso por você automaticamente, mas pode não ser financeiramente viável para todos os usuários.
O elemento <picture>
O elemento <picture>
oferece maior flexibilidade na especificação de vários
imagens candidatas a imagem:
<picture>
<source type="image/avif" srcset="image.avif">
<source type="image/webp" srcset="image.webp">
<img
alt="An image"
width="500"
height="500"
src="/image.jpg"
>
</picture>
Ao usar elementos <source>
no <picture>
, é possível adicionar
suporte a imagens AVIF e WebP, mas recorrer a imagens legadas mais compatíveis
formatos se o navegador não for compatível com formatos modernos. Com essa abordagem,
navegador escolhe o primeiro elemento <source>
especificado que corresponde. Se possível,
para renderizar a imagem nesse formato, ele usa essa imagem. Caso contrário, o navegador
vai para o próximo elemento <source>
especificado. No HTML anterior
o formato AVIF tem prioridade sobre o formato WebP, substituindo
o formato JPEG, se AVIF ou WebP não forem compatíveis.
Um elemento <picture>
requer um elemento <img>
aninhado dentro dele. A
Os atributos alt
, width
e height
são definidos no <img>
e usados
seja qual for a <source>
selecionada.
O elemento <source>
também oferece suporte aos media
, srcset
e sizes
atributos. Assim como no exemplo de <img>
anterior, eles indicam
navegador qual imagem selecionar em diferentes janelas de visualização.
<picture>
<source
media="(min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
O atributo media
assume uma condição de mídia. No exemplo anterior, o
a DPR do dispositivo é usada como a condição de mídia. Qualquer dispositivo com um DPR maior que
ou igual a 1,5 usaria o primeiro elemento <source>
. O elemento <source>
informa ao navegador que, em dispositivos com uma janela de visualização mais larga do que 768 pixels, a
a imagem candidata selecionada será exibida com largura de 500 pixels. Em dispositivos menores,
isso ocupa toda a largura da janela de visualização. Ao combinar media
e srcset
você pode ter um controle mais preciso sobre qual imagem usar.
Isso é ilustrado na tabela a seguir, em que várias larguras e larguras de as proporções de pixels do dispositivo são avaliadas:
Largura da janela de visualização (pixels) | 1 DPR | 1.5 DPR | 2 DPR | 3 DPR |
---|---|---|---|---|
320 | 500.jpg | 500.jpg | 500.jpg | 1000.jpg |
480 | 500.jpg | 500.jpg | 1000.jpg | 1500.jpg |
560 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
1.920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
Os dispositivos com uma DPR de 1 fazem o download da imagem image-500.jpg
, incluindo a maioria
usuários de computadores, que visualizam a imagem em um tamanho externo de 500 pixels de largura. Ativado
por outro lado, os usuários de dispositivos móveis com uma DPR de 3 fazem o download de um
image-1500.jpg
: a mesma imagem usada em dispositivos desktop com uma DPR de 3.
<picture>
<source
media="(min-width: 560px) and (min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<source
media="(max-width: 560px) and (min-resolution: 1.5x)"
srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
Neste exemplo, o elemento <picture>
é ajustado para incluir mais uma
Elemento <source>
para usar imagens diferentes em dispositivos amplos com DPR alta:
Largura da janela de visualização (pixels) | 1 DPR | 1.5 DPR | 2 DPR | 3 DPR |
---|---|---|---|---|
320 | 500.jpg | 500.jpg | 500.jpg | 1000-sm.jpg |
480 | 500.jpg | 500.jpg | 1000-sm.jpg | 1500-sm.jpg |
560 | 500.jpg | 1000-sm.jpg | 1000-sm.jpg | 1500-sm.jpg |
1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
1.920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
Com essa consulta extra, é possível notar que image-1000-sm.jpg
e
image-1500-sm.jpg
são exibidos em janelas de visualização pequenas. Essa informação extra
permite compactar ainda mais as imagens, já que os artefatos de compactação não são altamente
visível nesse tamanho e densidade, sem comprometer a qualidade da imagem
em dispositivos desktop.
Como alternativa, ajustando os atributos srcset
e media
, você pode evitar
exibição de imagens grandes em janelas de visualização pequenas:
<picture>
<source
media="(min-width: 560px)"
srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
>
<source
media="(max-width: 560px)"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
No snippet HTML anterior, os descritores de largura foram removidos a favor
de descritores de proporção de pixel do dispositivo. As imagens exibidas em dispositivos móveis são limitadas
a /image-500.jpg
ou /image-1000.jpg
, mesmo em dispositivos com uma DPR de 3.
Como gerenciar a complexidade
Ao trabalhar com imagens responsivas, você pode se deparar com muitos tipos diferentes variações de tamanho e formatos para cada imagem. No exemplo anterior, as variações para cada tamanho são usados, mas exclua AVIF e WebP. Quantas variantes você deve ter? Como muitos problemas de engenharia, a resposta tende a ser "depende".
Pode ser tentador ter tantas variações para entregar o melhor ajuste, cada variante de imagem adicional tem um custo e faz uso menos eficiente de o cache do navegador. Com apenas uma variante, cada usuário recebe a mesma imagem para que possam ser armazenados em cache com muita eficiência.
Por outro lado, se houver muitas variações, cada variante vai exigir outra entrada no cache. Os custos do servidor podem aumentar e prejudicar o desempenho entrada de cache da variante expirou e a imagem precisa ser recuperada novamente servidor de origem.
Além disso, o tamanho do documento HTML aumenta a cada variação. Você poderia acabar enviando vários kilobytes de HTML para cada imagem.
Disponibilizar imagens com base no cabeçalho da solicitação Accept
O cabeçalho de solicitação HTTP Accept
informa ao servidor qual conteúdo digita a
o navegador do usuário entende. Essas informações podem ser usadas pelo servidor para exibir
o formato de imagem ideal sem adicionar bytes extras às respostas HTML.
if (request.headers.accept) {
if (request.headers.accept.includes('image/avif')) {
return reply.from('image.avif');
} else if (request.headers.accept.includes('image/webp')) {
return reply.from('image.webp');
}
}
return reply.from('image.jpg');
O snippet HTML anterior é uma versão simplificada do código que você pode adicionar ao
back-end de JavaScript do servidor para escolher e veicular o formato de imagem ideal.
Se o cabeçalho Accept
da solicitação incluir image/avif
, a imagem AVIF será
veiculado. Caso contrário, se o cabeçalho Accept
incluir image/webp
, a imagem WebP
é veiculado. Se nenhuma dessas condições for verdadeira, a imagem JPEG
veiculado.
É possível modificar as respostas com base no conteúdo do cabeçalho da solicitação Accept
em quase todos os tipos de servidores da Web. Por exemplo, é possível reescrever solicitações de imagem
em servidores Apache com base no cabeçalho Accept
usando mod_rewrite
.
Esse comportamento é semelhante ao que você encontraria em uma rede de fornecimento de conteúdo de imagens (CDN). CDNs de imagem são soluções excelentes para otimizar imagens e enviar formato ideal com base no dispositivo e navegador do usuário.
A chave é encontrar um equilíbrio, gerar um número razoável de candidatos de imagem e medir o impacto na experiência do usuário. Diferentes imagens podem oferecer resultados diferentes, e as otimizações aplicadas a cada imagem dependem das na página e nos dispositivos que os usuários utilizam. Por exemplo, uma imagem principal de largura total pode exigir mais variantes do que imagens em miniatura em um página de informações do produto de e-commerce.
Carregamento lento
É possível solicitar ao navegador o carregamento lento de imagens quando elas aparecem na
janela de visualização usando o atributo loading
. Um valor de atributo de lazy
informa ao
navegador para não fazer download da imagem até que ela esteja na janela de visualização (ou perto dela). Isso
economiza largura de banda, permitindo que o navegador priorize os recursos necessários para
renderizar o conteúdo essencial que já está na janela de visualização.
decoding
O atributo decoding
informa ao navegador como ele precisa decodificar a imagem. Um
o valor de async
informa ao navegador que a imagem pode ser decodificada de forma assíncrona.
possivelmente melhorando o tempo de renderização de outros conteúdos. O valor sync
indica
navegador de que a imagem deve ser apresentada ao mesmo tempo que outro conteúdo.
O valor padrão de auto
permite que o navegador decida o que é melhor para o
usuário.
Demonstrações de imagens
Teste seus conhecimentos
Quais formatos de imagem oferecem suporte à compactação sem perdas?
Quais formatos de imagem oferecem suporte à compactação com perda?
O que o descritor de largura (por exemplo, 1000w
) informa?
o navegador sobre um candidato de imagem especificado em um srcset
?
O que o atributo sizes
informa ao navegador sobre uma
<img>
elemento ao qual ele foi aplicado?
srcset
do elemento <img>
precisa ser carregado.
de acordo com as dimensões da janela de visualização atual do usuário.
srcset
do elemento <img>
.
A seguir: desempenho do vídeo
As imagens podem ser o tipo de mídia mais prevalente usado na Web, mas elas são é o único que você precisa ter em mente quando se trata de desempenho. Vídeo é outro tipo comum de mídia usado na Web e vem com seus próprios considerações sobre desempenho. No próximo módulo deste curso, você conhecerá alguns técnicas sobre como otimizar vídeos e como carregá-los de forma eficiente.