Как отдавать чёткие картинки для Retina-экранов

Короткий ответ

Перечислите в srcset файлы для обычных и плотных экранов — браузер выберет подходящий:

<img src="/media/photo-200x200.jpg"
     srcset="/media/photo-200x200.jpg 1x, /media/photo-400x250.jpg 2x"
     alt="A flower" width="200" height="200" style="object-fit: cover;">

На экране Retina (плотность 2) одна точка CSS — это четыре пикселя экрана, и картинке нужен файл вдвое большего размера, иначе она выглядит размыто. src остаётся запасным вариантом для старых браузеров.

Выбор по ширине

Если картинка тянется по ширине страницы, лучше описать ширину каждого файла дескриптором w, а в sizes — какую ширину картинка займёт на экране:

<img src="/media/photo-400x250.jpg"
     srcset="/media/photo-400x250.jpg 400w, /media/photo-800x500.jpg 800w"
     sizes="(max-width: 600px) 100vw, 400px"
     alt="A flower" width="400" height="250" style="max-width: 100%; height: auto;">

Браузер сам посчитает, какой файл нужен с учётом ширины окна и плотности экрана.

Иконки и логотипы

Для простой графики удобнее SVG: векторная картинка чёткая на любом экране, и несколько файлов не нужны.

Частая ошибка

Указывают w-дескрипторы, но забывают sizes. Тогда браузер считает, что картинка занимает всю ширину окна (100vw), и на широком экране загружает самый большой файл даже для маленького превью.