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

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

Muito longo; Para ler

Making security fun one episode at a time

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

Muito longo; Para ler

Bob Wright

About Author

Rótulos

Languages

ESTE ARTIGO FOI APRESENTADO EM...

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

Muito longo; Para ler

Bob Wright

About Author

Rótulos

Languages

ESTE ARTIGO FOI APRESENTADO EM...

HISTÓRIAS RELACIONADAS