Для максимальной скорости загрузки сайта нужно, чтоб изображения на страницах были минимального размера. Это в том числе можно достичь обрезая их 1:1 как они будут использоваться. Например если превью работ в портфолио на главной странице 300х200 пикселей, то и размер картинки должен быть 300х200 пикселей.
Зачастую это требования игнорируется или о нем просто не думают. А думают только тогда, когда SEOшники начинают требовать “Зеленой зоны” в Google Page Speed. А как ее достичь, если на каждой странице 10 картинок по 3 мегабайта?
Вот контент менеджеры и начинают обрезать картинки руками.
Хотя можно при разработке сайта задать нужные размеры один раз.
Мы тоже не всегда эту функцию добавляли. А с сегодня включили ее в смету по умолчанию и в чек лист тестирования сайта.
Зачем вам правильные размеры картинок?
- Ускоряет загрузку сайтов, особенно на медленном интернете.
- Увеличивает Google Page Speed Rank.
- Влияет на ранжирование и цену клика в контексте.
Самостоятельная настройка
Полное описание функции доступно на сайте для разработчиков: 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’ );
Помните, что для мобильных устройств нужно подключать картинки меньшего размера.
При вставке изображений в редакторе у вас будет возможность выбрать нужные размер тоже.
Если вы руководитель бизнеса или маркетолог, то лучше доверить эту задачу профессионалам.
Эта, казалось бы, мелочь значительно ускоряет загрузку сайта и крайне рекомендована к применению.
Быстрых вам сайтов!
