Инструменты и плагины для оптимизации изображений

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

Сервисы для сжатия изображений

Перечислим самые распространенные инструменты:

1. Tinypng. Предназначен для работы с файлами png, которые особенно нуждаются в уменьшении размера. Можно использовать онлайн-сервис, также есть плагин для WordPress и даже для PhotoShop. Сервис уменьшает количество цветов в изображении незаметно для глаза. Есть схожий инструмент — Punypng со значительным ограничением размера загружаемых файлов (500 Кб).
2. Compressor. Позволяет сжимать графические файлы в режиме Lossy. Сервис Compressor.io может работать только с изображениями размером не более 10 Мб, и загружает он их только по одному файлу. Для работы с несколькими картинками стоит использовать аналог — сервис imagecompressor.com, где можно регулировать качество изображений. Доступна загрузка 20 иллюстраций.
3. Imagify. Подходит для обработки небольших файлов, до 2 Мб. Есть три уровня сжатия, самый мощный — Ultra. Можно подключить плагин по API для работы с изображениями прямо на сайте. Imagify поддерживает все форматы, в том числе анимации gifs и WebP. Есть платная версия с расширенным функционалом.
4. Kraken. Ещё один онлайн-сервис для сжатия нескольких иллюстраций. Можно загрузить их в ZIP-архиве, импортировать из Google диска или Dropbox. Есть настройки качества. Выгрузить готовые изображения можно тоже в архиве. В бесплатной версии возможностей не так много, сервис больше ориентирован на платное использование.
5. ImageRecycle. Визуально похож на вышеописанный. Тоже неплохой инструмент с поддержкой русского языка, реализованного при помощи Google Translation. Сервис может сжимать и PDF файлы.
6. JPEG-Optimizer. У платформы древний дизайн, но со своими задачами она справляется неплохо. Можно и сжимать изображения, и сразу менять их размеры. Есть возможность точно выставить уровень сжатия. Оптимальный параметр пункта «‎Compress Image»‎ — 80.
7. Photoshop. Это не онлайн-сервис, в отличие от всех перечисленных инструментов. Но в программе много полезных функций — возможность менять разрешение и качество картинок, применять сглаживание. При экспорте файла можно выставить все нужные настройки качества.

Плагины для WordPress

Пользоваться описанными выше инструментами могут не все, потому что не каждый из них доступен на iPhone, iPad и Android-устройствах. Поэтому владелец сайта ограничен: он не может загружать оптимизированные изображения со смартфона или планшета. Кроме того, эти сервисы позволяют загружать изображения маленькими партиями либо и вовсе по одному. Если вы часто добавляете картинки на сайт, советуем использовать плагины.

Список часто используемых плагинов:

1. EWWW Image Optimizer. Оснащён множеством настроек, простыми и понятными. Можно активировать функцию автоматического сжатия изображений при их добавлении. При этом вы можете указать в настройках, какие иллюстрации не нужно подвергать обработке, чтобы оставить их в исключительном качестве. Разработчики постоянно обновляют EWWW Image Optimizer.
2. Short Pixel. Чтобы активировать плагин, нужен API-ключ. Он привязывается к аккаунту на сайте разработчиков. После этого стоит сразу настроить расширение, чтобы оно работало именно так, как вам нужно. Short Pixel работает не только с изображениями всех известных форматов, но и с PDF. Плагин совместим с WooCommerce.
3. Optimus. Расширение обрабатывает изображения на своих серверах через API. Сжимает картинки до 70%. Можно включить функцию Original images, чтобы снижать вес только у миниатюр записей. Можно использовать при загрузке веб-страниц сайта иллюстрации в формате WebP. Есть функция автоматического сжатия загружаемых через медиабиблиотеку файлов.
4. Smush. Обработанные изображения незаметно теряют в качестве, а их вес уменьшается значительно — до 80%. Расширение работает с разными форматами: jpeg, png, gif. Можно сжимать файлы партиями или в момент загрузки на сайт. Дополнительных настроек нет: плагин нужно просто активировать. Есть возможность отката к исходным размерам изображений при помощи функции Re-smush.
5. Resize Image After Upload. Плагин экономит место на диске, так как уменьшает размер загруженных картинок и сохраняет их вместо оригиналов. Особенно удобен для тех, кто работает с крупными фотографиями весом от 20 Мб. Можно включить преобразование файлов png, не имеющих слоя прозрачности, в jpeg. Максимальный размер изображений нужно установить вручную.

И как мы уже упоминали, у некоторых онлайн-сервисов есть версии плагинов — Tinypng, Imagify, Kraken.

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

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

Нужно заполнить и мета-теги в HTML-коде веб-страницы — оттуда поисковые системы будут брать информацию о тематике файла. В TITLE нужно указать заголовок, пользователь его будет видеть при наведении мышки на картинку. Он тоже должен с иметь ключевое слово и быть не слишком длинным. Можно использовать не только латиницу.

Второй важный мета-тег — ALT. Нужно составить краткое описание изображения не длиннее 75 символов. Если картинка не прогрузится, пользователь увидит текст описания из этого атрибута.

Используйте микроразметку Schema.org, это тоже поможет поисковикам. Пропишите name — название картинки, height и width — её ширину и высоту изображения, добавьте caption — подпись к ней. Так вы улучшите представление сайта в результатах поиска.

А чтобы файлы точно попали в базу поисковых систем, составьте карту сайта для изображений. В ней будут прописаны адреса веб-страниц и опубликованные на них картинки. Можно добавить метаданные для изображений — свои контакты, информацию о лицензировании. Пользователи будут видеть их в результатах поиска иллюстраций.

Кэширование при помощи CDN

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

Пользователям Wordpress не обязательно во всё это вникать, можно автоматизировать процесс с помощью плагинов. Два популярных расширения — W3 Total Cache и LiteSpeed Cache. Их можно использовать бесплатно, также есть и платные тарифы.

Запомнить

Изображения нужно сжимать для ускорения загрузки веб-страниц.

Есть много онлайн-сервисов для сжатия — Tinypng, Compressor, Imagify и другие.

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

Поисковики охотнее работают с картинками, которые имеют заполненные мета-теги.

CDN-сеть помогает работать с изображениями без нагрузки на сервер сайта.