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

Введение

Изображения делают сайт живым и привлекательным. Яркие фото товаров, иллюстрации к статьям, инфографика — всё это привлекает внимание посетителей. Но есть и обратная сторона: тяжёлые картинки могут сильно замедлить загрузку страниц. Никто не любит ждать по нескольку секунд, пока сайт думает, верно? Чтобы ресурс оставался и красивым, и быстрым, изображения нужно оптимизировать.

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

Аренда VPS/VDS — от ₽219/месяц

Почему выбирают VPS от AdminVPS:

✓ Дешевле физического сервера

✓ Более гибкий и мощный, чем обычный хостинг

✓ Бесплатная защита от DDoS и техподдержка 24/7

✓ Масштабируется под любые задачи

Виртуальный сервер VPS/VDS — ваш личный сервер для сайтов, магазинов, ботов и других проектов.

Арендовать VPS

Зачем оптимизировать изображения

Неоптимизированные изображения способны из хорошего друга превратиться во врага вашего сайта. Дело в том, что графика — один из самых тяжёлых типов контента. Файл фотографии легко может весить несколько мегабайт, особенно если это снимок с камеры высокого разрешения. Представьте интернет-магазин с сотнями товаров, у каждого по несколько фото. Если каждое изображение весит по 2–3 МБ, совокупный объём контента на странице будет огромным. Страницы начнут грузиться медленно, особенно на мобильном Интернете, и посетители просто закроют вкладку и уйдут к конкурентам.

Тяжёлые картинки создают нагрузку на хостинг. Когда многие пользователи одновременно открывают страницу с большим количеством несжатых фото, серверу приходится обрабатывать значительный объём данных. На слабом тарифе или небольшом VPS это может даже вызвать превышение нагрузки на CPU и замедлить работу всего сайта. Также крупные файлы занимают много места на диске. Медиа-библиотека WordPress разрастается, резервные копии (бекапы) выполняются дольше, а свободное место тает на глазах. Оптимизация изображений решает эти проблемы.

Как уменьшить размер изображения без потери качества

Оптимизация изображений — это не только про сжатие файлов, здесь важно учесть несколько моментов. В идеале нужно добиться минимального размера картинки без заметного ухудшения её качества.

Формат

У каждого графического формата свои особенности. Например:

• JPEG хорошо подходит для фотографий и сложных цветных картинок, этот формат умеет сильно сжимать фото с незначительной потерей качества.
• PNG лучше использовать для изображений, где важна чёткость и прозрачность, например, логотипы, схемы, скриншоты с текстом. Он не искажает детали, но и размер файла выходит больше.
• GIF используется для коротких анимаций и поддерживает простую анимацию в пределах 256 цветов.
• SVG — векторный формат, идеально подходит для иконок и простых иллюстраций. Такие изображения масштабируются без потери чёткости и обычно весят очень мало.
• WebP — современный формат от Google, который позволяет получить значительно меньший размер файла по сравнению с JPEG/PNG при сопоставимом качестве.

WebP уже поддерживается большинством браузеров, хотя в некоторых старых ещё может не работать. В целом, выбирайте формат оптимально под задачу: фото в JPEG, графику с прозрачностью в PNG, простые иконки в SVG, а для экономии трафика рассматривайте и WebP.

Разрешение

Перед загрузкой на сайт стоит уменьшить физические размеры изображения до тех, в которых оно будет показано на странице. Нет смысла загружать картинку шириной 4000 пикселей, если в шаблоне она выводится, например, в блоке 800×600. Лишние пиксели только утяжеляют файл, но не дают преимущества в качестве при отображении. Поэтому заранее измените размер изображения в любом графическом редакторе или онлайн-сервисе.

WordPress при загрузке сам создаёт копии изображений в нескольких типовых размерах (эскиз, средний, большой и пр.), и тема вставляет на страницы оптимальный вариант. Однако оригинал изображения всё равно сохраняется на сервере, и если вы загрузили изначально огромный файл, он займёт место и может случайно использоваться где-то на сайте. Поэтому лучше сразу загружать картинки в разумном разрешении. Например, для большинства блогов достаточно 1200px по ширине для полноразмерной иллюстрации.

Сжатие изображений

Это основной этап оптимизации, уменьшение веса файла за счёт программных методов. Существует сжатие без потери качества, при котором удаляются лишь избыточные данные, например, метаданные, а само изображение остаётся визуально неизменным. И есть сжатие с потерями, при нём алгоритм может уменьшить количество цветов, чуть размыть мелкие детали или применить другие методы, незаметно для глаза снижающие качество. Современные алгоритмы и фильтры позволяют сократить размер изображения на 50–80 % без видимых искажений. Но важно не переусердствовать. Если после обработки фотография стала мыльной, значит качество упало слишком сильно.

Графические редакторы (Adobe Photoshop и аналоги) имеют функцию «Сохранить для Web», где можно вручную подобрать степень компрессии. Если фотошопа под рукой нет, выручат онлайн-сервисы для оптимизации изображений. Обычно всё сводится к тому, что вы загружаете своё изображение на сайт оптимизатора, а в ответ получаете уже сжатый файл. Важно делать это до размещения изображения в WordPress.

Есть и небольшой лайфхак: PageSpeed Insights от Google. Этот инструмент анализирует скорость вашей страницы. Если он решит, что изображения на странице слишком тяжёлые, то в отчёте предложит готовый архив со сжатыми версиями картинок. Вы можете просто скачать этот архив прямо с PageSpeed и заменить у себя на сайте изображения оптимизированными копиями.

Дополнительные меры для ускорения

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

• Отложенная загрузка. Благодаря ей изображения, которые находятся ниже экрана и изначально не видны, не загружаются сразу при открытии страницы, а подтягиваются только когда пользователь докрутит до них. К счастью, WordPress сейчас поддерживает эту функцию из коробки.
• CDN и внешние хранилища. Вы можете вынести тяжёлый контент на отдельный домен или подключить сеть доставки контента. CDN-сервисы хранят копии изображений на своих серверах по всему миру и отдают пользователям файлы с ближайшего узла. Это ускоряет загрузку для посетителей из разных регионов и снижает нагрузку на ваш сервер.

Плагины для оптимизации изображений в WordPress

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

Smush

Smush — один из любимцев владельцев WordPress: 1+ млн установок, бесплатная версия с нужными базовыми функциями. Поставьте плагин, примите рекомендуемые настройки, и все новые картинки будут сжиматься сами.

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

Лимиты бесплатной версии: не затрагивает файлы больше 5 МБ и за раз обрабатывает максимум 50 штук. Небольшим сайтам бесплатного тарифа хватит с головой, а если фото сотни, жмите Bulk Optimize несколько раз или берите про-версию.

Compress JPEG & PNG Images (TinyPNG)

Если название длинное, то суть проста: Compress JPEG & PNG Images — официальный плагин TinyPNG, который подключается к облачному API и отправляет каждую картинку на сервер сервиса. Там она сжимается лучшими алгоритмами и возвращается уже в облегчённом виде, без нагрузки на ваш хостинг.

Установка чуть сложнее, чем у Smush, но проста: после активации зарегистрируйте учётную запись API, указав имя и e-mail. Подтвердите письмо, плагин получит ключ и сможет работать. Новые JPEG и PNG он оптимизирует автоматически при загрузке в библиотеку. В настройках можно выбрать, какие размеры изображений сжимать и задать уровень компрессии. Старые файлы оптимизируйте через Bulk Optimization в разделе «Медиафайлы». Обработка займёт время, но приведёт всю библиотеку в порядок.

Лимит бесплатной версии — 500 изображений в месяц, чего хватает большинству блогов. При превышении потребуется докупить пакет сжатий на сайте TinyPNG.

EWWW Image Optimizer

Если название пугает, суть проста: EWWW Image Optimizer сжимает изображения прямо на вашем сервере с помощью встроенных утилит вроде jpegtran и optipng. Это быстро, без потери качества и без отправки файлов куда-то ещё. Если хостинг слабый или нужна более глубокая оптимизация, можно подключить облачную версию EWWW Cloud. Она работает через внешний API по принципу TinyPNG.

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

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

Imsanity

Очень полезный плагин, если вы часто загружаете изображения прямо с камеры или от фотографа. Задайте максимальную ширину и высоту (например, 1600 пикселей), и любое фото, превышающее эти размеры, будет пропорционально уменьшено. Качество почти не меняется, а размер файла заметно уменьшается. Плагин также умеет конвертировать BMP и PNG в JPEG на лету, если это помогает экономить место. После активации всё работает без сложной настройки, загруженные гиганты автоматически приводятся к норме.

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

Optimole

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

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

В бесплатной версии доступно до 5 000 посещений в месяц с обработкой и доставкой картинок через CDN. Если трафик выше, нужно перейти на платный тариф.

Есть и другие подходы. В Jetpack от создателей WordPress модуль Site Accelerator загружает изображения через CDN WordPress.com, автоматически сжимает и конвертирует их в WebP. Сервисы вроде Cloudinary хранят картинки в облаке, выдают их в нужном размере и интегрируются с WordPress. Их используют на крупных сайтах с миллионами фото. Для начала же достаточно одного из плагинов, описанных выше, чтобы ускорить сайт.

SEO-оптимизация изображений

Сжатие картинок — это ещё не всё, что нужно для идеальной отдачи визуального контента. Очень важно правильно описать изображения для поисковых систем. Речь о заполнении атрибутов alt и title, а также об именах файлов. Эти текстовые метки помогут поисковым роботам понять, что изображено на картинке, и корректно проиндексировать её.

Когда вы загружаете изображение в WordPress, не поленитесь сразу прописать тег alt. Это короткое текстовое описание изображения, которое будет показано вместо картинки, если она вдруг не загрузится. Alt-текст также используется поисковиками, по нему ваш файл может появляться в результатах поиска картинок. Хороший alt содержит ключевые слова, релевантные теме страницы, и одновременно описывает содержимое изображения понятным языком. Например, для фотографии товара alt может быть прописан так: «красные кроссовки Nike, модель 2023». Здесь и суть картинки ясна, и ключевое слово (кроссовки Nike) присутствует.

Title изображения — это заголовок, всплывающая подсказка при наведении курсора. Его тоже можно заполнить, обычно дублируя или дополняя alt. Title чуть меньше влияет на SEO, но лишним не будет, особенно если нужно дать дополнительный комментарий к картинке.

Обратите внимание на имена файлов изображений. Камеры и телефоны называют снимки бессмысленно (вроде DSC_1234.jpg), что ни о чём не говорит ни людям, ни поисковикам. Лучше переименовать файл перед загрузкой, используя понятные слова. В названии можно указать кратко, что на фото, например: modern-office-desk.jpg вместо набора цифр. Желательно писать латиницей, без пробелов, используйте дефис или нижнее подчёркивание для разделения слов. Такое имя и ошибки на сервере предотвращает, и поисковику подсказывает тему изображения, и выглядит аккуратно.

Если на вашем сайте накопится много хорошо описанных и сжатых изображений, они могут начать приносить вам дополнительный трафик из поиска по картинкам. Пользователи часто ищут иллюстрации через Google или «Яндекс», и правильно оптимизированные изображения имеют больше шансов появиться в топе результатов.

Заключение

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

Читайте в блоге:

• Как отключить WP-Cron в WordPress и настроить системный cron на сервере
• Как вручную добавить структурированные данные на сайт WordPress
• Как вынести админку WordPress на поддомен и ограничить доступ по IP-адресу