Внедрение изображений формата WebP
-
Здравствуйте,
Хочу внедрить на сайт формат изображений WebP.
Хочется, чтобы изображения в WebP могли загружаться в медиа менеджере
или чтобы при загрузке JPG и PNG налету конвертировались в WebP …Подскажите решения, которые используете вы.
Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]
-
Здравствуйте.
Действительно, время webp формата еще не пришло. Еще пару лет подождать надо.
Интересно послушать Вадима Макеева https://www.youtube.com/watch?v=gHLPBlzGRT8 в его разборах по сайтам. Посмотрите — интересные видео.Но советы использовать webp формат сейчас — не константа. Технически, это большой гемор, и риски определять браузер и версию чтобы отдавать нужному клиенту именно webp формат. Можно не угадать. Но в этом видео Вадим показывает универсальное решение, хоть и достаточно объемное.
Надо четко понимать — для каких целей, какие форматы существуют. Фото — jpg, анимация — gif, плоские иллюстрации и простые скриншоты и прозрачность — png. Если элементы иконок — то иконочный шрифт, а лучше svg. Возможно даже спрайты svg.
Если у вас картинок (фото) много на странице — то перед загрузкой, конечно, эти jpg стоит оптимизировать. Есть прогрессивный формат jpg — когда они грузятся попиксельно. Редакторы это дело умеют.
Есть плагины, что через сторонние сервисы могут прогонять — если предварительная обработка вам сложна или требует массы времени.Также не стоит забывать про техники отложенной загрузки изображений, если они находятся на текущей странице, но за пределами viewport. Технология lazy load. Так вы не будете пользователю отдавать те картинки, что ему еще не нужны. Плагины для этого есть.
Также не стоит забывать про кеширование статики и настроить на вашем сервере кеширование.
Ну и размеры изображения — не стоит в страницы встраивать полноразмерные изображения на 1900 пикселей в div на 600 пикселей. Используйте ссылку на полное изображение и вставляйте миниатюру. А полноразмерное можно посмотреть через лайтбокс.
В качестве софта я бы порекомендовал вам Software Javier Gutiérrez Chamorro (Guti): FileOptimizer — он отлично сжимает png. С джипегом тоже не плохо работает. Он отлично подойдет когда надо много файлов обработать (пакетная обработка). Ну и конечно GUI интерфейс — никаких консолей и работы через командную строку. Не все гуру консолек. Для обычного пользователя он довольно не плох.
А еще подскажите. Вот у меня на странице записи главная картинка в коде выглядит так:
<figure class="entry-thumbnail"> <img width="735" height="396" src="http://overwatchpro.ru/wp-content/uploads/2018/11/besplatnye-vyhodnye-overwatch-v-noyabre-2018.jpg" class="attachment-mh-edition-lite-content size-mh-edition-lite-content wp-post-image" alt="бесплатные выходные overwatch ноябрь 2018" srcset="http://overwatchpro.ru/wp-content/uploads/2018/11/besplatnye-vyhodnye-overwatch-v-noyabre-2018.jpg 735w, http://overwatchpro.ru/wp-content/uploads/2018/11/besplatnye-vyhodnye-overwatch-v-noyabre-2018-150x81.jpg 150w" sizes="(max-width: 735px) 100vw, 735px"> </figure>
Значит ли это, что у меня грузятся все размеры изображения когда запись открывается?
Делал по совету этого поста
https://wpgutenberg.top/dobavljaem-podderzhku-webp-v-wordpress/
, но сейчас хочу уже без плагинов реализовать. Считаю, что стоит. Это очень сильно упрощает ускорение сайта. А бразузеры — куда они денутся, если Google уже открыто стал ругаться на джипэг, как на устаревший формат. Одно обновление — и будут работать. Вон даже фотошоп — кинул один файлик и на тебе — и сохраняет в веппе, и еще можно уровень компрессии регулировать. Разумеется, сайт показывает 100 из 100 в пэйджспиде, скорость загрузки 1.3 секунды, но еще немного собираюсь ускорить.Конвертировать изображения в webp сразу после загрузки можно с помощью php модуля imagick. Обычно он уже встроен на хостинге, это можно узнать из php_info().
Как делается — https://gist.github.com/egmalt/6da5602efd953d3596ef3391adb10ba2#file-wordpress_webp_thumb_generation
Насчет поддержки браузерами. Используйте тег picture. Там где он не поддерживается загрузится jpg, где поддерживается будет webp. Я тоже в поиске решения, которое бы позволило сделать вывести webp. А если еще можно разные изображения под разную плотность пикселей, то вообще было бы отлично.
Что за профессионалы собрались, которые рассказывают, что не нужно webp использовать? caniuse кидают, 80% поддержки мало? К тому же доля google chrome самая большая, не надо, да?
Выше написали про тег <picture> +1. Если браузер поддерживает — он загрузит webp, если нет, то jpeg/png/запасной вариант.
Что за профессионалы собрались
И вам здравствуйте 🙂
caniuse кидают, 80% поддержки мало?
Это сейчас там 80%, а в ноябре прошлого года, когда был задан вопрос, ни Firefox ни Edge не поддерживали формат.
- Тема «Внедрение изображений формата WebP» закрыта для новых ответов.