Полное руководство по оптимизации изображений

В этом руководстве я предоставлю всю информацию об оптимизации изображений в WordPress.

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

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

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

Изменение размера и обрезка изображений

Для повышения производительности GTmetrix и Google PageSpeed ​​Insights рекомендуют изменять масштаб изображений, чтобы они соответствовали контейнеру, в котором будут размещаться.

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

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

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

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

Обрезка изображений

При обрезке изображения постарайтесь по максимуму лишние детали и ненужное пространство. Для SEO лучше всего подходят изображения с соотношением сторон 4:3 и 16:9.

Использование подходящего формата изображения

Лучший способ оптимизировать изображения в WordPress без помощи специального плагина – это использовать подходящий графический формат.

Уменьшение размера изображения WordPress

Существует два типа изображений: векторные и растровые.

Векторные – это математически сгенерированные геометрические фигуры, размер которых можно изменять без потери качества.

Растровые – состоят из крошечных блоков (пикселей), расположенных в сетке. Растровые изображения отображаются в высоком качестве только в первоначальном размере. Иначе изображение получится размытым.

Сжатие изображения в WordPress

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

Сжатие с потерями навсегда удаляет данные из изображения. Оно не всегда приводит к заметной потере качества.

Сжатие с потерями в пределах 75-100% поддерживает целостность и высокое качество изображения. Но при 75% сжатии изображение станет в два раза меньше. При загрузке изображений в социальные сети они сжимаются на 70-85%.

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

Типы файлов изображений

JPEG

Изображения JPEG лучше всего подходят для больших фотографий.

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

PNG

Лучше всего подходят для сохранения деталей (например, текста на скриншоте).

• Формат используют сжатие изображений без потерь, поэтому они больше по размеру в сравнении с JPEG.
• Есть три вида PNG:
  • PNG-8 поддерживает 256 проиндексированных цветов.
  • PNG-24 поддерживает 24-битные цвета, создавая палитру из миллионов цветов. Поэтому он больше похож на JPEG.
  • PNG-32 поддерживает 24-битные цвета плюс дополнительный альфа-канал для настройки прозрачности.
• Все три типа PNG поддерживают прозрачность, но по-разному.

WebP

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

Есть два типа файлов WebP:

• WebP - использует сжатие с потерями.
• WebP Lossless - больше похож на PNG, потому что использует сжатие без потерь.

SVG

Язык разметки на основе XML, который позволяет создавать двухмерные фигуры векторной графики. Лучше всего он подходит для создания логотипов, графики, значков и т.д.

• SVG плохо работает с фотографиями.
• Совместим со всеми браузерами.
• По умолчанию WordPress не поддерживает SVG.

GIF

• Формат подходит для создания анимации.
• GIF-файлы больших размеров, особенно если это анимация.
• Для GIF-файлов характерна ограниченная цветовая палитра, состоящая из 256 цветов и поддержкой прозрачности.
• GIF совместим со всеми браузерами.

Вот краткий обзор функциональности

Заголовки изображений

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

Давайте изображениям краткие описательные названия. Используйте ключевые слова, если они соответствующим образом описывают изображение.

Редакторы для пакетной обработки изображений

Lightroom Classic - был разработан для обработки изображений без потери качества. Используйте его для изменения масштаба, обрезки или переименования JPEG- изображений, полученных с фотокамеры.

Photoshop - поможет отредактировать большое количество PNG или JPEG-изображений. Используйте его для сложной пакетной обработки изображений.

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

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

Размеры изображений в WordPress по умолчанию

Дополнительные версии изображения, которые создает CMS:

• Thumbnail
• Medium
• Medium Large
• Large.

Стандартные размеры изображений в WordPress

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

Кроме этого можно настроить размерности изображений по умолчанию в разделе панели администрирования «Настройки» -«Медиафайлы». Когда вы вносите изменения в настройки, WordPress не обновляет изображения, которые уже есть в медиа библиотеке. Чтобы изменить ранее загруженные изображения, можно использовать плагин Regenerate Thumbnails.

При выполнении действий, перечисленных ниже, необходимо восстанавливать миниатюры:

• Изменение размеров изображений, используемых в WordPress по умолчанию.
• Добавление пользовательских размеров изображений.
• Подключение новой темы, в которой предусмотрены другие пользовательские размеры.

Адаптивные изображения

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

Если посетитель сайта использует мобильное устройство, он получит меньшее изображение в srcset. Если пользователь зашел на сайт с ПК с Retina-дисплеем, он увидит огромный полноразмерный файл.

При этом WordPress автоматически генерирует код srcset и добавляет изображения в набор.

Изображения для Retina-дисплеев

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

Как обслуживать изображения для Retina-дисплеев в WordPress

Шаг 1: Создайте изображения с удвоенным количеством пикселей.

Чтобы создать Retina- изображения, необходимо удвоить размеры каждого загружаемого изображения в пикселях. Например:

• Если исходная фотография 1600 на 400 пикселей, то нужно создать изображение шириной 3200 на 800 пикселей.
• Если ширина блога составляет 800 пикселей, то картинки для публикаций должны иметь ширину 1600 пикселей и т. д.

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

Шаг 2: Правильно обслуживайте Retina-изображения.

Вариант 1. Используйте атрибут srcset. Добавьте Retina-изображения в исходный набор, который WordPress использует для создания адаптивных изображений.

Вариант 2. Установите бесплатный плагин WordPress Retina 2x.

Шаг 3: Загрузите Retina-изображения в WordPress и используйте их на своем сайте

Чтобы использовать Retina-изображения в обычных публикациях, создайте вариант картинки размером в половину ширины и высоты от полной версии изображения.

Форматы изображений следующего поколения WebP

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

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

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

Заголовки изображений

Заголовки изображений в WordPress отличаются от имени файла. Имя файла добавляется при создании изображения в Photoshop или другом графическом редакторе. Это значение важнее для SEO, чем поле заголовка изображения в медиа библиотеке WordPress.

Альтернативный текст

Значение тега alt должно передавать смысл изображения для пользователей с ограниченными возможностями. А также для тех, кто не смог его загрузить.

Добавьте свой текст сюда

Подписи к изображениям

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

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

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

Sitemap для изображений

Чтобы убедиться, что Google индексирует все изображения, нужно создать файл Sitemap для изображений. Они особенно важны в тех случаях, когда контент часто обновляется. Чтобы упростить задачу, используйте плагин SmartCrawl для создания карты сайта.

Щелкните по переключателю, чтобы включить изображения в карту сайта, которую генерирует плагин SmartCrawl

Метатеги социальных сетей

Facebook, Twitter, LinkedIn и Pinterest поддерживают Open Graph – язык метатегов социальных сетей, созданный Facebook.

og:image – это важный тег Open Graph для картинок. Он позволяет указать, какое изображение должны отображать Facebook и другие социальные сети, когда пользователь делится вашей публикацией на сайте.

Обслуживание изображений

Последнее, на что стоит обратить внимание при оптимизации изображений, – это их обслуживание.

Ленивая загрузка

Ленивая загрузка – это механизм увеличения скорости загрузки страницы путем откладывания загрузки некритических ресурсов.

Кеширование в браузере

Это надежный способ увеличить скорость работы сайта за счет хранения часто востребованных ресурсов в кэше. При этом браузер сохраняет копию ресурсов (например, изображений), загруженных пользователем, в своем кэше. Поэтому при следующем сеансе он сможет получить их без дополнительного запроса к серверу. Это значительно повышает производительность сайта.

Сети доставки контента, CDN

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

Используя CDN для обслуживания картинок, следует избегать смены сети доставки. Так как это изменит URL-адрес картинки и может негативно повлиять на SEO-оптимизацию изображения.

Дополнительные ресурсы

Чтобы более подробно изучить тему оптимизации изображений, посмотрите другие наши публикации:

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

Вот и все, что касается оптимизации изображений в WordPress

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