Performance da imagem

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:

1. Compressão com perda
2. Compactação sem perda

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:

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:

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

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.