Webp — это новый формат изображений, благодаря которому круто уменьшается их размер, а качество остается тем же. Например, png файл размером 1 мб. можно конвертировать в 200-100 кб. файл webp в зависимости от степени сжатия.

Как создавать webp копии?

Для себя я выбрал следующий способ оптимизации изображений. Сразу после загрузки создаются копии изображений в формате webp с помощью php модуля imagick, который используется вордпрессом для генерации разных размеров изображений и встроен практически в каждый хостинг по-умолчанию.

Код, чтобы автоматически создавать webp копии файлов рядом с ними. Код вставить в functions.php. Оптимизировать уже загруженные изображения можно запустив пересоздание миниатюр с помощью Regenerate Thumbnails.

Как выводить изображения?

Минус формата в том, что он пока еще не поддерживается всеми браузерами. Хрому можно передавать webp изображения, а сафари их не прочитает. С помощью тега source или правильно настроив кеширование разным браузерам можно показывать разные изображения оптимизируя время загрузки сайта.

Изображения в <img>

Webp до сих не поддерживается сафари, поэтому в html нужно отдавать одновременно и изображения в обычном формате и в webp. Сделать это можно с помощью тега <picture>.

<picture>
	<source srcset="img.webp" type="image/webp">
  	<source srcset="img.png" type="image/png"> 
  	<img src="img.png" alt="">
</picture>

Хром будет показывать такое изображение в webp формате, а сафари в png.

Изображения в background-image

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

Выберите webp в списке опций и скомпилируйте свою версию библиотеки нажав на build. Подключите скрипт к сайту. Теперь в классе html тега будет показываться поддерживает ли браузер эту технологию или нет.

Теперь каждому браузеру можно отдавать изображения в своем формате.

.block {
    background: url("../img.webp") no-repeat center;
}
.no-webp .block{
    background: url("../img.jpg") no-repeat center;
}

Как ускорить процесс?

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

Php функции

Тег picture с указанием разных расширений изображений и проверкой наличия webp копии на сервере можно выводить с помощью php функции. Например:

<?php
/**
 * Выводит тег picture с нужными размерами и расширениями по ссылке на файл
 *
 * - если рядом с файлом лежит его webp копия, то выведет ссылку и на него
 * - webp должен иметь расширение на конце file.jpg.webp и лежать рядом с файлов в wp-content/...
 *
 * Примеры использования:
 * - <?php gt_picture('../menu.png', 'class__pic', 'меню ресторана'); ?>
 *
 * @param 	string $img 	ссылка на изображение
 * @param  	string $class 	класс к picture
 * @param  	string $alt 	alt к img
 */
function gt_picture($img, $class = '', $alt = ''){
	
	$ext = 'image/' . explode('.', $img)[1]; // расширение файла
	$webp_check_url = $_SERVER['DOCUMENT_ROOT'] . 'wp-content' . explode('wp-content', $url)[1] . '.webp'; // ftp адрес webp копии, не http
	?>
	
	<picture class="<?php echo $class; ?>">

		<?php if (file_exists($webp_check_url)): // проверяет наличие webp копии ?>
	  		<source srcset="<?php echo $imgimg; ?>.webp" type="image/webp">
		<?php endif ?>

	  	<source srcset="<?php echo $img; ?>" type="<?php echo $ext; ?>"> 
	  	<img src="<?php echo $img; ?>" alt="<?php echo $alt; ?>">
	</picture>
	
	<?php
}

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

Шоркоды

Также ускорить процесс набора кода можно поместив вывод picture с web копией в шоркод (сниппет). Как создавать сниппеты в sublime text 3.