Изображения занимают значительную часть веса страницы и напрямую влияют на скорость загрузки сайта. В WordPress по умолчанию есть механизмы для создания разных размеров изображений, но часто этого недостаточно для оптимизации производительности. В этой статье разберём, как изменить размер и оптимизировать изображения без использования сторонних плагинов, используя только код и встроенные функции WordPress.
Почему важно оптимизировать изображения в WordPress
Оптимизация изображений позволяет уменьшить их размер без заметной потери качества, что ускоряет загрузку страниц и снижает нагрузку на сервер. Это положительно влияет на SEO и улучшает пользовательский опыт.
Стандартные размеры изображений, создаваемые WordPress при загрузке, не всегда подходят под дизайн сайта. Иногда нужно кастомизировать размеры или оптимизировать уже загруженные файлы.
Настройка пользовательских размеров изображений через functions.php
Для начала добавим в свою тему пользовательские размеры изображений, которые WordPress будет создавать автоматически при загрузке новых файлов.
function wpcource_add_custom_image_sizes() {
add_image_size('wpcource-small', 320, 240, true); // Кадрирование
add_image_size('wpcource-medium', 640, 480, false); // Без кадрирования
add_image_size('wpcource-large', 1024, 768, true); // Кадрирование
}
add_action('after_setup_theme', 'wpcource_add_custom_image_sizes');В этом примере мы создаём три новых размера. Первый с точной обрезкой, второй с пропорциональным масштабированием, третий с обрезкой. Эти размеры можно использовать при выводе изображений в шаблонах:
the_post_thumbnail('wpcource-medium');Удаление ненужных размеров изображений
По умолчанию WordPress создаёт множество размеров, которые не всегда нужны. Их можно отключить, чтобы экономить место на сервере и ускорить загрузку.
function wpcource_remove_default_image_sizes( $sizes) {
unset( $sizes['medium_large']);
unset( $sizes['large']);
return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'wpcource_remove_default_image_sizes');Так мы отключим создание некоторых стандартных размеров, оставив только необходимые.
Оптимизация изображений с помощью PHP GD или Imagick
Для автоматической оптимизации загруженных изображений можно использовать встроенные PHP-библиотеки GD или Imagick, чтобы сжимать изображения без потери качества.
Вот пример функции, которая сжимает JPEG при загрузке:
function wpcource_optimize_uploaded_image( $metadata, $attachment_id ) {
$upload_dir = wp_upload_dir();
$file = $upload_dir['basedir'] . '/' . $metadata['file'];
if ( ! class_exists('Imagick') ) {
return $metadata; // Imagick не доступен
}
try {
$image = new Imagick($file);
$image->setImageCompression(Imagick::COMPRESSION_JPEG);
$image->setImageCompressionQuality(75); // 75% качество
$image->stripImage(); // Удалить метаданные
$image->writeImage($file);
$image->clear();
$image->destroy();
} catch (Exception $e) {
// Ошибка обработки
}
return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'wpcource_optimize_uploaded_image', 10, 2);Эта функция сжимает исходное загруженное изображение, уменьшая его вес. Для серверов без Imagick можно использовать GD, но качество и функционал хуже.
Автоматическое сжатие изображений при загрузке
Кроме этого, WordPress позволяет задать качество создаваемых изображений через фильтр:
function wpcource_set_jpeg_quality() {
return 75; // Уровень качества JPEG в процентах
}
add_filter('jpeg_quality', 'wpcource_set_jpeg_quality');Можно комбинировать этот фильтр с оптимизацией через Imagick, чтобы добиться максимального уменьшения размера без потери визуального качества.
Оптимизация уже загруженных изображений — скрипт повторной генерации
Если на сайте уже есть много изображений, которые загружены без оптимизации, можно использовать WP CLI или написать скрипт для повторной генерации размеров и оптимизации.
Пример простого PHP-скрипта для запуска в корне сайта:
function wpcource_regenerate_and_optimize() {
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'posts_per_page' => -1,
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
$attachment_id = get_the_ID();
// Перегенерируем размеры
wp_update_attachment_metadata( $attachment_id, wp_generate_attachment_metadata( $attachment_id, get_attached_file( $attachment_id ) ) );
// Оптимизируем исходник
$metadata = wp_get_attachment_metadata( $attachment_id );
wpcource_optimize_uploaded_image( $metadata, $attachment_id );
}
}
wp_reset_postdata();
}
// Вызов функции
// wpcource_regenerate_and_optimize(); // Запускать один раз с админки или через CLIЭтот код можно временно подключить в теме или плагине и запустить для массовой оптимизации.
Вывод оптимизированных изображений с атрибутами srcset и lazy loading
Для современных сайтов важно использовать адаптивные изображения с атрибутом srcset и lazy loading, чтобы браузер загружал только нужный размер и откладывал загрузку внеэкранных картинок.
WordPress с версии 4.4 автоматически добавляет srcset и sizes в функцию the_post_thumbnail() и в wp_get_attachment_image(). Чтобы включить lazy loading, достаточно добавить атрибут loading="lazy":
echo wp_get_attachment_image( $attachment_id, 'wpcource-medium', false, array( 'loading' => 'lazy' ) );<Это позволяет значительно улучшить скорость загрузки страниц и снизить потребление трафика.
Советы по ручной оптимизации изображений перед загрузкой
- Используйте форматы WebP или AVIF, если поддерживается сервер и браузеры.
- Перед загрузкой сжимайте изображения в графических редакторах (Photoshop, GIMP, TinyPNG).
- Выбирайте правильный размер — не загружайте слишком большие картинки, если они будут показываться в маленьких блоках.
Использование плагина Clearfy Pro для оптимизации изображений
Если вы хотите дополнительно автоматизировать процесс и получить расширенные функции оптимизации, можно обратить внимание на плагин Clearfy Pro. Этот плагин позволяет управлять созданием размеров, удалять неиспользуемые стили и скрипты, а также оптимизировать медиафайлы.
Clearfy Pro интегрируется с вашей темой и не требует сложных настроек, что особенно удобно, если вы не хотите углубляться в код.
Вывод
Изменение размеров и оптимизация изображений без плагинов — вполне реальная задача, которая позволяет значительно улучшить скорость и производительность сайта. Используйте пользовательские размеры, настройте качество JPEG, оптимизируйте загруженные изображения через PHP-библиотеки и не забывайте про современные техники вывода с srcset и lazy loading.
Если хочется упростить процесс, плагин Clearfy Pro поможет настроить оптимизацию и очистку сайта без лишних усилий.