O uso do   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 Picture Element  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   ,   e   . 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. AVIF WEBP JPG  Esta tela mostra o código Picture Element   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.  <picture>  Dentro do elemento picture há uma lista de elementos de   , cada um dos quais reflete uma possível escolha de uma imagem para o navegador selecionar. O elemento source é um elemento   , 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   , um nome de arquivo de imagem. origem void srcset  Em nosso exemplo, cada elemento de origem também possui dois atributos adicionais. Um atributo é rotulado como   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   . O segundo atributo é rotulado como   e seu conteúdo representa o   da imagem   . Se um navegador não oferecer suporte a um determinado tipo MIME, esse item de   será ignorado. Por exemplo, neste momento, o navegador   não oferece suporte ao tipo AVIF MIME e esse navegador simplesmente ignora as opções de arquivo AVIF. mídia srcset type tipo MIME srcset origem Microsoft Edge  A última entrada no conteúdo do elemento picture é um elemento   nominalmente designado como um elemento de fallback se nenhuma das imagens de origem listadas for aceitável. Além do ponteiro do atributo   para o arquivo de imagem, este elemento img tem um atributo   para texto alternativo para a imagem e um atributo   que permite ao usuário navegar facilmente entre as imagens usando a tecla   . img src alt tabindex 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   , conforme mostrado nesta captura de depuração.  this.currentSrc  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   . Fique de olho nos   para ver a base de código do aplicativo que gerou o quadrinho. E você pode encontrar mais quadrinhos na   . Hyenas2 meus repositórios do GitHub minha página de quadrinhos  Como sempre comentários, críticas e sugestões são bem vindas

2022 - HackerNoon Contributor of the Year - Authentication

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Developer

Este áudio é produzido no idioma original da história!

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

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

Toque para ganhar: Telegram pode integrar os próximos 10 bilhões de usuários criptográficos antes de Solana

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

Toque para ganhar: Telegram pode integrar os próximos 10 bilhões de usuários criptográficos antes de Solana

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps