Uma imagem responsiva é uma imagem que se adapta a diferentes características do dispositivo. Quando muito feitas, as imagens responsivas podem melhorar o desempenho e a experiência do usuário de um site.
Nascente item explora porquê você pode fabricar imagens responsivas em HTML usando srcset e o elemento de imagem.
Por que você deve usar imagens responsivas?
Quando os engenheiros de software estavam criando a web, eles não consideraram porquê os navegadores lidariam com imagens responsivas. Finalmente, os usuários só acessavam a web de desktops ou laptops. Evidente, isso não é verdade hoje.
De conciliação com a Statista, mais de 90% da população global da Internet acessa a Internet usando seu telefone celular. A maioria das páginas da web na internet contém imagens e essas imagens são uma das métricas usadas para medir o desempenho da web. Para melhorar o desempenho, você precisa otimizar suas imagens tornando-as responsivas.
Uma vez que fabricar imagens responsivas em HTML
Você pode abordar imagens responsivas de dois ângulos: veiculando a mesma imagem com tamanhos diferentes ou veiculando imagens diferentes de conciliação com as características de exibição. Você poderia usar
Usando srcset
O padrão HTML só permite especificar um registro de imagem. Se você deseja exibir uma imagem dissemelhante dependendo do tamanho do dispositivo, use srcset.
Sintaxe:
<img srcset="" src="" alt="">srcset permite que você forneça arquivos de origem adicionais, e o navegador escolherá a imagem que parece ideal para esse tamanho de imagem.
<img srcset="cute-cat.jpg 480w,
cute-cat.jpg 800w"
src="cute-cat.jpg"
alt="A cute cat">srcset é formado de três partes: O nome do registro de imagem que especifica o caminho para a imagem de origem, um espaço e a largura intrínseca ou real da imagem.
Usando srcset com tamanhos
A questão de usar srcset é que você não tem controle de qual imagem o navegador escolherá para exibir. Combinando srcset com tamanhos resolve nascente problema. tamanhos defina um conjunto de condições de mídia que indiquem a imagem com o tamanho ideal.
Agora você pode reescrever o etiqueta supra da seguinte forma.
<img srcset="cute-cat.jpg 480w,
cute-cat.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="cute-cat.jpg"
alt="A cute cat">tamanhos é formado por uma quesito de mídia, neste exemplo é (max-width: 600px) que representa a largura da janela de visualização, o espaço e a largura do slot (480px) especificando o espaço que a imagem preencherá se a quesito de mídia for verdadeira.
Cá, o navegador primeiro verificará a largura do dispositivo e a comparará com a quesito da mídia. Se a quesito for verdadeira, ele verificará a largura do slot e carregará uma imagem de srcset com a mesma largura ou o próximo maior.
Observe que você também está incluindo src que fornece a imagem para recorrer a navegadores que não suportam srcset e tamanhos.
srcset também lhe permite para servir imagens em diferentes resoluções usando descritores x.
<img srcset="cute-cat-high.jpg,
cute-cat-high1.jpg 1.5x,
cute-cat-high2.jpg 2x"
src="cute-cat-low.jpg"
alt="A cute cat">Neste exemplo, se o dispositivo tiver uma solução de dois pixels de dispositivo por CSS ou mais, o navegador carregará a imagem cute-cat-high1.jpg.
Pixels de hardware e software
O problema com esta solução é que as imagens são responsivas somente em termos de densidade de pixels do dispositivo. Esta é a proporção dos pixels de hardware para os pixels de software ou CSS. Um pixel de hardware é o ponto de luz real na tela, enquanto o pixel de software ou pixel CSS é uma unidade de medida. A densidade de pixels determina a solução do dispositivo.
Ao renderizar imagens responsivas, não considere somente a solução; o tamanho da tela também é importante. Caso contrário, você pode completar carregando desnecessariamente imagens grandes ou imagens muito pixelizadas.
<img srcset="cute-cat-high1-480w.jpg 1.5x,
cute-cat-high2-640w.jpg 2x"
src="cute-cat-low.jpg"
alt="A cute cat">Usando
elemento. Enquanto
torna as imagens responsivas ao servir diferentes tamanhos da mesma imagem,
Sintaxe:
<picture>
<source media="" srcset="">
<source media="" srcset="">
<img src="" alt="">
</picture>Considere uma situação em que você tem uma grande imagem de paisagem. A imagem é exibida e parece proporcional em um desktop, mas diminui significativamente em dispositivos móveis, de modo que os elementos da imagem se tornam minúsculos. A imagem não responsiva contribui para uma experiência ruim do usuário. Com
<picture>
<source media="(max-width: 639px)" srcset="cute-cat-480w.jpg">
<source media="(min-width: 640px)" srcset="cute-cat-640w.jpg">
<img src="elva-640w.jpg" alt="A cute cat">
</picture>Uma vez que na primeira abordagem,
Fallback para o formato de imagem WebP
Outra coisa que
<picture>
<source type="image/webp" srcset="cute-cat.webp">
<img src="cute-cat.jpg" alt="A cute cat.">
</picture>Por que fabricar imagens responsivas em HTML e não em CSS?
CSS oferece opções robustas para mourejar com imagens responsivas. Logo por que não usá-lo? O navegador pré-carrega as imagens antes de estudar o CSS. Portanto, antes que o JavaScript do seu site detecte a largura da janela de visualização para fazer as alterações apropriadas nas imagens, as imagens originais já foram pré-carregadas. Devido a isso, é melhor mourejar com imagens responsivas usando HTML.
Indicar para a melhor qualidade de imagem provável
Você viu porquê pode fabricar imagens responsivas em HTML usando
Leia a seguir
Sobre o responsável
