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

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

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

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

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps