Как сделать webp без плагинов в WordPress

WebP — это современный формат сжатия изображений без потери качества, который напрямую влияет на скорость загрузки сайта. Конвертирование изображений из jpg и png в формат webp может дать существенный прирост в баллах по google page speed. Формат webp поддерживается большинством современных браузеров.

Вы без труда можете найти плагины, которые помогут вам автоматически конвертировать изображения, добавленные через медиа библиотеку (т.е. в папку uploads) и изменят вывод изображений на сайте. Мы же рассмотрим пример, как это сделать без помощи плагина для любой папки.

Для начала нам понадобится gulp. Gulp — это таск-менеджер для автоматического выполнения задач на JavaScript. Таск, который нам нужен — gulp-webp.

Установка:

npm install --save-dev gulp-webp

Функция:

var gulp = require( 'gulp' );
var webp = require( 'gulp-webp' );

gulp.task( 'webp', () =>
	gulp.src( 'theme/data/images/*.{jpg,jpeg,jfif,png,gif,ico}' )
		.pipe( webp() )
		.pipe( gulp.dest( 'theme/data/images-webp/' ) )
);

В .task() пишем название, в .src() исходную папку с изображениями, в .dest() папку, куда их складывать (можно ту же самую)

Запуск в консоли:

gulp webp

Если все сделано верно, то в теперь в папке /images-webp/ у вас появятся конвертированные копии оригинальных изображений в формате webp.

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

<picture>
	<source srcset="/images/example.webp" type="image/webp">
	<source srcset="/images/example.jpg" type="image/jpeg">
	<img src="/images/example.jpg" alt="example alt" width="1200" height="800" loading="lazy">
</picture>

В этом случае браузер загрузит то изображение, которое ему больше подходит (то же самое для формата AVIF)

Рассмотрим функцию:

function get_webp_from_folders( $name, $folder, $folder_webp, $alt = '', $class = 'aspect-ratio', $before = '', $after = '' ) {

	$output = '';

	// получаем части изображения
	$ext = pathinfo( $name );

	// собираем пути до файлов
	$path = $folder . $ext['basename'];
	$path_webp = $folder_webp . $ext['filename'] . '.webp';

	// проверяем, что изображение существует
	if ( file_exists( get_stylesheet_directory() . $path ) ) {

		// получаем высоту и ширину изображения
		$image_attributes = getimagesize( get_stylesheet_directory() . $path );

		// проверяем, что .webp изображение существует
		if ( file_exists( get_stylesheet_directory() . $path_webp ) ) {
			$output .= '<picture class="' . $class . '">';
				$output .= '<source srcset="' . get_stylesheet_directory_uri() . $path_webp . '" type="image/webp">';
				$output .= '<source srcset="' . get_stylesheet_directory_uri() . $path . '" type="' . $image_attributes['mime'] . '">';
				$output .= '<img src="' . get_stylesheet_directory_uri() . $path . '" alt="' . $alt . '" ' . $image_attributes[3] . ' loading="lazy">';
			$output .= '</picture>';
		} else {
			$output .= '<div class="' . $class . '">';
				$output .= '<img src="' . get_stylesheet_directory_uri() . $path . '" alt="' . $alt . '" ' . $image_attributes[3] . ' loading="lazy">';
			$output .= '</div>';
		}

	}

	return $before . $output . $after;
}

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

Прошу заметить, что в функции используется корень папки темы, если же у вас изображения лежат, например, в папке uploads, то вам стоит переписать функцию с использованием wp_upload_dir().

Из не обязательных параметров вы можете передать alt изображения, дополнительный класс в контейнер и какие-то оборачивающие теги.

Теперь посмотрим на примере, как мы можем вывести небольшой массив изображений из папки:

$images = [
	'kreativnie-natyazhnie-potolki-41.jpg',
	'natyazhnoi-potolok-v-komnate-9.jpg',
	'mnogourovnevoe-osveshchenie-v-interere-13.jpg',
];

echo '<div class="row">';
foreach ( $images as $key => $image ) {
	echo get_webp_from_folders( $image, '/data/images/', '/data/images-webp/', get_the_title(), 'aspect-ratio', '<div class="col-12 col-sm-6 col-lg-4">', '</div>' );
}
echo '</div>';

Класс aspect-ratio делает изображения одинаковых пропорций следующим образом:

.aspect-ratio
	position: relative
	display: block
	padding-bottom: 66.6%
	height: 0
	overflow: hidden
	> *
		position: absolute
		top: 0
		left: 0
		bottom: 0
		right: 0
		width: 100%
		height: 100%
		border-width: 0
		outline-width: 0
		object-fit: cover

С недавнего времени в css для этого существует специальное свойство aspect-ratio:

.aspect-ratio
	aspect-ratio: 16/9
	object-fit: cover

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