Explicação detalhada do elemento picture em HTML5 e processamento responsivo de imagens

O chamado design responsivo significa que o layout da página da web pode ser ajustado de forma adaptativa em dispositivos terminais com diferentes resoluções de tela, diferentes taxas de densidade de pixels e diferentes larguras. A intenção original do design responsivo é tornar o site original do PC compatível com terminais móveis. A maioria das páginas da web responsivas são implementadas por meio de consultas de mídia e carregamento de arquivos CSS de diferentes estilos. Esse tipo de layout flexível torna o layout do site mais razoável em diferentes terminais de dispositivos.

Embora o design responsivo tenha muitos benefícios, ele também apresenta muitas desvantagens. Como o PC e o terminal móvel acessam o mesmo site, o PC não precisa se preocupar com o limite de tráfego, mas o terminal móvel não pode ignorá-lo.

Para nos adaptarmos à largura da tela e à densidade de pixels de diferentes modelos de terminal, geralmente usamos o seguinte método para definir o estilo CSS da imagem:

 <estilo> img{largura máxima:100%;altura:auto }</estilo>

Defina a largura máxima da imagem como 100% para garantir que a imagem não exceda a largura do elemento pai. Se a largura do elemento pai mudar, a largura da imagem também mudará a altura: auto pode garantir que o. largura da imagem for alterada, a altura da imagem será dimensionada de acordo com sua própria proporção entre largura e altura.

Desta forma, quando acessamos as imagens da página responsiva em um dispositivo móvel, apenas dimensionamos a resolução da imagem e baixamos a imagem grande no PC. Isso não só desperdiça tráfego e largura de banda, mas também torna a página mais lenta. A velocidade de abertura afeta seriamente a experiência do usuário.

1. <picture> é um novo elemento do HTML5;
2. Se o elemento <picture> cooperar com os elementos <audio> e <video> atuais, ele aprimorará o processo de trabalho de imagem responsivo. Ele permitirá que várias tags <source> sejam definidas dentro dele para especificar diferentes condições de carregamento de arquivos de imagem. ;
3. <picture> pode carregar imagens diferentes de acordo com diferentes condições. Essas condições podem ser a altura atual da janela (viewport), largura (largura), direção (orientação), densidade de pixels (dpr), etc.;

Na castanha a seguir, imagens diferentes são carregadas para diferentes larguras de tela; minpic.png é carregado quando a largura da página está entre 320px e 640px; middle.png é carregado quando a largura da página é maior que 640px;

 <imagem> <mídia de origem=(largura mínima: 320px) e (largura máxima: 640px) srcset=img/minpic.png> <mídia de origem=(largura mínima: 640px) srcset=img/middle.png> < img src=img/picture.png <source media=(largura mínima: 320px) e (largura máxima: 640px) e (orientação: paisagem) srcset=img/minpic_landscape.png> <source media=(largura mínima: 320px) e (largura máxima: 640px) e (orientação: retrato) srcset=img/ minpic_portrait.png> <mídia de origem=(largura mínima: 640px) e (orientação: paisagem) srcset=img/middlepic_landscape.png> <mídia de origem=(largura mínima: 640px) e (orientação: retrato) srcset=img/middlepic_portrait.png> <img src=img/picture.png <mídia de origem =(largura mínima: 320px) e (largura máxima: 640px) srcset=img/minpic.png,img/minpic_retina.png 2x> <mídia de origem=(largura mínima: 640px) srcset=img/middle.png,img/middle_retina.png 2x> <img src=img/picture.png ,img/picture_retina.png 2x <source type=image/webp srcset=img/picture.webp> <img src=img/picture.png tamanhos=90vw srcset=picture-160.png 160w, picture-320.png 320w, picture-640.png 640w, picture-1280.png 1280w>

6. Adicione o atributo tamanhos no exemplo a seguir e carregue a versão correspondente da imagem quando a largura da janela for maior ou igual a 800px;

 <mídia de origem=(largura mínima: 800px) tamanhos=90vw srcset=picture-landscape-640.png 640w, picture-landscape-1280.png 1280w, picture-landscape-2560.png 2560w><img src=picture-160 Tamanhos .png=90vw srcset=imagem-160.png 160w, imagem-320.png 320w, imagem-640.png 640w, imagem-1280.png 1280w>

compatibilidade:

Atualmente, apenas Chrome, Firefox e Opera têm boa compatibilidade com ele. A compatibilidade específica é mostrada na figura:

1. Carregue arquivos de imagem de tamanho adequado para que a largura de banda disponível seja totalmente utilizada;
2. Carregue imagens cortadas de maneira diferente e com proporções diferentes para acomodar alterações de layout em larguras diferentes;
3. Carregue maior densidade de pixels e exiba imagens de maior resolução;

1. Crie a tag <picture></picture>;
2. Dentro dessas tags crie uma tag <source></ssource> que você deseja usar para executar qualquer recurso;
3. Adicione um atributo de mídia para incluir as características desejadas, como largura (largura máxima, largura mínima), orientação (orientação), etc.;
4. Adicione um atributo srcset, o valor do atributo é o nome do arquivo de imagem correspondente e carregue-o. Se desejar fornecer densidades de pixels diferentes, como telas Retina, você poderá adicionar nomes de arquivos adicionais ao atributo srcset;
5. Adicione uma tag substituta <img>;

Como pode ser visto no código de exemplo acima, sem introduzir js e bibliotecas de terceiros e sem incluir consultas de mídia em CSS, o elemento <picture> pode declarar imagens responsivas usando apenas HTML;

A tag <picture> em si não possui atributos. A parte mágica é que <picture> é usado como um contêiner para <source>.

O elemento <source>, que é usado para carregar multimídia como vídeo e áudio, foi atualizado para carregar imagens e alguns novos atributos foram adicionados:

Aceita um único caminho de arquivo de imagem (por exemplo: srcset=img/minpic.png).

Ou é um caminho de imagem separado por vírgula descrito pela densidade de pixels (como: srcset=img/minpic.png, img/minpic_retina.png 2x A descrição 1x não é usada por padrão).

Aceita qualquer consulta de mídia validada, como você pode ver no seletor CSS @media (por exemplo, media=(min-width: 320px)).

Ele foi usado no exemplo de sintaxe <picture> anterior.

Receba uma descrição de largura única (por exemplo: tamanhos=100vw) ou uma descrição de largura de consulta de mídia única (por exemplo: tamanhos=(largura mínima: 320px) 100vw).

Ou descrições de largura de consulta de mídia separadas por vírgula (por exemplo: tamanhos = (largura mínima: 320px) 100vw, (largura mínima: 640px) 50vw, calc (33vw - 100px)) O último é usado como padrão.

Aceita tipos MIME suportados (por exemplo: type=image/webp ou type=image/vnd.ms-photo)

O navegador carregará o recurso de imagem exato com base nessas dicas e atributos. De acordo com a ordem da lista de tags. O navegador usará o primeiro elemento <source> apropriado e ignorará as tags <source> subsequentes.

O elemento <img> é usado dentro de <picture> para ser exibido quando o navegador não o suporta ou quando não há tag de origem correspondente. É necessário utilizar a tag <img> dentro de <picture>. Caso esqueça, nenhuma imagem será exibida.

Use <img> para declarar a exibição da imagem padrão. Coloque a tag <img> no final de <picture> e o navegador irá ignorar a declaração <source> antes de encontrar a tag <img>. Esta tag de imagem também exige que você escreva seu atributo alt.

Este artigo baseia-se em muitos outros artigos. Todas as introduções à imagem estão aqui, então vamos tentar agora ~.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.