Como obter os carregamentos de imagem do navegador mais rápidos

O uso do Picture Element permite que o navegador selecione uma única imagem ideal para download e exibição em uma lista que pode ser composta por diferentes tipos e tamanhos de arquivo. O amplo suporte disponível para o elemento de imagem nos permite construir facilmente páginas de exibição de imagens responsivas agnósticas do navegador

O exemplo específico apresentado aqui é uma história em quadrinhos da web que é bastante intensiva em imagens. O exemplo usa o elemento picture para fornecer uma seleção entre três tipos de arquivo populares, sendo eles os formatos de imagem AVIF , WEBP e JPG . Cada um desses tipos de arquivo é apresentado em um intervalo de cinco dimensões, dando ao navegador uma escolha entre quinze imagens separadas. O navegador selecionará a primeira entrada na lista de imagens que satisfaça suas determinações de aceitabilidade.

Esta tela mostra o código Picture Element <picture> para uma das imagens de exemplo de demonstração. Em nossa demonstração, cada elemento de imagem é seguido por um separador de linha em branco, conforme mostrado aqui.

Dentro do elemento picture há uma lista de elementos de origem , cada um dos quais reflete uma possível escolha de uma imagem para o navegador selecionar. O elemento source é um elemento void , ou seja, não possui uma tag de fechamento, não existe uma tag </source>. Em vez disso, o elemento source atua mais para fornecer um link para um recurso identificado pelo conteúdo do atributo srcset , um nome de arquivo de imagem.

Em nosso exemplo, cada elemento de origem também possui dois atributos adicionais. Um atributo é rotulado como mídia e seu conteúdo representa uma consulta de mídia para as dimensões da janela de visualização mais adequadas para a imagem especificada do srcset . O segundo atributo é rotulado como type e seu conteúdo representa o tipo MIME da imagem srcset . Se um navegador não oferecer suporte a um determinado tipo MIME, esse item de origem será ignorado. Por exemplo, neste momento, o navegador Microsoft Edge não oferece suporte ao tipo AVIF MIME e esse navegador simplesmente ignora as opções de arquivo AVIF.

A última entrada no conteúdo do elemento picture é um elemento img nominalmente designado como um elemento de fallback se nenhuma das imagens de origem listadas for aceitável. Além do ponteiro do atributo src para o arquivo de imagem, este elemento img tem um atributo alt para texto alternativo para a imagem e um atributo tabindex que permite ao usuário navegar facilmente entre as imagens usando a tecla TAB .

Quanto aos números mágicos que foram escolhidos para tamanhos, inicialmente fiz 3 tamanhos de imagem para pontos de quebra de largura. Isso funcionou bem o suficiente para solicitar a adição de mais dois tamanhos de srcset e um reajuste dos pontos de interrupção e tamanhos para obter mais granularidade. Esses valores são baseados nas opções de ponto de interrupção do Bootstrap.

• nomes de ponto de interrupção X- Pequeno Pequeno Médio Grande X- Grande XX- Grande
• pontos de interrupção <576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
• recipiente 100% 540px 720px 960px 1140px 1320px
• tamanhos de imagem 576px 768px 992px 1200px 1400px

Mas a tela de depuração do Chrome do HTML carregado mostra algumas diferenças entre o código-fonte do elemento img mostrado acima e o que o navegador obtém, mostrado aqui.

Quando o navegador varre a lista de fontes e seleciona uma que considera melhor, ele atribuirá esse valor srcset à variável this.currentSrc , conforme mostrado nesta captura de depuração.

Observe que esta imagem é a que o navegador escolheu da lista oferecida, é a que o navegador acha melhor. Dado que a imagem tem uma dimensão fixa para cobrir uma variedade de tamanhos de viewport, é provável que a imagem não seja um ajuste perfeito e alguns ajustes possam ser benéficos. A demonstração de exemplo usa JavaScript para dimensionar a imagem escolhida pelo navegador para as dimensões da viewport e esses valores, que são as dimensões da imagem dimensionadas para as dimensões da viewport, são salvos conforme mostrado aqui. Existem alguns outros usos que obtemos do JavaScript

Neste computador desktop, o Chrome Debugger diz que a demonstração em quadrinhos, 42 imagens, consome 2,5 MB de recursos com 56 solicitações e 2,1 MB transferidos e termina em 1,22 s. Você pode ver a história em quadrinhos de demonstração em Hyenas2 . Fique de olho nos meus repositórios do GitHub para ver a base de código do aplicativo que gerou o quadrinho. E você pode encontrar mais quadrinhos na minha página de quadrinhos .

Como sempre comentários, críticas e sugestões são bem vindas