Оптимизация картинок WordPress

Оптимизация картинок WordPress

Вступление

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

Два типа оптимизации картинок WordPress

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

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

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

Как сжать картинку для сайта WordPress?

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

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

Посмотреть «вес» картинки очень просто. На своем компьютере наведите курсор на файл с картинкой и прочитайте информацию о файле. Если это не работает, посмотрите на правой кнопке (для Windows) свойства файла. Там есть размер файла в Мбайт или Кбайт. Напомню, 1мБ=1048576 байт=1024 Килобайт.

Для себя я принял одно правило, которое иногда нарушаю. Хорошо сжатой (оптимизированной для быстрой загрузки) считается фото размером не более 50 Кбайт, лучше 30 Кбайт.

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

Два сервиса отличного сжатия фото

Если вы забьёте в поиск, «сжать фото» или «сжать фото онлайн», вы наверняка найдете 10+ сервисов для подобных операций. Я рекомендую только два, один для файлов JPEG, второй для файлов PNG.

iloveimg.com

Сервис может сжать JPG, PNG или GIF файлы без потери качества и с отличным сжатием. Пакетная загрузка и обработка фотографий. Все ненужные метаданные тоже удаляются.

iloveimg.com

tinypng.com

tinypng.com

Сервис работает так. Когда вы загружаете файл PNG (Portable Network Graphics), похожие цвета в вашем изображении объединяются. Эта техника называется «квантование». Благодаря уменьшению количества цветов 24-битные файлы PNG можно преобразовать в 8-битные цветные изображения. Все ненужные метаданные тоже удаляются. Пакетная загрузка и обработка фотографий.

Сжимать фото на сайте WordPress

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

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

  1. Smush, страница плагина в архиве: https://ru.wordpress.org/plugins/wp-smushit/
  2. EWWW Image Optimizer страница плагина в архиве: https://ru.wordpress.org/plugins/ewww-image-optimizer/

Другие плагины вы можете найти в архиве плагинов по поиску image, compress или попробовать их поиск самостоятельно.

Примечание. Есть серия плагинов, которые предлагают иной способ оптимизации картинок по размеру. В статьях Использование медиа библиотеки и как добавить, оформить картинку WordPress я писал, что картинки на сайт можно вставлять по их стороннему URL адресу. То есть размещать картинки на стороннем сервере-хранилище и вставлять в материалы по URL хранения. Не люблю этот метод, потому что он выкидывает из поиска все картинки сайта, поэтому его не рекомендую. Пример такого плагина — плагин Cloudinary – Image… https://wordpress.org/plugins/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/.

Оптимизация HTML картинки

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

Чтобы поисковик добавил картинку в индекс, нужно, как минимум задать картинке тег alt. По определению тег alt, или альтернатива, будет показан пользователю, если его браузер не открывает картинку. Иными словами, именно тег alt увидят поисковые боты.

Важно! Все картинки, размещенные на сайте должны иметь тег alt. Отсутствие хотя бы одного тега alt на одной картинке статьи (страницы) воспринимается ботами, как негативный фактор оптимизации данной страницы.

Теги title (заголовок) и description (описание) для картинок на сайте WordPress тоже можно легко задать, но они не важны для оптимизации и скорее, важны для пользователя, чем для ботов.

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

оформление картинки wordpress

При заполнении всех полей для вставляемой картинки, HTML код будет такой (в новом редакторе Gutenberg):

<!-- wp:image {"id":147} --><figure class="wp-block-image">
<img src="http:/…/wp-content/uploads/2018/07/название-фото.jpg" alt="альтернативное описание 
тег alt" 
class="wp-image-147"/><figcaption>подпись</figcaption></figure><!-- /wp:image -->

Вывод

Подводя итог статьи, делаю вывод, оптимизация картинок WordPress проходит в два этапа. На первом этапе вы готовите картинку к размещению на сайте, сжимая её размер до 30-50 Кбайт. На втором этапе, оптимизируйте картинки для ботов, задавая им, тег alt (обязательно) и теги title (заголовок) и description (описание) по желанию. Если  не указать заголовок фото, он будет взят из названия файла.

©WPkupi.ru

Еще статьи

Похожие посты:

1 комментарий к “Оптимизация картинок WordPress”

  1. Дружище, тебе непременно надо еще упомянуть такой метод оптимизации картинок как GIF формат, который великолепно подходит для сжатия инфографики, и в частности твоя иллюстрация https://wpkupi.ru/wp-content/uploads/2018/11/nastroki-woo-related-products.jpg ужимается с 69Кб до 25Кб при сокращении палитры до 16 цветов, при этом она несущественно теряет в деталях, а jpg-артефектов не содержит в принципе.

Оставьте комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.