Pelo que eu sei, os navegadores da web exibem imagens a 96 PPI.
E pelo menos no meu Mac, as capturas de tela criadas usando o aplicativo Screen Capture têm 144 PPI.
Então, se eu criei uma captura de tela no meu Mac e quero carregá-la em algum lugar para que as pessoas a vejam no mesmo tamanho que eu vejo no meu Mac, preciso redimensioná-la para 66,6%:
[à parte] Por que 66,6? Aqui estão meus cálculos: (96/144) * 100 = 66,6... Esteja ciente de que não sou nada bom em matemática.
magick original.png -resize 66.6% resize66dot6.png
[à parte] Aqui eu uso o ImageMagick. A maneira mais fácil de instalar o ImageMagick no Mac é
brew install imagemagick
Mas na verdade resize66dot6.png, se aberto em um navegador da web (pelo menos no Safari), é maior do que deveria.
E para que a captura de tela seja exibida nos navegadores no tamanho correto, parece que preciso redimensioná-la para 50% ou algo muito próximo, por algum motivo:
magick original.png -resize 50.0% resize50.png
De cima para baixo: original.png, resize66dot6.png, resize50.pnge o elemento real da UI:
Por que é tão?
"Os navegadores da Web exibem imagens a 96 PPI" na verdade não. Isso é evidente porque você pode encontrar facilmente telas de 1920x1080 px que têm (por exemplo) 15 ou 24 polegadas na diagonal.
Os navegadores exibem 100% do tamanho do pixel, a menos que sejam instruídos, por exemplo, por um estilo ou elemento HTML.
A resposta mais básica é: a retina reside nas dimensões dos pixels. As telas Retina podem estar "configuradas para 1080p" (por exemplo), mas o dispositivo pode realmente estar criando e passando para a tela 1,5 a 4 vezes mais pixels (dependendo da tela). Isso resulta em tipos mais nítidos, etc. nessas telas, mas cria alguma confusão.
Decida as dimensões de pixel que você está almejando e use-as. A página wiki do Retina possui uma tabela completa de tamanhos de pixels para vários produtos Apple. Não é padronizado e muda ano a ano e produto a produto.
No que diz respeito às páginas da Web, os navegadores da Apple que usam "Retina" procuram imagens em seu servidor que correspondam ao nome do arquivo mais @2x anexado. Veja, por exemplo, https://stackoverflow.com/questions/9299807