Какой формат изображения следует использовать?

JPEG

JPEG делит изображение на блоки и отбрасывает мелкие детали, которые ваш глаз вряд ли заметит. Это очень хорошо работает на фотографиях, где детали неровные и шумные, и плохо на фотографиях с резкими краями, где именно отброшенные детали определяют край.

С потерями при любых настройках качества, включая самые высокие. Здесь нет опции JPEG без потерь. Он не может хранить прозрачность: изображение с прозрачными областями заполняется сплошным цветом, когда оно становится JPEG.

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

PNG

PNG без потерь. Он сохраняет именно те пиксели, которые ему были предоставлены, поэтому никогда не создает артефактов и поддерживает полную альфа-прозрачность. Его сжатие использует повторение, поэтому оно чрезвычайно эффективно для ровных цветов и резких краев и неэффективно для фотографического шума.

Фотография, сохраненная как PNG, обычно в несколько раз больше той же фотографии, что и JPEG, без видимых преимуществ. Это самая распространенная ошибка формата изображения, и ее стоит проверить, прежде чем винить в медленной работе страницы что-либо еще.

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

WebP

WebP обычно является самым маленьким из трех форматов с сопоставимым визуальным качеством и поддерживает прозрачность, что делает его единственным форматом, охватывающим оба задания.

Здесь важно сделать одно предостережение: ваш браузер кодирует WebP в режиме с потерями даже с качеством 100. Формат определяет режим без потерь, но холст API, используемый этим инструментом, не предоставляет его. Таким образом, экспорт WebP с этого сайта является экспортом с потерями, и он описывается именно так, а не называется без потерь, поскольку формат в принципе поддерживает его.

Поддержка браузерами отображения WebP теперь практически универсальна. Поддержка кодирования не столь единообразна, поэтому браузер, который не может закодировать WebP, сообщает об ошибке, а не спокойно передает вам другой формат.

AVIF и HEIC — честная позиция

AVIF сжимает лучше, чем все три вышеуказанных формата, часто существенно. HEIC — это то, что современные iPhone используют для фотографий по умолчанию. Ни один из них не может быть прочитан преобразователем изображений ToolAcre, и это скорее ограничение браузера, чем выбор.

Браузеры обычно могут DISPLAY AVIF, но они не предоставляют надежный способ декодирования произвольных файлов AVIF или HEIC для обработки, а декодирование HEIC, в частности, зависит от кодека платформы, который присутствует не везде. Инструмент, который принимает эти файлы, будет работать на некоторых машинах и сбивать с толку на других, поэтому вместо этого они явно отклоняются.

Практический результат: преобразовать HEIC в JPEG на устройстве, которое его создало (каждый современный телефон и обе основные настольные операционные системы могут это сделать), а затем использовать инструменты браузера на JPEG. Для AVIF сохраните мастер-файл JPEG или PNG и сгенерируйте AVIF в качестве выходных данных во время публикации с помощью инструмента сборки.

Примечание к GIF

GIF ограничен 256 цветами на кадр и является плохим выбором для чего-либо, кроме коротких анимаций. Конвертер изображений читает GIF, но использует только первый кадр и не предлагает GIF в качестве вывода — создание неподвижного изображения с расширением .gif скорее вводит в заблуждение, чем помогает.

Для короткой анимации современные ответы — это MP4 или видео WebM, либо анимированный WebP. Ничего из этого здесь не производят.

Рабочий пример: четыре ресурса для одной статьи

Для статьи необходима главная фотография, скриншот интерфейса, логотип с прозрачным фоном и диаграмма, экспортированная из электронной таблицы.

• Геройская фотография — JPEG с качеством по умолчанию, размер изменен примерно до двойной ширины экрана. Непрерывный тон, прозрачность не требуется.
• Скриншот интерфейса — PNG. Он полон текста и резких краев, а именно с этим JPEG справляется хуже всего, а PNG эффективно сжимает свои плоские панели.
• Логотип — WebP или PNG. Оба сохраняют прозрачность; WebP будет меньше, PNG будет точным. Для логотипа, который будет размещен на разном фоне, точность стоит больше, чем несколько килобайт.
• Диаграмма — PNG. Причина та же, что и на скриншоте: плоские заливки, тонкие линии и метки осей.

Результат: Четыре файла, три формата, каждый выбран по тому, что на картинке, а не по привычке. Самый распространенный режим сбоя — экспорт всех четырех как PNG или всех четырех как JPEG — либо фотография становится слишком большой в несколько раз, либо снимок экрана и диаграмма заметно размазываются вокруг текста.

Откройте инструмент

Преобразование между JPEG, PNG и WebP

Конвертер изображений определяет, является ли преобразование с потерями, перед его запуском, а затем сообщает реальные измеренные размеры.

Что это не распространяется

• Конвертер изображений ToolAcre считывает JPEG, PNG, WebP и GIF и записывает JPEG, PNG и WebP. HEIC, AVIF, TIFF и камера RAW отклонены.
• Вывод WebP с этого сайта имеет потери, поскольку это то, что предоставляет холст браузера API.
• Цветовые профили не сохраняются при преобразовании холста, поэтому изображения с необычным встроенным профилем могут слегка смещаться.
• Сравнение размеров файлов зависит от изображения. Любое эмпирическое правило здесь является отправной точкой для измерения, а не числом, которое нужно цитировать.