paint-brush
Como obter os carregamentos de imagem do navegador mais rápidospor@bobnoxious
382 leituras
382 leituras

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

por Bob Wright3m2023/01/30
Read on Terminal Reader

Muito longo; Para ler

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 arquivos. 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.
featured image - Como obter os carregamentos de imagem do navegador mais rápidos
Bob Wright HackerNoon profile picture

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.

Exemplo de elemento de imagem


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.

Exemplo de elemento de imagem de exibição de depuração do Chrome


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.


Chrome Debug da seleção da lista de fontes


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


elemento img final


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