Перед началом
Работайте с копией исходника. Для фотографии 4000 × 3000 px, которая будет показана шириной 800 CSS-пикселей, подготовьте варианты 800 и 1600 px. Второй пригодится для экрана с повышенной плотностью; он не обязан загружаться всем посетителям.
Текстовое объяснение схемы
4000 × 3000 → 1600 × 1200 → 800 × 600. Уменьшение 4000 × 3000 до 1600 × 1200 сокращает число пикселей с 12 млн до 1,92 млн — на 84%. Размер файла при этом не обязан уменьшиться ровно на 84%: он зависит от содержания и кодирования.
Как сделать
- Откройте Image → Image Size. Включите связь сторон и Resample, если меняете количество пикселей. Введите ширину 1600 px: при пропорции 4:3 высота станет 1200 px.
- Сохраните рабочий файл отдельно, затем экспортируйте копию для сайта. Начните с JPEG или WebP для фотографии. Сравнивайте несколько уровней качества при масштабе 100%, особенно волосы, буквы и тонкие линии.
- Откройте экспортированный файл заново. Сверьте размеры, цвет, резкость и фактический вес. Подключите варианты через srcset и задайте width/height, чтобы браузер зарезервировал место.
<img src="photo-800.jpg" srcset="photo-800.jpg 800w, photo-1600.jpg 1600w" sizes="(max-width: 800px) 100vw, 800px" width="1600" height="1200" alt="Описание фотографии">Разберём пример
Уменьшение 4000 × 3000 до 1600 × 1200 сокращает число пикселей с 12 млн до 1,92 млн — на 84%. Размер файла при этом не обязан уменьшиться ровно на 84%: он зависит от содержания и кодирования.
Проверьте результат
Проверьте страницу на узком экране и на дисплее высокой плотности. В Network посмотрите, какой файл действительно выбрал браузер. Не оценивайте качество только по миниатюре в редакторе.
Где легко ошибиться
Изменение 300 ppi на 72 ppi без пересчёта пикселей не делает веб-картинку меньше. PPI описывает связь с печатным размером; для браузера сначала важны пиксельные размеры.
Источники и продолжение
Схема и примеры: редакция Web Article. Схема объясняет принцип и не является снимком интерфейса или результатом испытания программы.