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

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

Похожие посты

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

При разработке своих сайтов вам может понадобиться вывести галереи изображений из произвольных папок без их загрузки в библиотеку. Давайте рассмотрим пример, как это сделать с помощью шорткода: Использование: [folder-gallery path=’/data/images/’] Как видите, функция принимает путь до искомой папки (обязательно с открывающим и закрывающим слешем), в функции устанавливаются разрешенные типы изображений и формируется вывод с классами…

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

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

Как изменить robots.txt в мультисайте WordPress

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

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *