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

Вступление

Здравствуйте! Уже давно не стоит вопрос, что нужно оптимизировать на сайте для «поисковой любви», а что может и так сойти. Действительность такова, что оптимизировать нужно всё (общие советы по оптимизации сайта). Причем одно цепляется за другое и все сотни правил индексации и ранжирования, работающие в поисковых алгоритмах, давно переплелись в единый клубок. Например, фотографии на сайте нужно оптимизировать обязательно.

Три части оптимизации изображений WordPress

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

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

• Оптимизация до добавления фото на сайт;
• Оптимизация при добавлении фото в статью;
• Массовая оптимизация фото на сайте без выгрузки.

Оптимизация изображений WordPress (SEO) при вставки в статью, анкоры изображений

При добавлении изображения на любой сайт, можно задать: анкор фотографии (анкор ссылки фотографии), её описание, заголовок и размер. Для поисковиков особое значение имеет анкор. Анкор фотографии задается атрибутом alt.

Полная HTML структура добавления фото в wordpress, выглядит так.

Без подписи фото:

<a href="http://domen.ru/wp-content/uploads/2015/09/foto.jpg"><img class="alignnone wp-image-1934 size-medium" title="Заголовок фотографии" src="http://domen.ru/wp-content/uploads/2015/09/foto-448x252.jpg" alt="Анкор фотографии" width="448" height="252" /></a>

С подписью фото:

<a href="Http://domen.ru/wp-content/uploads/2015/09/foto.jpg"><img class="wp-image-1934 size-medium" title="Заголовок фотографии" src="http://domen.ru/wp-content/uploads/2015/09/foto-448x252.jpg" alt="Анкор фотографии" width="448" height="252" /></a> Подпись фотографии

В WordPress все атрибуты фотографии, в том числе и анкор, задаются в визуальном режиме:

Атрибуты добавляются в режимах «Добавить медиафайл» или в режиме «Редактировать фото».

Правила для анкора фотографии

• Атрибут alt (анкор) для изображения должен быть уникальным.
• В статье, желательно, чтобы один анкор фотографии (атрибут alt)  должен включать прямой ключ (ключевую фразу) статьи.
• Если хотите сгенерировать анкоры автоматом, идем на Majento.ru (Majento взят примера и не претендует на уникальность) в генератор анкоров.

Вывод 1

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

Оптимизация изображений до добавления на сайт

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

На помощь в этом вопросе придут программы по уменьшению размера файлов изображений. Здесь несколько правил:

• Наиболее легкие фотографии в расширении jpeg.
• Формат png и скриншоты в pnp самые тяжелые.

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

• Стандартный инструмент Microsoft Office (отличное сжатие при изменении размера до 448x);

оптимизация изображений WordPress программой Microsoft Office 2010

• Отличная программа Fast Stone Image Viewer ). Это отличный редактор с возможностью хорошего группового сжатия и изменения формата фото;

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

• Программа Caesium (https://saerasoft.com/caesium/). Это бесплатная программа, с отличным одиночным или групповым сжатием фотографий в формате jpeg.

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

• Рекомендую программу FileOptimizer (sourceforge.net/projects/nikkhokkho/files/latest/download). в отличие от Ceasium эта программа на Windows сожмет любые форматы картинок.

Вывод 2

Сжимать фотографии нужно до добавления на сайт WordPress.

Массовая оптимизация изображений Вордпресс

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

Для оптимизации фотографий уже помещенных в медиабиблиотеку WordPress используем плагин: EWWW Image Optimizer (протестирован на версии 4.4.2.). Плагин простой, но рабочий  периодически обновляется. Плагин Cloud (2) позволяет оптимизировать фотографии с использованием облачных технологий и сжимает фото, без смены формата. Этот плагин платный, 0,005 $ за фото до 1000 фото.

Устанавливаете плагин стандартно, можно из панели WordPress на вкладке Плагины→Добавить новый→Поиск по имени.

После активации плагина он готов к работе, но можно пройтись по настройкам (Настройки→ EWWW Image Optimizer) Настройки на русском, опасные настройки выделены словом «Внимание!». Кстати, есть функция переформатирование фотографий из png и gif в jpeg. После настроек открываем страницу плагина и запускаем процесс оптимизации.

Через некоторое время, смотрим результаты сжатия фотографий. Отмечу, что я всегда сжимаю фото до сайта, однако плагин EWWW Image Optimizer умудряется «выжать» из каждой фото, от 5% до 20 %.

Вывод 3

WordPress, при помощи дополнительного плагина (плагинов), позволяет оптимизировать фотографии всей медиабиблиотеки сайта, в любой момент.

Общие выводы и советы

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

• Старайтесь выбирать векторные форматы изображений. Их качество не зависит от разрешения и размеров, из-за этого они отлично смотреться на больших мониторах и разных  устройствах.
• Для SVG-ресурсов: сжимайте их, удаляете XML-разметку, проверьте настройку GZIP сжатие для SVG файлов.
• Для растровых фото: выберете свой масштаб и свой формат для растровых фото, избегайте GIF, сжимайте фото перед добавлением на сайт (63 Приложения для обработки фото без потери качества: здесь), не бойтесь снижать качество фото, уменьшайте по мере возможности цвет (оптимально 256 цветов), удаляйте ненужные метаданные (EXIF).
• Освободите браузер от необходимости масштабировать фото, для этого либо уменьшайте фото-файлы до вставки на сайт, либо используете плагины типа lightbox или эффект lightbox без плагина. Если большие картинки будет масштабировать браузер, производительность сайта значительно снизится.
• Автоматизируйте работу с фото с помощью тематических постоянно обновляемых плагинов.

В завершении статьи, напомню, что для облегчения сайта, можно очистить библиотеку и/или удалить неиспользуемые фотографии плагином Media Cleaner.

Источник: www.wordpress-abc.ru