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

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

• Фотографии (товары, люди, места): формат с потерями. AVIF даёт наименьший размер, WebP служит надёжным современным вариантом по умолчанию, а JPG является резервным форматом, который отображает любой браузер.
• Логотипы, значки и иллюстрации: SVG. Это векторная графика, поэтому она остаётся чёткой при любом размере на любом экране, а файл обычно получается совсем небольшим. Используйте растровый формат как резервный вариант только тогда, когда платформа не принимает SVG.
• Снимки экрана, графика UI и любые изображения с прозрачностью: PNG или WebP без потерь. Однотонные области и резкие края – именно то, что форматы без потерь сжимают особенно хорошо.
• Короткие анимации: анимированный WebP или AVIF вместо GIF, который ограничен небольшой палитрой и создаёт намного более крупные файлы.
• Фавикон: файл ICO, желательно вместе с версией SVG или PNG; см. как создать фавикон из изображения.

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

При выборе формата для фотографий всё зависит от того, насколько вы можете рассчитывать на новые браузеры:

• AVIF сжимает лучше всего: при обычном веб-качестве файл получается примерно на 50% меньше JPEG и на 20–30% меньше WebP, при необходимости также поддерживая HDR и широкий цветовой охват. Chrome, Firefox и Safari отображают этот формат (Safari – начиная с версии 16.4, выпущенной в 2023 году). Недостатки – медленное кодирование, особенно крупных изображений, и слабая поддержка в настольных программах и старых устройствах.
• WebP – практичный вариант по умолчанию: он на 25–35% меньше JPEG при том же визуальном качестве, поддерживает прозрачность и работает во всех популярных браузерах с 2020 года. Некоторые настольные приложения и старые инструменты всё ещё не могут его открыть, что важно для файла, передаваемого дизайнеру, но не для изображения, показываемого посетителям.
• JPG – универсальный резервный вариант. Это наименее эффективный из трёх форматов, но JPG, сохранённый с качеством около 75–82, обычно неотличим от оригинала на экране, и любое веб-устройство сможет его показать.

Самая надёжная схема предоставляет AVIF браузерам, которые его понимают, WebP – остальным, а JPG сохраняет для всего более старого. Если вы предпочитаете выбрать один формат, WebP с резервным JPG охватит практически всех. Подробные сравнения приведены в материалах WebP и AVIF и WebP и JPG; о графике, а не фотографиях, читайте в материале PNG и JPG.

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

1. Откройте конвертер и перетащите в него изображения: один файл или целую папку. Пакеты обрабатываются вместе.
2. Выберите выходной формат: WebP или AVIF для фотографий, PNG для графики, которой нужна прозрачность. Для распространённых задач доступны прямые инструменты: JPG в WebP, PNG в WebP, JPG в AVIF и PNG в AVIF.
3. Настройте качество. Поля для целевого размера нет: размер является результатом обработки. Для каждого файла показан размер до и после, поэтому перемещайте ползунок, пока вас не устроят и число, и изображение.
4. Скачайте результаты по отдельности или одним архивом ZIP.

Ничего не загружается: после открытия страницы можно отключиться от интернета и продолжить конвертацию. Метаданные EXIF и GPS удаляются из каждого экспортированного изображения, поэтому фотография товара не раскрывает место съёмки. Сервис бесплатный, не требует учётной записи и не добавляет водяных знаков. Уже используете нужный формат и хотите лишь уменьшить файл? Сразу откройте компрессор изображений. А если платформа требует растровую версию векторного логотипа, инструмент SVG в PNG создаст её в любом выбранном размере.

Правильный выбор формата полезен, но три привычки позволяют сэкономить больше байтов, чем когда-либо даст переход с JPG на AVIF:

• Уменьшайте изображение до фактически отображаемого размера. Фотография с камеры во много раз шире области, которую она занимает на странице, а каждый лишний пиксель загружается и затем отбрасывается. Именно для этого в инструментах EditItAll предусмотрено необязательное ограничение максимального размера.
• Сжимайте один раз, используя оригинал. При каждом сохранении с потерями исчезает ещё немного деталей. Храните оригинал, создавайте веб-копию из него и не пересохраняйте последовательно JPG как WebP, а затем как AVIF.
• Предоставляйте современные форматы с резервным вариантом. Сначала предлагайте AVIF или WebP, а старым браузерам позволяйте использовать JPG или PNG, чтобы ни один посетитель не увидел повреждённое изображение.

Если отчёт о скорости рекомендует «эффективно кодировать изображения» или «использовать форматы изображений нового поколения», речь идёт именно об этом решении: материал об устранении предупреждения о неэффективном кодировании изображений объясняет весь процесс, а материал о сжатии JPEG для интернета подробно описывает настройку качества. Другие руководства по форматам находятся в разделе конвертации изображений.