Как добавить адаптивные изображения в WordPress без плагинов

Почему адаптивные изображения важны для WordPress-сайта

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

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

Если вы заметили, что на мобильных устройствах загружаются полноразмерные изображения или сайт тормозит из-за больших картинок, нужно проверить:

• Используются ли в шаблонах функции WordPress для вывода изображений (например, wp_get_attachment_image()) с параметрами srcset.
• Присутствует ли в HTML у изображений атрибут srcset и sizes.
• Подключены ли необходимые размеры изображений в теме (через add_image_size()).

Пошаговое решение: реализация адаптивных изображений без плагинов

1. Зарегистрируйте нужные размеры изображений в functions.php

add_theme_support('post-thumbnails');
add_image_size('small-thumb', 320, 240, true);
add_image_size('medium-thumb', 640, 480, true);
add_image_size('large-thumb', 1024, 768, false);

Это создаст несколько версий картинки при загрузке в медиафайлы.

2. Используйте функцию wp_get_attachment_image() для вывода с поддержкой srcset

$image_id = get_post_thumbnail_id($post->ID);
echo wp_get_attachment_image($image_id, 'medium-thumb');

Эта функция автоматически добавит атрибуты srcset и sizes на основе зарегистрированных размеров.

3. Если выводите изображения вручную, используйте wp_get_attachment_image_srcset() и wp_get_attachment_image_sizes()

$image_id = get_post_thumbnail_id($post->ID);
$src = wp_get_attachment_image_url($image_id, 'medium-thumb');
$srcset = wp_get_attachment_image_srcset($image_id, 'medium-thumb');
$sizes = wp_get_attachment_image_sizes($image_id, 'medium-thumb');
echo '<img src="' . esc_url($src) . '" srcset="' . esc_attr($srcset) . '" sizes="' . esc_attr($sizes) . '" alt="'.get_the_title($image_id).'" loading="lazy">';

Как проверить, что адаптивные изображения работают

• Откройте сайт на мобильном устройстве или в режиме эмуляции в браузере (например, Chrome DevTools).
• Посмотрите HTML-код изображения — должен быть атрибут srcset с перечислением вариантов размеров и sizes.
• Вкладка Network в DevTools покажет, какой размер картинки загружается.
• Проверьте скорость загрузки и размер передаваемых файлов — на мобильных должны быть меньшие по весу изображения.

Частые ошибки и как их исправить

• Отсутствует add_theme_support('post-thumbnails')
  Без поддержки миниатюр WordPress не создаст дополнительные размеры. Добавьте в functions.php.
• Использование <img> без WordPress функций
  Если вставлять теги вручную без srcset, адаптивность не будет работать.
• Регистрация размеров без обрезки (crop) там, где нужно
  Некоторые размеры должны иметь строгие пропорции — включите обрезку, чтобы избежать растяжений.
• Кэширование старых изображений
  После добавления новых размеров очистите кэш сайта и браузера.

Практические советы по оптимизации и безопасности

• Используйте атрибут loading="lazy" для отложенной загрузки изображений.
• Регулярно оптимизируйте медиафайлы с помощью инструментов типа ImageOptim перед загрузкой.
• Ограничьте максимальный размер загружаемых файлов в настройках php.ini и WordPress, чтобы избежать DoS-атак.
• Следите за тем, чтобы URL изображений были защищены и не раскрывали лишней информации о структуре сервера.

Сравнение способов реализации адаптивных изображений