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

Почему оптимизация изображений улучшает работу сайта

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

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

Рекомендуемый пошаговый поток

  1. Определите максимальную ширину, с которой изображение будет отображаться в дизайне.
  2. Обрежьте кадр перед сжатием, чтобы не сохранялись области, которые будут удалены.
  3. Выберите формат в зависимости от содержания и необходимости прозрачности.
  4. Откройте файл в компрессор изображений и тестирует средне-высокое качество.
  5. Сравните вес и проверьте текст, границы, лица и градиенты.
  6. Опубликуйте результат и проверьте страницу на мобильном и десктопном компьютере.

Размеры: избегайте загрузки большего количества пикселей, чем необходимо

Если на карточке отображается изображение шириной 600 пикселей, загрузка фотографии в 5000 пикселей обычно пустая трата. Браузер визуально уменьшит её, но сначала придётся скачать весь файл. Подготовьте версию, близкую к максимальному размеру, требуемому дизайном.

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

Какой формат выбрать

  • JPG: хорошая совместимость и разумный размер для фотографий без прозрачности.
  • WebP: полезны для фотографий и веб-графики; Он поддерживает прозрачность и предоставляет компактные файлы.
  • PNG: подходит для прозрачности, скриншотов с четким текстом и простых графиков; может быть тяжелым для фотографий.
  • SVG: Идеально для логотипов и векторных значков, когда файл безопасен, а дизайн создан как вектор.

Конвертация формата не гарантирует меньший размер файла. Всегда сравнивайте результат и сохраняйте исходный формат, если он является наиболее эффективным. Ознакомьтесь с Сравнение между JPG, PNG и WebP если не знаете, какой выбрать.

Как выбрать качество сжатия

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

Оцени файл на странице, а не только в увеличенном виде. Небольшая разница, заметная при 300 %, может быть незаметна в обычном размере; однако нечитаемый текст на карточке действительно является реальной проблемой.

Сжатие не заменяет правильную реализацию

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

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

Распространенные ошибки

Сжимайте, прежде чем выбирать размер

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

Конвертировать скриншоты в JPG с низким качеством

Тонкие линии и буквы могут создавать пятна. Попробуйте PNG или WebP с более высоким качеством и сравните размер.

Используйте небольшое изображение в качестве заголовка

Увеличение не восстанавливает детали. Начинайте с достаточно большого источника и создавайте меньшие варианты из этой версии.

Часто задаваемые вопросы

Сколько должен весить веб-изображение?

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

Стоит ли конвертировать все изображения в WebP?

Не обязательно. WebP полезен, но простой PNG или уже оптимизированный файл может не улучшить результат. Конвертируйте образец, измерьте и сохраняйте оригиналы.

Сжимает ли изображения само по себе улучшение позиции?

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

Подготовьте более светлый образ

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

Сжать изображение для Интернета