Atributo srcset pode carregar imagens maiores no mobile do que no desktop

Posso estar errado, mas acho que faz sentido.
Se você olhar o srcset do HTML, as seguintes imagens são servidas com base na proporção de pixels do dispositivo (x1, x1,5, x2).

https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_690x460.jpeg,
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1035x690.jpeg 1.5x,
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1380x920.jpeg 2x

Normalmente, o celular tem uma proporção x2 (ou mais) porque eles têm uma densidade de pixels maior.
Portanto, você vai querer servir imagens com maior resolução.

Proporção de Pixels do Dispositivo

A Proporção de Pixels do Dispositivo (DPR) é um número fornecido pelos fabricantes de dispositivos e é usado para displays HiDPI (High Dots Per Inch) ou Retina (marca registrada da Apple), que fazem parte de smartphones modernos, tablets e até alguns laptops e monitores.
A DPR está em correlação direta com a densidade de pixels do display, quanto maior a densidade, maior o valor da DPR.

A DPR é a razão entre pixels físicos (do dispositivo) e pixels lógicos (CSS) na direção horizontal (largura) ou vertical (altura) de uma tela.
Em outras palavras, a DPR é um número usado para calcular a resolução CSS da tela. A partir da DPR, podemos ver diretamente quantos pixels de hardware reais compõem um pixel CSS.

Exemplo:
Apple iPhone 12
Resolução em pixels do dispositivo (físicos): 1170 x 2532
DPR: 3
Largura: 1170/3 = 390, Altura: 2532/3 = 844
Portanto, resolução em pixels CSS: 390 x 844

Como a DPR é 3, na grade de pixels: 3 (largura) x 3 (altura) = 9; 9 pixels físicos são usados para formar um pixel CSS.

5 curtidas