Retina-оптимизатор для @2x и экранов высокой плотности

Retina и другие экраны высокой плотности помещают два-три физических пикселя в каждый CSS-пиксель. Изображению шириной 600 пикселей на таком экране нужно 1200 пикселей (@2x) или 1800 пикселей (@3x) реальной детализации, чтобы выглядеть чётко; при меньшем числе текст и края становятся мягкими. Однако удвоение размеров учетверяет число пикселей, поэтому изображения высокой плотности нужно сжимать аккуратно, иначе они станут самой медленной частью страницы.

Retina-оптимизатор допускает изображения до 3840 × 2160 пикселей (разрешение 4K-дисплея) и сжимает их с качеством 85. Повышенная настройка важна, потому что детали: главная причина отдавать изображения высокого разрешения. Меньшие изображения по умолчанию не увеличиваются: увеличение не добавляет реальных деталей, поэтому начинайте с исходника не меньше нужного размера @2x.

Как пользоваться: Retina-оптимизатор изображений (@2x, @3x)

1. Перетащите изображения в область загрузки, нажмите на неё, чтобы выбрать файлы, или вставьте картинку через Ctrl+V. Страница принимает файлы JPG, PNG, WebP, GIF и BMP, сразу несколько и до 80 МБ каждый.
2. Рассчитайте целевую ширину: ширина показа × 2 для @2x или × 3 для @3x. Откройте Resize, оставьте Max и введите эту ширину, например 1200 для места в 600 пикселей.
3. В More options задайте имя файла {name}@2x или {name}-{w}w, чтобы у каждой плотности было понятное имя, а затем обработайте те же изображения с шириной @1x, если нужны и стандартные версии.
4. Проверьте результат ползунком «до/после»: перетащите разделитель по превью и посмотрите ниже новые размеры, вес файла, качество и процент экономии. Любое изменение настроек автоматически заново обрабатывает все изображения.
5. Скачайте одно изображение или нажмите Download all (ZIP), чтобы получить весь пакет. В More options можно также задать DPI и шаблон имени файла с {name}, {w} и {h}.

Как правильно использовать изображения высокой плотности

• Отдавайте обе плотности. В HTML перечислите файлы в srcset с дескрипторами 1x и 2x (или ширины), чтобы обычные экраны скачивали меньший файл.
• На @2x сжатие хорошо прячется. На Retina-экране каждый пиксель крошечный, поэтому качество от 75 до 80 часто выглядит идентично; проверьте ползунком «до/после», действительно ли нужно 85.
• Выбирайте современные форматы. WebP или AVIF удерживают крупные файлы @2x в разумных пределах; оптимизатор WebP заранее на это настроен.
• Знайте, когда 2x не нужно. Для телефонов мобильный оптимизатор уже учитывает плотные экраны, а обычные изображения страниц покрывает оптимизатор для сайта.

Если исходник меньше рассчитанного размера @2x, результат просто сохранит размер исходника. В этом случае используйте его только как стандартное изображение или сначала подготовьте исходник крупнее.

Приватно, бесплатно и быстро

Вся работа выполняется в вашем браузере: изображения декодируются, масштабируются и перекодируются на вашем устройстве, поэтому ничего не загружается на сервер. Нет регистрации, водяных знаков и дневных лимитов, а данные о местоположении и камере (EXIF) удаляются из каждого результата.