Por que você usaria um atributo 'srcset' em uma tag de imagem?

Você usaria o atributo srcset quando desejar fornecer imagens diferentes aos usuários, dependendo da largura da tela de seus dispositivos - fornecer imagens de alta qualidade para dispositivos com tela Retina melhora a experiência do usuário, enquanto fornecer imagens de resolução mais baixa para dispositivos de baixo desempenho aumenta o desempenho e diminui o desperdício de dados (pois fornecer uma imagem maior não terá nenhuma diferença visível). Por exemplo: <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt=""> diz ao navegador para exibir o gráfico pequeno, médio ou grande .jpg dependendo da resolução do cliente. O primeiro valor é o nome da imagem e o segundo é a largura da imagem em pixels. Para uma largura de dispositivo de 320px, são feitos os seguintes cálculos:

• 500 / 320 = 1.5625
• 1000 / 320 = 3.125
• 2000 / 320 = 6.25

Se a resolução do cliente for 1x, a 1.5625 é a mais próxima e a opção 500w correspondente a small.jpg será selecionada pelo navegador.

Se a resolução for retina (2x), o navegador usará a resolução mais próxima acima do mínimo. Isso significa que ele não escolherá o 500w (1.5625) porque é maior que 1 e a imagem pode ficar ruim. O navegador escolheria a imagem com uma taxa resultante mais próxima de 2, que é 1000w (3.125).

srcsets resolvem o problema de você querer fornecer arquivos de imagem menores para dispositivos de tela estreita, já que eles não precisam de imagens grandes como as telas de desktop - e também opcionalmente que você deseja fornecer imagens de resolução diferente para telas de alta densidade/baixa densidade.