Как сделать изображения WordPress отзывчивыми

Каждый раз, когда вы загружаете изображение, WordPress сохраняет его в своем исходном размере. Он также автоматически генерирует 3 копии с измененными размерами в этих стандартных размерах (высота или ширина могут меняться в зависимости от соотношения изображений):

  • Миниатюра (150 × 150)
  • Средний (300 × 300)
  • Большой (1024 × 1024)

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

Для того, чтобы добавить новые размеры изображения, вам нужно добавить вызовы к add_image_size функции. Это делается путем изменения файла functions.php. Вот пример, который добавляет четыре новых размера изображения:

Как сделать изображения WordPress отзывчивыми

Каждый вызов функции включает имя (поэтому WordPress может определить размер) и ширину. Новые размеры будут 300, 600, 1200 и 2400 пикселей в ширину.

В приведенном выше примере показаны только четыре новых размера изображений, но вы можете добавить больше или меньше … это будет основано на вашем дизайне темы. Теперь, когда изображение загружается в WordPress, оно будет генерировать новые размеры изображений. Следующий шаг — включить их в HTML.

Для того, чтобы WordPress выводил все размеры изображений, должен быть установлен: в RICG Responsive Images. После его установки и активации все размеры изображений будут включены в тег изображения с помощью атрибута srcset.

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