Выберите формат для своей задачи
| Формат | С чего начать | На что обратить внимание |
|---|---|---|
| AVIF | Фотографии и детализированные веб-изображения, когда нужен компактный файл для публикации. | Кодирование может быть медленным. Убедитесь, что нужное приложение, платформа или рабочий процесс поддерживает AVIF. |
| WebP | Фотографии для веба, изображения товаров и материалы, которым нужна прозрачность. | Мелкий текст и резкие края могут требовать более высокого качества или версии без потерь. |
| PNG | Скриншоты, схемы, логотипы, пиксельная и прозрачная графика. | Большие фотографии могут оставаться очень объёмными. Сокращение палитры может изменить цвета. |
| JPEG | Фотографии для задач, где нужен привычный и широко поддерживаемый формат. | Прозрачности нет. Повторное кодирование с потерями может накапливать видимые искажения. |
Это отправные точки, а не рейтинг. Прозрачной иконке и фотографии на весь экран могут подходить разные форматы, даже если они находятся на одной странице. Если у места публикации есть собственные требования к загрузке, в первую очередь учитывайте их.
Сначала выберите нужные размеры
Количество пикселей сильно влияет на размер файла. Фотография шириной 6000 пикселей обычно не нужна для небольшой карточки на сайте. Уменьшите её до планируемого размера отображения с учётом плотности пикселей экранов, которые вы хотите поддерживать.
Например, для изображения шириной 800 CSS-пикселей можно использовать исходник шириной 1600 пикселей для экрана 2×. Это пример расчёта, а не универсальное требование: подходящий выбор также зависит от адаптивной вёрстки, кадрирования и доступной пропускной способности сети.
Затем настройте качество
В форматах с потерями настройка качества определяет, сколько информации может отбросить кодировщик. Значения качества зависят от кодека: «80» в JPEG не означает того же визуального качества, что «80» в WebP или AVIF.
- Начните со сбалансированной настройки и проверьте результат в предполагаемом размере отображения.
- Установите масштаб 100% и сравните важные области: лица, градиенты, текст, мелкие текстуры и края.
- Понижайте качество небольшими шагами, пока не заметите значимое изменение, затем немного повысьте его.
- Сохраните версию с наименьшим размером файла, которая удовлетворяет вашим требованиям к качеству.
Смотрите на результат, а не только на процент
Большого уменьшения легко добиться, если исходник слишком велик или неэффективно закодирован. Сам по себе процент не доказывает, что кодировщик лучше. Сравнивайте результаты с одинаковыми размерами, прозрачностью и видимым качеством.
PNG: сжатие без потерь и сокращение палитры
PNG сжимает закодированные пиксельные данные без потерь. Но инструмент может изменить эти данные до кодирования. Сокращение палитры объединяет похожие цвета, что позволяет уменьшить файл и одновременно может изменить изображение.
Строгое сжатие без потерь сохраняет декодированные пиксели, меняя только способ их хранения. Сокращение палитры может быть полезно для простой графики, но плавные градиенты, мягкие тени и полупрозрачные края требуют внимательной проверки. Дизеринг скрывает ступени цвета с помощью мелкого узора, но может добавить шум на однотонных участках.
Если необходимо сохранить точные значения пикселей, выбирайте обработку без потерь и проверяйте результат соответствующим образом. Само название формата не гарантирует, что всё преобразование выполнено без потерь.
Внимательно работайте с прозрачностью
PNG, WebP и AVIF поддерживают альфа-канал. JPEG — нет. При преобразовании прозрачного изображения в JPEG используйте фон, подходящий месту публикации. Иначе вырезанное изображение, логотип или тень могут получить нежелательный фон или обводку.
Проверяйте прозрачные края и на светлом, и на тёмном фоне. Результат, хорошо выглядящий на белом, может показывать светлый ореол на тёмной странице.
AVIF: маленькие файлы могут требовать больше работы
AVIF предлагает полезные возможности сжатия, но кодирование может требовать значительных усилий. Усилие кодировщика и визуальное качество — разные настройки: более высокое усилие даёт кодировщику больше времени на поиск эффективного представления изображения.
Попробуйте AVIF для фотографии, которая будет использоваться много раз. Для быстрой обработки партии на телефоне удобнее начать с WebP или JPEG. Фиксированное время обработки обещать нельзя: важны размеры и содержимое изображения, настройки и производительность устройства.
Учитывайте оригиналы, метаданные и цвет
Повторное кодирование может удалить EXIF, геолокацию и другие метаданные. Сохраняйте оригинал, если эти сведения важны. Декодирование и кодирование в браузере также могут влиять на цветовые профили, данные расширенного динамического диапазона и метаданные ориентации. Проверяйте материалы, требующие точной передачи цвета, там, где они будут использоваться.
Повторное редактирование уже сжатого файла с потерями может снизить качество. По возможности создавайте каждую версию для публикации из оригинала.
Если партия обрабатывается медленно или с ошибкой
Декодированное изображение занимает больше памяти, чем сжатый файл. Изображению 6000 × 4000 нужно около 96 МБ на один 8-битный буфер пикселей RGBA; декодирование, изменение размеров и кодирование могут одновременно требовать нескольких буферов.
Если вкладка замедлилась, попробуйте обрабатывать меньше файлов за раз, уменьшить размеры или выбрать более быстрый выходной формат. Повреждённый файл, неподдерживаемая разновидность изображения или нехватка памяти также могут помешать обработке. Сохраните нужные результаты перед закрытием или обновлением страницы.
Готовы уменьшить изображения?
Выберите изображения и создайте более лёгкие версии прямо в браузере.