Imagens reponsivas — adaptando elementos visuais em diferentes telas de forma otimizada

Precisamos tratar imagens em diferentes dispositivos e para isto temos várias ferramentas e opções.
Foto por Héctor Martínez on Unsplash

Tratar imagens responsivas é um dos maiores desafios quando o assunto é design responsivo em um projeto web e mobile. Temos diferentes soluções para adaptar imagens ao tamanho da tela e muitas vezes é necessário combinar diversas formas para se obter as imagens no layout adequado e tendo uma perfomance otimizada. Vou apresentar aqui as soluções para termos imagens adaptadas de acordo com diferentes variações de dispositivo, e também ferramentas para tratamento e as formas de exibição, com considerações sobre a perfomance.

A renderização de imagens em sites responsivos é um dos aspectos que devemos lidar para carregar o site corretamente em qualquer dispositivo

Sobre perfomance

Esse é um dos aspectos mais importantes quando utilizamos qualquer uma das soluções para redimensionar imagens. Isto por que quando redimensionamos imagens para se adaptar ao tamanho de tela, o tamanho da imagem, tanto em bytes, quanto tem resolução, pode permanecer inalterado e podemos neste caso carregar uma imagem de 5 MB em um celular, o que não seria viável, visto que a conexão do usuário que esteja consumindo o seu site pode ser bem inferior, além de ter que pagar pelo consumo de banda para renderizar algo que é muito maior do que deveria. Sendo assim…