Оптимизация изображений на WordPress-блоге

Здравствуйте!

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

Содержание:

1. Для чего нужна оптимизация картинок на Вордпресс?
2. Программы для сжатия изображений
3. Как оптимизировать картинки автоматически: плагины WordPress

Что такое оптимизация изображений и для чего она нужна?

Оптимизация картинок на сайте нужна в первую очередь для повышения скорости работы ресурса. Если изображения много весят и загружаются медленно, посетитель может не дождаться загрузки и покинуть сайт. Тем самым увеличится показатель отказов, а вы потеряете своего читателя. Поисковые системы такие ресурсы понижают в выдаче. Вот тут можно проверить скорость загрузки страниц вашего сайта — https://developers.google.com/speed/pagespeed/insights. Или здесь — https://tools.pingdom.com.

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

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

Кроме сжатия изображений, стоит также уделить внимание seo-оптимизации. Для этого необходимо указывать alt картинок (title можно оставлять пустым, либо дублировать alt). Общие правила использования:

• Alt состоит из 3-5 слов, но не более 250 символов;
• Использование ключевых запросов для продвижения;
• Не вставлять в один alt более одной ключевой фразы (не спамить);
• Текстовое описание картинки должно соответствовать изображению.

Соблюдая эти простые рекомендации, ваш сайт сможет участвовать в поиске по картинкам в Яндексе и Google. А это – неплохой источник дополнительного трафика.

Если с сео-оптимизацией картинок непосредственно при загрузке на сайт все более-менее понятно, то вопрос сжатия изображений для WordPress-блога требует дополнительного рассмотрения. Так же, как и редактирование неоптимизированных картинок, ранее загруженных на сайт.

Программы для работы с изображениями

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

В среднем оптимизированная картинка для статьи блога весит не больше 50 Кб. Размер изображения по ширине составляет 400-800 px, но не больше контентной области сайта.

Стоит отметить, что WordPress во время добавления изображений автоматически создает 3 дополнительных размера вашей картинки. В итоге мы получаем Original, Large, Medium и Thumbnail size.

Различные размеры изображений используются для миниатюр к статьям, анонсов и т.д. Однако, если вы хотите, чтобы загружался только один вариант картинки, проставьте в полях Width/Height в данных настройках нули (Настройки – Медиафайлы).

Перейдем к рассмотрению способов сжатия изображений без потери качества для web.

Программа пакетной обработки картинок XnView

Такая программа, как Photoshop слишком массивна для наших целей и требует определенных профессиональных навыков для работы.

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

А вот программа XnView для этих целей как нельзя кстати. Она используется для работы с изображениями различных форматов от самых распространенных png, gif, img, tif, bmp, pdf, jpeg, до более специальных. В ней есть функции добавления текста и водяных знаков на изображение, изменения цвета, отражения, поворота, обрезки, добавления даты на снимок и многое другое. Среди прочих и изменение размера изображения, как одного, так и целого пакета.

Рассмотрим пакетную обработку картинок в XnView. Загружаем, устанавливаем и запускаем программу. Выбираем в правой панели папку с картинками, которые нужно обработать.

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

Теперь в появившемся окне нам нужно обратить внимание на пункт «Папка» и «Формат».

В строке «Папка» выбираем куда сохраним обработанные картинки. Лучше сохранять в отдельно созданную для этого папку, чтобы можно было при неудовлетворительном результате сразу удалить все лишнее.

Далее в строке «Формат» выбираем для нашего случая jpg и нажимаем «Опции», где можно установить качество полученной картинки по шкале от 0 до 100. Это отобразится и на итоговом весе изображений. Оставляем пока 80.

Переходим на вкладку «Преобразования». Находим в списке «Изменить размер» и нажимаем «Добавить». Ниже появится поле для установки размера, выбираем из раскрывающегося списка справа вариант 640×480. Оставляем галочку «Сохранять пропорции» и убираем «Поменять высоту с шириной». И жмем «Выполнить».

Ждем, пока пройдет преобразование. После заходим в папку, куда мы сохраняли новые картинки и смотрим, что у нас получилось.

Какие мы видим изменения:

1. все png файлы превратились в jpg;
2. вес каждой картинки в пределах 55 Кб;
3. размер картинок изменился: 640 по ширине (там, где картинки были больше) и пропорциональная высота).

Теперь посмотрим на качество измененных картинок. Вот так выглядит картинка без приближения (кликните на нее, чтоб посмотреть):

Качество достаточное для просмотра с экрана монитора. Если приблизить изображение, то будут видны изъяны.

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

Таким образом мы получили папку из 29 файлов весом 1,2 Мб против изначальных 7 Мб. Но, как правило, разрыв в весе гораздо больше.

Среди бесплатных программ по сжатию картинок для сайта, также можно использовать:

• FILEminimizer Pictures – работает с JPG, BMP, GIF, TIFF, PNG, EMF;
• FileOptimizer – работает с огромным количеством форматов, сжимает без потери качества;
• Caesium – сжимает png, jpg, bmp.

Плагины WordPress для сжатия изображений

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

Таких плагинов существует очень много, но мы рассмотрим те, которые обновляются и имеют высокие рейтинги.

Первый их них, это EWWW Image Optimizer. Это плагин для автоматического сжатия изображений при загрузке на WordPress-блог файлов формата jpg, png, gif, pdf без потери качества (lossless). Функционирует плагин с помощью утилит jpegtran, optipng, pngout, и gifsicle для работы с различными типами файлов соответственно. Интерфейс данного плагина интуитивно понятный, но могут возникнуть сложности в настройке. Для того, чтобы разобраться чего не хватает для правильной работы откройте вкладку «Статус плагина» после установки.

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

Следующий плагин — WP Smush.it. О нем упоминалось в статье про ускорение работы сайта. Добавлю, что этот плагин считается одним из лучших для автоматического сжатия, обрезки и оптимизации картинок для сайта на WordPress. Об это свидетельствует большое количество установок. Вот короткое видео от создателей:

Еще один плагин для работы с изображения – Imsanity. Он использует встроенные функции WordPress для масштабирования изображений. С его помощью возможна конвертация из bmp в jpg формат. При заливке чересчур больших картинок (лимиты вы указываете в настройках), например, сразу с фотоаппарата, плагин автоматически его заменяет на сервере ужатой копией. Т.е. 4 Мб будут преобразованы в 300-400 Кб. Хороший вариант для тех, кто часто оперирует подобным контентом.

На этом все на сегодня. Надеюсь, это статья была для вас полезной. Не забывайте оставлять комментарии к статье, делитесь своими способами работы с изображениями на блоге.

До встречи!