Размеры изображений WordPress по умолчанию и как добавить пользовательские значения

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

Размеры изображений WordPress

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

• Миниатюра.
• Среднее.
• Большое.
• Самое большое.

Если используемая тема оформления поддерживает дополнительные размеры изображений, WordPress создаст и их.

CMS также сохраняет исходный размер загружаемого изображения. Все эти значения перечислены в выпадающем списке «Размер изображения».

Почему WordPress создает так много изображений?

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

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

Если изображения WordPress по умолчанию не соответствуют размерам темы оформления, их можно настроить в разделе «Настройки»>«Настройки медиафайлов». А также добавить пользовательские размеры.

Размеры изображений, используемые WordPress по умолчанию, за исключением medium_large, который скрыт

Размеры изображения, используемые по умолчанию следующие:

• Квадрат 150 на 150 пикселей для миниатюр;
• 300 пикселей в ширину для средних изображений;
• Максимальная ширина 768 пикселей для изображений средних размеров;
• Максимальная ширина 1024 пикселя для больших изображений.

Medium_large был добавлен для поддержки адаптивных изображений, поэтому он не включен в страницу настроек.

Адаптивные изображения

Все эти значения по умолчанию размеров служат другой цели, поэтому их не следует устанавливать на ноль.

WordPress добавил адаптивные изображения в ядро ​​в версии 4.4. А также атрибут srcset (набор источников), который представляет собой список URL-адресов изображений различных размеров. При этом он использует те же изображения, которые создает при загрузке полноразмерного варианта.

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

Когда вы добавляете нестандартный размер изображения, WordPress добавит его в файл srcset с таким же соотношением сторон.

Размер миниатюр и главного изображения WordPress

Миниатюры WordPress были представлены в версии 2.9. Их название было изменено на главные изображения в версии 3.0. Но старый вариант прижился.

Если у вас нет мета-блока главного изображения, вставьте add_theme_support ('post-thumbnails'); в файл functions.php

Вот некоторые примеры исправления данной проблемы:

• Если в используемой теме оформления нет главных изображений, их можно активировать, добавив add_theme_support( 'post-thumbnails' ); в файл функций.
• Чтобы указать размер главного изображения в теме оформления, используйте функцию the_post_thumbnail().

Миниатюры и главные изображения по умолчанию имеют размер 150 на 150 пикселей. Если вы используете функцию the_post_thumbnail() без аргумента размера, по умолчанию она будет использовать размер 150 на 150 пикселей.

Прежде чем вы начнете создавать собственные размеры изображений в WordPress

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

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

Вот код, который мы собираемся добавить в файл функций для создания пользовательских размеров изображения:

add_image_size( 'the-name-for-custom-image-size', 600, 400, true );

Эта функция принимает четыре параметра в следующем порядке:

1. Имя пользовательского размера изображений;
2. Ширина изображения в пикселях;
3. Высота изображения в пикселях;
4. Должно ли изображение обрезаться до указанной ширины и высоты.

Обрезка

Параметр обрезки является логическим типом данных (bools). По умолчанию его значение равно false. Если для него установлено значение true , WordPress обрежет изображение так, чтобы оно соответствовало размерам, указанным при создании пользовательского типа.

Например, если пользовательский размер изображений равен у 600 на 600 пикселей, а для параметра обрезки установлено значение true, то при загрузке прямоугольного изображения размером 600  на 800 пикселей 200 пикселей будут обрезаны.

add_image_size( 'custom-image-square', 600, 600, true );

Установка параметра обрезки в значения true полезна для пользовательских размеров, которые должны быть точными. Например, для избранных изображений или записей в архивах, которые должны соответствовать определенному размеру.

Для изображений, к которым не предъявляются настолько жесткие требования, можно установить для параметра обрезки значение  false. Тогда размер изображения будет изменяться, но форма. Поэтому изображение не будет обрезаться.

Повторное генерирование миниатюр

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

При смене способа обработки, с помощью которого WordPress создает дополнительные изображения, это будет влиять только на те изображения, которые будут загружены в дальнейшем. Чтобы изменить уже загруженные изображения, можно использовать плагин Regenerate Thumbnails.

Нажмите кнопку, чтобы создать новые размеры изображений

Когда вы повторно сгенерируете миниатюры в новых размерах, то сможете удалить изображения старых (неиспользуемых) размеров, чтобы освободить место на сервере.

Как добавить пользовательские размеры изображений в редактор Gutenberg

Чтобы в редакторе Gutenberg отображались пользовательские размеры изображений, нужно добавить приведенный ниже код в файл функций. Если вы создали нестандартный размер изображений для темы, то можете пропустить этот шаг.

Пользовательский размер изображений, который добавляется с помощью кода, приведенного ниже

Мы подключаемся к фильтру image_size_names_choose. В массив добавляем название нестандартного размера изображений, указанного в функции add_image_size. А также значение, которое будет отображаться в раскрывающемся списке:

<?php
	
	add_filter( 'image_size_names_choose','wpmudev_custom_image_sizes' );
	
	function wpmudev_custom_image_sizes( $sizes ) {
	return array_merge( $sizes, array(
	
	//Здесь добавляем пользовательский размер изображений
	'custom-image-square' => __( 'Square' ),
	'blog-width' => __( 'Blog Content Full Width' ),
	) );
	}

Сниппет кода для добавления пользовательского размера изображений в WordPress

Но сначала нужно повторно сгенерировать миниатюры.

Объединим все, что мы узнали, в один блок кода с реальным примером. Предположим, что нам нужно добавить в свой блог нестандартные размеры изображений:

• Основное изображение размером 1600 на 400 пикселей;
• Изображение с шириной 800 пикселей.

Обратите внимание, что я не обрезаю второе изображение, которое будет располагаться на всю ширину контента. Но я буду обрезать основные изображения, чтобы они выстраивались в ряд.

Единственное изображение, которое я хочу добавить в выпадающий список редактора Gutenberg - это изображение блога. Так как я буду использовать в своей теме размер изображения, рекомендуемый WordPress.

<?php
	// Сначала добавляем поддержку главного изображения
	add_theme_support( 'post-thumbnails' );
	
	// Затем мы добавляем два пользовательских размера изображений
	add_image_size( 'featured-large', 1600, 400, true );
	add_image_size( 'blog-width', 800, 600 );
	
	// И затем добавляем пользовательский размер изображений, который охватывает область контента, в список выпадающего меню блока редактора Gutenberg
	add_filter( 'image_size_names_choose', 'wpmudev_custom_image_sizes' );
	
	function wpmudev_custom_image_sizes( $sizes ) {
	    return array_merge( $sizes, array(
	        'blog-width' => __( 'Blog Width' ),
	    ) );
	}

Следующим шагом будет повторное генерирование миниатюр.

Чтобы использовать пользовательское изображение для записей в цикле, я добавляю следующий код в файл single.php или index.php:

<?php
	get_header();
	if (have_posts()) :
	   while (have_posts()) :
	      the_post();  ?>
	
		<h1><?php the_title() ;?></h1>	
		<?php 
	    the_post_thumbnail( 'featured-large' );
	    the_content(); 
	        
	   endwhile;
	endif;
	get_sidebar();
	get_footer();
	?>

Обратите внимание, как я добавил 'featured-large' в функцию the_post_thumbnail(). В результате изображение будет отображаться под заголовками записей в блоге, то есть над основным контентом.

Рекомендации по использованию пользовательских размеров изображений

1. Загружайте самый большой файл изображения. Если изображение слишком маленькое, WordPress не сможет создать размерности, необходимые для правильного отображения на различных устройствах.
2. Для изменения размера, заданного по умолчанию для medium_large, используйте  функцию update_option().
3. Если нужно одно из своих пользовательских изображений вне цикла WordPress, используйте функцию get_the_post_thumbnail().

Это все, что вам нужно для добавления пользовательских размеров изображений

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

А для оптимизации изображений можно применять не только CDN, но и другие инструменты: отложенная загрузка и преобразование изображений в форматы следующего поколения.

Пожалуйста, оставьте свои отзывы по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, дизлайки, подписки, лайки, отклики!