Ориентируйтесь на задачу
Для фотографии на сайте сначала сравните WebP и JPEG. Для схемы, скриншота или логотипа с точными краями сравните PNG с вариантом без потерь. WebP поддерживает прозрачность и сжатие с потерями или без них; JPEG не сохраняет альфа-канал. Однако конкретный конвертер может поддерживать не все возможности формата. До экспериментов сохраните неизменённый оригинал.
Сначала размеры, затем качество
Изображению, показанному с шириной 800 пикселей, редко нужен экспорт шириной 6000 пикселей для того же места. Определите размер отображения и необходимую резкость на экранах высокой плотности, затем измените размеры с сохранением пропорций. Кадрирование меняет композицию, масштабирование — размеры. Для увеличения товара подготовьте отдельное крупное изображение. Не растягивайте маленькую миниатюру до основной фотографии.
Сравнивайте при реальном размере
Попробуйте среднее качество, оцените экспорт в предполагаемом размере и сравните фактические объёмы файлов. Рассмотрите буквы, волосы, мелкую фактуру ткани и плавные градиенты: на них быстро видны дефекты сжатия. Значение качества 80 не означает одинаковый результат у разных кодировщиков. Не обещайте фиксированного процента уменьшения: эффективный файл может почти не уменьшиться или даже вырасти.
Проверьте прозрачность, ориентацию и анимацию
Прозрачной графике нужен формат, сохраняющий альфа-канал. Для JPEG осознанно выбирайте фон, чтобы не получить неожиданные чёрные края. Повторно откройте файл и проверьте ориентацию и цвета. Конвертер статичных изображений может оставить один кадр анимации; при экспорте могут удаляться метаданные. Сохраняйте оригинал, если эти свойства важны.
Используйте повторяемый процесс
Подготовьте кадрирование, один раз измените размеры, экспортируйте два формата и выберите меньший файл с приемлемым качеством. Дайте понятное имя и добавьте альтернативный текст, описывающий назначение изображения. Проверьте готовую страницу на телефоне и компьютере. Это редакционная рекомендация, а не тест конкретного кодировщика: важен результат, который получают посетители.
developers.google.com · developer.mozilla.org