Uma imagem responsiva é uma imagem que se adapta às diferentes características do dispositivo que a exibe. Quando feitas corretamente, as imagens responsivas podem melhorar o desempenho do site e diferenciar a experiência do usuário.
Este artigo explora como você pode criar imagens HTML responsivas usando srcset e elemento Imagem. Verificar Código em movimento: melhores aplicativos de edição de HTML para Android.
Por que você deve usar imagens responsivas?
Quando um engenheiro de software estava criando páginas da web, ele não pensava em como os navegadores lidam com imagens responsivas. Afinal, os usuários geralmente acessavam a web apenas de computadores desktop ou laptop. Claro, isso não é verdade hoje.
De acordo com Estadista Mais de 90% dos usuários de internet do mundo navegam na web usando seus telefones celulares. A maioria das páginas da web 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 melhorar suas imagens tornando-as responsivas. Verificar Ferramentas de desenvolvimento da Web mais populares que todos os profissionais usam.
Como criar imagens HTML responsivas
Web design responsivo significa não apenas que os layouts podem mudar com base nos atributos do dispositivo em uso, mas também no conteúdo. Por exemplo, em monitores com alta resolução (2x), gráficos de alta resolução também são necessários para garantir o nível de nitidez. Uma imagem com um valor de largura de 50% pode funcionar bem apenas quando o navegador tiver 800px de largura, mas terá um grande impacto em um telefone estreito, e o problema de consumir muita largura de banda ainda existirá quando o tamanho for reduzido para caber em pequenos telas.
Recursos do item img De grande importância; Como ajuda a baixar, decodificar e exibir conteúdo, os navegadores modernos são compatíveis com vários formatos de imagem diferentes. A incorporação de imagens que funcionam em vários dispositivos não é o mesmo que para desktop, e apenas algumas pequenas alterações são necessárias para causar uma boa impressão.
Você pode trabalhar com imagens responsivas de dois ângulos: apresentando a mesma imagem em tamanhos diferentes ou apresentando imagens diferentes de acordo com as características de exibição. você pode usar ou . Essas duas opções lidam com imagens responsivas de maneira diferente, mas todas exibem uma imagem de determinadas alternativas, dependendo do conjunto de regras.
use srcset
O recurso permite que você HTML padrão especificando apenas um arquivo de imagem. Se você quiser exibir uma imagem diferente dependendo do tamanho do dispositivo, você deve usar srcset.
sintaxe:
<img srcset=”” src=”” alt=””>
O recurso permite que você srcset Ao fornecer arquivos de origem adicionais, o navegador escolherá a imagem que parece ideal para o tamanho da tela que está sendo usada.
<img srcset=”cute-cat.jpg 480w, cute-cat.jpg 800w” src=”cute-cat.jpg” alt=”A cute cat”>
Decidir srcset Ele tem três partes: o nome do arquivo de imagem que especifica o caminho para a imagem de origem, a área e a largura intrínseca ou verdadeira da imagem.
Use srcset com tamanhos
O problema está no uso de srcset Em que você não pode controlar qual imagem o navegador escolhe exibir. Combinar srcset e tamanhos resolve esse problema. Os tamanhos são definidos por um conjunto de termos de mídia que indicam que uma imagem é o tamanho ideal.
Agora você pode redigitar a tag acima como segue.
<img srcset=”cute-cat.jpg 480w, cute-cat.jpg 800w” sizes=”(max-width: 600px) 480px, 800px” src=”cute-cat.jpg” alt=”A cute cat”>
Os tamanhos consistem em um estado de mídia, neste exemplo (max-width: 600px) que representa a largura da porta, a área e a largura do slot (480px) com a quantidade de espaço que a imagem preencherá se a mídia estado é verdadeiro.
Aqui, o navegador primeiro verificará a renderização do dispositivo e a comparará com o estado da mídia. Se a condição for verdadeira, ele verificará a largura da abertura e carregará uma imagem de srcset Mesma largura ou a próxima imagem maior.
Observe que você também está incluindo src Que fornece a imagem para referência a navegadores que não suportam srcset e tamanhos.
Permitir você srcset Também apresenta 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 resolução de 1 pixels por CSS ou mais, o navegador carregará a imagem cute-cat-highXNUMX.jpg.
O atributo srcset melhora o comportamento do elemento img, tornando mais fácil fornecer vários arquivos de imagem para diferentes recursos de hardware. Como no conjunto de imagens , a função CSS original, srcset O navegador tem o direito de escolher a melhor imagem com base nos recursos do dispositivo, por exemplo, usando uma imagem 2x em uma tela 2x e, possivelmente, no futuro, uma imagem 1x em um dispositivo 2x ao usar uma rede de largura de banda limitada.
Pixels de hardware e software
O problema dessa solução é que as imagens respondem apenas em termos de densidade de pixels do dispositivo. Esta é a proporção de pixels de hardware para pixels de software ou CSS. Um pixel de hardware é o ponto de luz real na tela, enquanto um pixel de software ou pixel CSS é uma unidade de medida. A densidade de pixels determina a resolução do dispositivo.
Ao renderizar imagens responsivas, não considere apenas a resolução; O tamanho da tela também importa. Caso contrário, você pode acabar enviando imagens grandes ou imagens extremamente pixeladas desnecessariamente.
<img srcset=”cute-cat-high1–480w.jpg 1.5x, cute-cat-high2–640w.jpg 2x” src=”cute-cat-low.jpg” alt=”A cute cat”>
Utilização
Atributo É um elemento HTML que envolve muitos elementos que contém vários arquivos de origem e um elemento . enquanto faz As imagens respondem oferecendo tamanhos diferentes da mesma imagem, permitindo que você realmente alterar a imagem exibida.
sintaxe:
<picture> <source media=”” srcset=””> <source media=”” srcset=””> <img src=”” alt=””> </picture>
Considere uma situação em que você tem uma grande foto de paisagem. A imagem é exibida e parece proporcional na área de trabalho, mas encolhe tanto no celular que os elementos da imagem ficam pequenos. Uma imagem sem resposta contribui para uma experiência ruim do usuário. usando o atributo . , você pode dizer ao seu navegador para alternar para um close-up ao usar um telefone celular.
<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>
Como no primeiro método, o atributo . contém contém um atributo de mídia que você pode usar para fornecer o estado da mídia. Por exemplo, o navegador exibirá “cute-cat-480w.jpg” se a janela de visualização tiver 639 pixels ou menos. manter o atributo srcset O caminho do arquivo de imagem que você deseja exibir é especificado src imagem padrão.
Voltar para WebP. Formato de imagem
A outra coisa com a qual você lida é um recurso Uma coisa boa é fornecer um backup para formatos de imagem modernos como WebP. As imagens WebP têm alto desempenho, geralmente são pequenas e fornecem uma experiência web rápida. Assim, você pode decidir usá-los em seus sites. O desafio que você pode enfrentar é que nem todos os navegadores suportam imagens WebP. com . tema Você não encontrará esse problema, pois seu navegador pode carregar uma imagem alternativa se não suportar WebP.
<picture> <source type=”image/webp” srcset=”cute-cat.webp”> <img src=”cute-cat.jpg” alt=”A cute cat.”> </picture>
Por que você deve criar imagens com crista em HTML e não em CSS?
CSS fornece opções poderosas para lidar com imagens responsivas. Por que você não usa então? O navegador da Web pré-carrega as imagens antes de analisar o CSS. Portanto, antes que o javascript do seu site detecte a janela de visualização para fazer as alterações apropriadas nas imagens, as imagens originais serão pré-carregadas. Por esse motivo, é melhor trabalhar com imagens responsivas com HTML.
Apontar para a melhor qualidade de imagem possível
Você viu como pode criar imagens HTML responsivas com um atributo . و Neste artigo. A entrega de imagens responsivas geralmente envolve considerar o tamanho e a resolução da imagem em relação ao tamanho da tela. Se feito de forma errada, a qualidade da imagem pode ser afetada. Certifique-se de escolher uma imagem que faça o melhor uso do menor número de recursos. Verificar Como abrir e converter imagens HEIC no Android.
