Как настроить корректные размеры картинок в WordPress

Антон
31 августа 2019 Блог

Для максимальной скорости загрузки сайта нужно, чтоб изображения на страницах были минимального размера. Это в том числе можно достичь обрезая их 1:1 как они будут использоваться. Например если превью работ в портфолио на главной странице 300х200 пикселей, то и размер картинки должен быть 300х200 пикселей.

Зачастую это требования игнорируется или о нем просто не думают. А думают только тогда, когда SEOшники начинают требовать “Зеленой зоны” в Google Page Speed. А как ее достичь, если на каждой странице 10 картинок по 3 мегабайта?

...
Время чтения: 3 минуты

Отправим материал вам на почту

Для максимальной скорости загрузки сайта нужно, чтоб изображения на страницах были минимального размера. Это в том числе можно достичь обрезая их 1:1 как они будут использоваться. Например если превью работ в портфолио на главной странице 300х200 пикселей, то и размер картинки должен быть 300х200 пикселей.

Зачастую это требования игнорируется или о нем просто не думают. А думают только тогда, когда SEOшники начинают требовать “Зеленой зоны” в Google Page Speed. А как ее достичь, если на каждой странице 10 картинок по 3 мегабайта?

Вот контент менеджеры и начинают обрезать картинки руками.

Хотя можно при разработке сайта задать нужные размеры один раз.

Мы тоже не всегда эту функцию добавляли. А с сегодня включили ее в смету по умолчанию и в чек лист тестирования сайта.

Зачем вам правильные размеры картинок?

  1. Ускоряет загрузку сайтов, особенно на медленном интернете.
  2. Увеличивает Google Page Speed Rank.
  3. Влияет на ранжирование и цену клика в контексте.

 

Самостоятельная настройка

Полное описание функции доступно на сайте для разработчиков: https://developer.wordpress.org/reference/functions/add_image_size/

Краткая инструкция:

Для этого нужно в настройки темы добавить:

add_theme_support( ‘post-thumbnails’ );

После этого нужно задать сами размеры

add_image_size( ‘thumb’, 220, 300, true ); // Hard Crop Mode

add_image_size( preview’, 440, 600 ); // Soft Crop Mode

add_image_size( ‘post’, 1920, 9999 ); // Unlimited Height Mode

Hard Crop Mode обрезает картинку по краям (сверху и снизу, или слева и справа), если соотношение сторон не идентичное. Недостаток — если детали расположены близко к краю картинки, они будут обрезаны.

Soft Crop Mode масштабирует картинку с сохранением пропорций. Недостаток — могут быть пустые места на сайте, если изображение отличается по соотношению сторон.

Unlimited Height Mode обрезает только ширину а высоту оставляет такую, как есть с сохранением пропорций. Полезно для инфографики.

Ваши картинки готовы

Использовать их можно при помощи функции the_post_thumbnail( ‘your-custom-size’ );

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

Быстрых вам сайтов!

Поделиться:

У вас есть задача для нас?
Пришлите заявку, обсудим и решим!