Изображения в формате webp

Применение

Если у Вас уже есть изображения в формате .webp просто добавляйте их на сайт к уже существующим .jpg или .png с помощью тега picture.

Новые браузеры поймут, что нужно брать .webp старые загрузят .jpg/.png

<picture> <source type="image/webp" srcset="img/heihei_ru_logo.webp"> <source type="image/jpeg" srcset="img/heihei_ru_logo.jpg"> <img src="img/heihei_ru_logo.jpg" class="heihei--logo" alt="HeiHei.ru logo"> </picture>

Конвертация в .webp

Если Вам нужно конвертировать картинки в формат .webp могу предложить довольно простой метод.

Скачиваете cwebp.exe. Где это можно сделать читайте здесь

Создаёте пусту папку, кидаете туда cwebp.exe и все нужные фотографии и картинки.

Создаёте в этой же папке файл converter.ps1 и вставляете туда следующий код

Powershell скрипт

$dir = "." $images = Get-ChildItem $dir foreach ($img in $images) { # output file will be written in the same directory # but with .webp extension instead of old extension $outputName = $img.DirectoryName + "\" + $img.BaseName + ".webp" # copy-paste the path to cwebp program # and set its input and output parameters # more options https://developers.google.com/speed/webp/docs/cwebp .\cwebp.exe $img.FullName -o $outputName }

Открываете PowerShell, переходите в эту папку и выполняете команду

converter.ps1

🛠	Полезные советы
🖽	Html
🖌	CSS
	Joomla
	URLencode
↬	Переадресация страниц сайта
↔	Адаптивный дизайн сайтов
	Настройка почтового ящика на Яндекс
	Какой хостинг выбрать
	Как перенести сайт
	Яндекс Метрика
	Разница между POST и PUT
	Word Press
	SEO
	Тестирование сайта
	A numeric character reference expanded to the C1 controls range.
	JavaScript
	.webp

Если остались вопросы - смело задавайте их в комментариях.