Оптимизация изображений и видео на сайте: форматы, плагины, Squoosh
ПечатьЕсли сайт открывается медленно, причина часто самая простая: фотографии загружены прямо с телефона, без обработки, или фоновое видео встроено в страницу файлом. Браузер скачивает при каждом визите всё, что есть на странице, и на мобильном интернете несколько десятков мегабайт превращаются в долгое ожидание. Многие посетители просто уходят.
Коротко: обычная страница должна весить в сумме не больше 2-3 МБ, а отдельному изображению редко нужно больше 1600-2000 px в ширину и 200-300 КБ. Несколько картинок удобно обработать в Squoosh прямо в браузере, всю медиатеку поручите плагину (на тарифах WordPress Hosting и Business Hosting он у Вас уже есть: LiteSpeed Cache), а видео размещайте на YouTube или Vimeo, а не на самом сайте.
Сначала выясните, что тяжёлое
- Проверьте страницу в PageSpeed Insights. В рекомендациях будут перечислены слишком большие изображения или файлы в устаревшем формате и сколько можно сэкономить.
- Другой способ: в Chrome или Firefox откройте инструменты разработчика (F12), вкладку Network, обновите страницу и отсортируйте список по размеру. Наверху обычно оказываются несколько картинок или видео.
Ориентиры
| Элемент | Рекомендуемая ширина | Размер файла |
|---|---|---|
| Баннер на всю ширину экрана | 1600-2000 px | до 500 КБ |
| Картинка в статье или фото товара | 800-1200 px | до 200-300 КБ |
| Миниатюра | 300-400 px | - |
| Видео, оставленное на странице | 1280 px | до 2-3 МБ |
| Страница целиком | - | до 2-3 МБ |
Для сравнения: снимок с телефона или фотоаппарата обычно имеет ширину 4000-8000 px и весит 3-10 МБ, то есть в разы больше, чем нужно странице.
Формат и сжатие
- WebP подходит почти для любой картинки. При том же качестве он обычно на 25-35% легче JPG.
- JPG оставьте для фотографий, если WebP использовать нельзя.
- PNG нужен для логотипов и графики с прозрачным фоном. Фотография в PNG может весить в несколько раз больше.
- SVG подходит для векторных логотипов и иконок.
Что касается сжатия, качество 75-80 заметно уменьшает файл, а разницы на глаз не видно.
Какой способ выбрать
| Ваша ситуация | Подходящий способ |
|---|---|
| Готовите баннер или несколько новых фото | Squoosh или программа для фото на компьютере, вручную |
| Действующий сайт с сотнями уже загруженных картинок | Плагин оптимизации в WordPress |
| Десятки новых фото на компьютере, которые нужно выложить сразу | Программа пакетной обработки, например бесплатная XnConvert |
Вручную, до загрузки
В Squoosh
Squoosh – бесплатный инструмент от Google, который работает прямо в браузере. Изображение никуда не отправляется, вся обработка идёт на Вашем компьютере.
- Откройте squoosh.app и перетащите картинку в окно или щёлкните по центру, чтобы выбрать файл.
- В правой панели включите Resize и укажите в поле Width нужную ширину, например 1600 для баннера или 1000 для статьи. Высота подстроится сама.
- В блоке Compress выберите WebP (или MozJPEG, если нужен именно JPG) и установите Quality 75-80.
- Двигайте вертикальную полосу посередине, чтобы сравнить оригинал с результатом. Внизу справа видны новый размер и процент экономии.
- Скачайте файл кнопкой в правом нижнем углу и загрузите его в WordPress вместо оригинала.
Squoosh обрабатывает по одной картинке, поэтому для больших объёмов лучше подойдёт плагин или программа пакетной обработки.
Без дополнительных программ
- В Windows: откройте фото в приложении Photos (Фотографии) и выберите изменение размера в меню с тремя точками.
- На Mac: в Preview (Просмотр) меню Tools, затем Adjust Size.
Автоматически, плагином WordPress
Плагин оптимизации сжимает и конвертирует каждую новую картинку при загрузке, а уже существующие в Media по Вашему запросу обрабатывает за один проход. Держите активным только один такой плагин: два одновременно могут обработать одно изображение дважды или конфликтовать.
LiteSpeed Cache (WordPress Hosting и Business Hosting)
На этих тарифах работает веб-сервер LiteSpeed, а в плагине LiteSpeed Cache есть оптимизация изображений.
- В WordPress откройте LiteSpeed Cache, затем Image Optimization. Оптимизация выполняется через сервис QUIC.cloud от LiteSpeed, поэтому плагин может сначала попросить подключить сайт к этому сервису.
- В настройках Image Optimization включите Optimize Original Images, Auto Request Cron, Auto Pull Cron и опции версий WebP (Create WebP Versions и Image WebP Replacement). В разных версиях плагина названия могут немного отличаться.
- На странице сводки нажмите Send Optimization Request. Для большого сайта процесс занимает от нескольких минут до нескольких часов.
Остальные настройки плагина: Как включить и настроить LiteSpeed Cache.
Другие плагины (подходят и для Web Hosting SSD с Nginx и Apache)
| Плагин | Где идёт оптимизация | На что обратить внимание |
|---|---|---|
| ShortPixel Image Optimizer | На серверах ShortPixel | Очень хорошее качество; бесплатно в пределах месячного лимита; есть массовая обработка уже загруженных картинок |
| EWWW Image Optimizer | На Вашем хостинге | Бесплатный, WebP включён; на больших медиатеках расходует ресурсы аккаунта, поэтому запускайте его частями |
| Smush | На серверах WPMU DEV | Может автоматически уменьшать большие картинки при загрузке; уточните, какие функции, например WebP, доступны бесплатно |
| Imagify | На серверах Imagify | Прост в работе; бесплатно в пределах месячного лимита |
Лимиты бесплатных версий часто меняются, поэтому уточняйте их на странице плагина на wordpress.org.
Отложенная загрузка (lazy load) уже встроена в WordPress: картинки ниже по странице скачиваются, только когда посетитель до них доходит. Не отключайте её; плагины кеширования могут её расширить.
Видео
Презентационный или фоновый ролик, встроенный в страницу файлом, нередко весит от 3 до 30 МБ и скачивается при каждом визите, даже если его никто не запускает. Проще всего опубликовать его на YouTube или Vimeo и вставить на страницу оттуда: ролик загрузится только при запуске и в качестве, подходящем для экрана.
Если видео обязательно должно остаться на сайте:
- Обрежьте его до нужного фрагмента.
- Экспортируйте в ширине 1280 px, до 2-3 МБ, без звука, если это фон.
- Добавьте картинку-превью (poster), чтобы страница выглядела аккуратно до старта ролика.
- Убедитесь, что тема не подключает его дважды, отдельно для компьютера и для телефона.
Проверьте результат
Очистите кеш (в LiteSpeed Cache: Toolbox, затем Purge All, или аналогичная кнопка в Вашем плагине) и повторите проверку в PageSpeed Insights. Цель: вся страница до 2-3 МБ и ни одной картинки больше 300-500 КБ. Если страница остаётся тяжёлой из-за темы или конструктора страниц, откройте тикет с адресом страницы, и мы разберёмся вместе.
Частые вопросы
Разве WordPress не уменьшает картинки сам?
Он создаёт уменьшенные копии каждой картинки, но оригинал тоже хранит. Галерея из снимков по 8 МБ занимает место на диске и в резервных копиях, даже если посетители видят уменьшенные версии. Уменьшение до загрузки решает обе проблемы. Как посмотреть, что занимает место в аккаунте: место на диске в cPanel.
Почему WordPress не даёт загрузить логотип в SVG?
WordPress по умолчанию не разрешает загружать SVG из соображений безопасности. Используйте PNG с прозрачным фоном или разрешите SVG только через надёжный плагин, который очищает файл при загрузке.
Можно ли поставить два плагина оптимизации, чтобы сжать сильнее?
Нет. Второй плагин не даёт реального выигрыша и может испортить картинки или конфликтовать с первым. Выберите один, а в остальных отключите функции работы с изображениями.
