AVIF формат изображений — Добавлена поддержка в WordPress 6.5

Начиная с WordPress 6.5 — есть поддержка AVIF – современный формат изображений, который предлагает значительные улучшения в качестве и сжатии по сравнению с предыдущими форматами, такими как JPEG, PNG и даже WebP.

Размер AVIF-изображений может быть до 50% меньше, чем у JPEG при сохранении того же качества. AVIF-изображения также поддерживают широкий диапазон цветов (включая HDR) и обеспечивают более четкие изображения, чем JPEG, особенно в областях с высокой детализацией.

Начиная с версии WordPress 6.5, вы можете загружать и использовать AVIF-изображения в WordPress так же, как сейчас используете изображения JPEG или PNG – при условии, что ваша хостинговая среда поддерживает AVIF. Переход на формат AVIF для ваших изображений, вероятно, улучшит производительность вашего сайта и впечатления посетителей.

Как AVIF помогает вам

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

Создание AVIF-изображений

Многие инструменты редактирования изображений поддерживают экспорт в AVIF. Вы также можете использовать инструменты командной строки для конвертации или веб-инструменты с открытым исходным кодом, такие как Squoosh. После сохранения изображений в формате AVIF загрузите их в WordPress и используйте как любое другое изображение. WordPress также может создавать AVIF автоматически, подробнее об этом см. в разделе FAQ ниже.

Использование AVIF-изображений в WordPress

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

AVIF в WordPress зависит от поддержки в библиотеке обработки изображений вашего веб-сервера (WordPress имеет встроенную поддержку как Imagick, так и LibGD для обработки изображений). Вы можете проверить поддержку AVIF в панели администратора, перейдя в Инструменты -> Состояние сайта, нажав вкладку «Информация» и развернув раздел «Обработка медиафайлов», затем найдя «AVIF» в списке поддерживаемых форматов.

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

FAQ

В: Как настроить уровень сжатия для генерируемых AVIF-изображений?

Фильтр wp_editor_set_quality можно использовать для установки параметра качества. Переданный mime-тип позволяет установить настройки по типу, например:

// Use a quality setting of 75 for AVIF images.
function filter_avif_quality( $quality, $mime_type ) {
	if ( 'image/avif' === $mime_type ) {
		return 75;
	}
	return $quality;
}
add_filter( 'wp_editor_set_quality', 'filter_avif_quality', 10, 2 );

Как создавать AVIF-изображения без потерь?

Использование уровня сжатия 100 установит для AVIF режим без потерь.

В: Может ли WordPress создавать AVIF-изображения при загрузке JPEG?

Да. Разработчики могут использовать фильтр image_editor_output_format для указания такого преобразования при загрузке. Вот пример:

// Output AVIFs for uploaded JPEGs
function filter_image_editor_output_format( $formats ) {
	$formats['image/jpeg'] = 'image/avif';
	return $formats;
}
add_filter( 'image_editor_output_format', 'filter_image_editor_output_format' );

Если я использую WordPress multisite, будут ли все мои сайты работать с AVIF-изображениями?

Нет. Multisite хранит типы файлов, которые пользователи могут загружать, при создании сайта. Мы все еще работаем над улучшением этого в #53167. Тем временем, чтобы обеспечить поддержку AVIF-файлов на всех существующих сайтах в сети, вы можете использовать фильтр site_option в сетевом mu-plugin для добавления avif в список разрешенных типов файлов для всех сайтов сети:

// Ensure all network sites include AVIF support.
function filter_site_option_upload_filetypes( $filetypes ) {
	$filetypes = explode( ' ', $filetypes );
	if ( ! in_array( 'avif', $filetypes, true ) ) {
		$filetypes[] = 'avif';
	}
	return implode( ' ', $filetypes );
}
add_filter( 'site_option_upload_filetypes', 'filter_site_option_upload_filetypes' );