Какие браузеры поддерживают webp
Подскажите какие из топовых браузеров не поддерживают формат изображений webp? Или уже все поддерживают и можно их использовать?
Конечно, все ломанулись с jpg и png бежать на таинственный webp. Учитывая, что иногда нужна прозрачность, то webp не всегда и подойдет. Да и нахер он нужен? Тесты проводили. По-моему бред. Попробуйте сжать картинку webp и jpg и сравните вес. На мой взгляд, разница будет мелочной. А если уж вашему посетителю прямо так скорость важна, то уберите нахрен тогда всю графику с сайта, в том числе рекламу. Будет как документ в Word, только со ссылками, и грузиться быстро будет. В 21 веке всё о скорости интернета думают.
webp прозрачность поддерживает. Соотношение качество/вес картинки тоже на высоте, в отличи от jpeg, который ложает на красных и голубых тонах и даёт мусор. А вот с поддержкой браузерами - беда. Помимо Apple, проблема и с осликом IE, который никак не отомрёт. По поводу скорости загрузки. Скорость загрузки страницы (читайте страниц сайта), один из главных факторов ранжирования в поиске. Долго грузиться = клиент уходит. Интернет-пользователь ждать не любит. Это касается в первую очередь пользователей мобильного интернета.
Согласен с Vantysiker - новый формат не годится. Если сравнивать картинки, сжатые до одинакового размер, то он в качестве не выигрывает. Если webp-ом сжимать сильнее, то получается пластмассовый вид. Я отказался от него.
Живем в 21 веке, развитие интернет технологий развивается с приличной скоростью, в центре пустыни Сахара можно спутниковый интернет словить со скоростью 5 мб. сек. а Вы как в 18 ом веке картинки сжимаете. "колхоз" Вам самим не смешно?))
Прежде чем критиковать, съездите в "колхоз" (деревню, село, провинциальный городишко) и проверьте скорость интернета. А узнав помалкивайте про 21 век.
Я не критикую, а правду говорю. А в самом заброшенном "колхозе" ребята подключаются к спутнику и самодельные вай фай раздают. , но это мы говорим об 3 х процентном населении, а вы сжимаете картинки для тех 50 % пользователей у которых интернет выше 50 мб.с. А вы делаете тоже самое, как заливать в мотор авто не настоящее моторное масло, а подсолнечное. Как все запущено.
Ага, особенно хорошо работает спутниковый интернет в туман и низкую облачность. А спутниковый трафик безлимитный уже? И стоит он копейки, правда?
И все равно они при тумане умудряются войти в тормознутый перегруженный Фейсбук который сам по себе не собирается подстраиваться под приказы гугла, Будет он Вам еще картинки сжимать..Может Контакт начнет музыку MP3 в моно полифонию с битрейтом 16 сжимать? Посмотрите на крупные посещаемые сайты им похер на оптимизацию и правила гугла Пусть гугл сам свой Ютюб и рекламу Ад Сенс в webp сжимает.
Россия находится в мезозойской эре. Перестаньте смотреть рашка 24 и выйдите на улицу и посмотрите на развалины этого колхоза.
Бред, сейчас у каждого второго, если не первого айфон, у меня 70 процентов посетителей с эпла, заходят именно фотки посмотреть.
Лучше старых проверенных jpg ничего нет. Отлично индексируются, а размер можно уменьшать в программах, при чем пакетно, а не по одной штуке
эх, можно использовать сразу два формата
для всех браузеров использовать webp
для safari прописать путь к файлу jpg/png
При чем тут скорость интернета? Важна скорость загрузки сайта. Скорость загрузки сайта зависит от разных факторов, а не только от контента. А вообще рекомендации даются не просто так. Но на данный момент проще не использовать этот формат. Если не "вылизывать" сайт под Google.
Скорее всего - вы правы. "Партия сказала - надо". Придется, рано или поздно, выполнять.
Не поделитесь - конкретикой? Практикой перевода.
1/ Все/нет браузеры понимают формат без дополнительных "разъяснений"? (Хром, FireFox, Яндекс)
2/ Самый простой/производительный конвертор.
В Сети много разного и разноречивого. Пробовал, "без фанатизма". FF - не кушает новые форматы, навскидку. Нужно как-то наладить - "конвейер", упростить процесс. Картинок - десятки тысяч, надо с чего-то начать/пробовать.
Есть личностные рецепты-рекомендации? Не "секретные" :)
Спасибо.
Я не спрашивал - зачем, только - как.
Правильно я понимат, что картинки типа .jpg в коде тупо меняются на .webp и не прописывается более - ничего? (естественно, что картинки предварительно конвертируются и "заливаются" на сервер :) )
зы1: FireFox юзаю - я, хотя и не достиг указанного возраста :) Зачем: удобный и привычный инструмент вебмастера, десять лет пользования = привычка. Хром мне не понравился.
Забавно, что Оперу - юзают два моих приличных клиента, тоже еще не впавших в маразм. Приходится считаться и с мнением меньшинства. Не у всех сайтов аудитория - молодежная. Иногда пара-тройка "нестандартных" посетителей "перевешивают" - тысячу отформатированных.
У всех своя срецифика. Хотя мобильный траф на всех проектах перевалил за 50%, с этим надо считаться.
зы2: ВСЁ заменить пока прблематично будет, ни один популярный скрипт фотоальбомов - пока не поддерживает новые форматы. Желающих прописать плагины/хаки - пока немного, результаты - сомнительны. Есть, но мало и результат - не в адеквате.
Странно, но и разработчики шаблонов для популярных cms - не особо "рвутся" в новый формат. В .svg - вижу часто, .webp - пока не встречал (хотя - может и есть уже, давно не юзал новейших шаблонов).
Ладно. Спасибо за ответ, хоть он ничего нового не привнес. Спросил конкретику, получил - "бла-бла" :)
yootheme - решили данный вопрос. У них все просто: загружай любой формат из поддерживаемых, а скрипт делает остальное :) Если используется хром - один формат выводит, если сафари - другой. Скорость загрузки джумла 3 в зеленой зоне (выше 90)
Темой раньше уже озвучил что занялся проблемой определения браузером поддерживаемости формата.
но нужно ли оно вообще в 2020? может уже можно в наглую webp использовать, не боясь за то, что его не откроет?
если смотреть суммарно на все актуальные устройства, включая различные браузеры с разных платформ на ПК и смартфоны, с их вшитыми браузерами - какой шанс возникновения проблемы?
Вам денег больше будут платить, если картинки будут в webp или трафика больше?
webm круче всех да? Нет. И во многих случаях вообще НЕТ и даже хуже.
Вам денег больше будут платить, если картинки будут в webp или трафика больше?
webm круче всех да? Нет. И во многих случаях вообще НЕТ и даже хуже.
реализация для личностной сатисфакции от бесцельно поставленной и решенной задачи
но кстати спасибо за табличку
Смысл. когда есть jpg, png
Смысл в том, что картинки в 2 раза меньше весят, следовательно страница быстрее загружается.
Artyom2222:
Смысл в том, что картинки в 2 раза меньше весят, следовательно страница быстрее загружается.
Наглая ложь. Изучите доклад, всё по полочкам рассказано.
Конечно, если JPG не оптимизировали, а его сразу загнали в webp конечно он будет меньше весить.
Но кто мешает этот jpg оптимизировать то?
Webp хорошо жмется, поддерживает прозрачность. В 2020 его можно использовать для сайта без опаски с одним условием! В Safari он работать не будет! (либо доставлять) и вам нужно делать копию еще и в PNG.
Сколько я не тестировал, Webp уделывает PNG в размере, как не крути, при сносном визуальном качестве цветов. + формат относительно свежий, относительно других устоявшихся форматов и развивается!
Попробуем подрезать качество, уменьшение цветности 76кб
А это WebP, цветность не уменьшал, качество не крутил 14 кб
Итог. Разница от оригинала в 10 раз пожало, Если ужимать PNG, то видна потеря качества, либо сжатие будет не таким ощутимым. На картинке после сжатия PNG это заметно по морде.
LEOnidUKG, я бы не стал доверять яндексу в их потугах. Google разработчик webp и топит за этот формат. Только вот у меня одно но, под какой лицензией распространяется этот формат и с какими юридическими последствиями в будущем. Сами библы пока что BSD license.
Аналогичный пример можно сделать и с JPG, его кстати он тоже уделывает в сжатии (ИМХО), если покрутить качество. Если JPG при потере качества добавляет резкость (обычно), то webp начинает мылить и иногда это мыло отыгрывает как фотошоп, улучшает фотографию, а не уродует ее резкостью и шумами.
Пожали как могли, 30 кб квадраты не бросаются в глаза
Ну и webp 20 кб, можно пожать и ниже, вкусовщина конечно, но по дефолту без ужима формат дает меньше 30 кб
Давно забил на WebP, а вот прочитав доклад "Картинки как коробки - что внутри?" узнал про imgproxy - стало интересно, попробую заюзать, надо будет только отдельный VPS прикупить.
SocFishing:
Webp хорошо жмется, поддерживает прозрачность. В 2020 его можно использовать для сайта без опаски с одним условием! В Safari он работать не будет! (либо доставлять) и вам нужно делать копию еще и в PNG.
webp Опубликован: 30 сентября 2010
P.S. популярность google+ среди соцсетей была по % куда больше, и все равно закрылось
SeVlad, я сделал скриншот! потому как imgur не поддерживает размещение webp на загрузку. Это нужно понимать, а не косячить фразами "Врать будешь домохозяйкам - мож они они поведутся". Всё нормально?
LEOnidUKG, google пока не может перейти в этот формат из-за своей популярности, так как поддержка jpg повсеместная, а вот webp на старых устройствах не работает и на части новых устройств. Тот же IE например, сколько его не ругать. Насчет минусов, я не за рейтинг на форуме пишу, а пишу свое ИМХО. Ровным счетом все равно, так как понимаю, что тут гнили много.
webp начиная с 2010 несколько раз обновлялся и улучшался. Подробнее описание webp. Нужно смотреть не про появление формата, а про libwebp chromium,libwebp.
Насчет поддержки. С его помощью можно использовать для отдачи WebP и, если формат не поддерживается браузером, отдавать ему JPEG, PNG или другой формат.
ИМХО кто считает не так, то мимо. Я не желаю разводить срач, а пишу свое мнение и проверяю для своих нужд.
И это ещё одна веская причина забыть и забить на webp. Его не только imgur не поддерживает, но и много кто ещё. (вот напр в этот форум не вставишь вложением ;))
SocFishing:
Это нужно понимать, а не косячить фразами "Врать будешь домохозяйкам - мож они они поведутся". Всё нормально?
Куда уж нормальнее - ты показываешь png, а не webp. Так? Так. Враньё? Враньё. А что ты там себе думал - то никому не интересно. А зачем делал скриншот webp-а - и вовсе странно.
Нужно понимать, что если ты используешь webp на сайте, то нужно ещё заморочить отдачей jpg/png. А это значит - затратить ресурсы. И порой не малые. Но по факту - бесполезные, зря потраченные.
Хоть в перлы записывай :)
Может и имеет смысл, если у тебя на сайте например 3млн новостей и все с фотками, тогда любая оптимизация имеет смысл. Те же РИА например так делают: отдают webp, но если зайти например с какого-то старого браузера, то показывают jpg.
В общем случае вообще не вижу смысла связываться с webp.
melkozaur:
Те же РИА например так делают: отдают webp, но если зайти например с какого-то старого браузера, то показывают jpg.
И имеем два варианта:
1. Мы храним ВСЕ фотографии в 2-х вариациях, ИТОГ: В два раза больше места занимают фотографии
2. Мы в реальном режиме конвертируем фотографии, ИТОГ: Бешеная нагрузка на сервер при большом количестве клиентов
В каком из этих вариантов экономия чего-то, не понятна. webp ради webp, отличная технология 🤪
SeVlad, что фраза - блистание умом. Что не
И это ещё одна веская причина забыть и забить на webp. Его не только imgur не поддерживает, но и много кто ещё. (вот напр в этот форум не вставишь вложением )
Скрин наглядно показывает качество искажения после сжатия. Это нужно понимать) что наглядно было показано. Если бы я залил webp, то яблочники или челики на осликах не увидели бы картинки. Но кажется блистание умом это я погорячился.
Куда уж нормальнее - ты показываешь png, а не webp. Так? Так. Враньё? Враньё. А что ты там себе думал - то никому не интересно. А зачем делал скриншот webp-а - и вовсе странно.
Это все дело времени. Поддержка webp есть в FF Opera Chrome и все сопутствующие Chromium. Для Mac требуется поставить фикс. Сейчас это больше не под массовое сжатие, а в качестве оптимизации. На обычном сайте доля картинок в интерфейсе может начинаться от 1 мб. Этот размер можно сократить как минимум в половину без потери качества. Так что имхо это стоит того.
Важное о перспективном формате WebP: в чем преимущества, как конвертировать изображения в WebP, как использовать этот формат на сайте для разных браузеров.
В статье:
В первом выпуске «Спроси PR-CY» пользователь с никнеймом Илья задал вопрос эксперту:
«Перспективные форматы картинок в ближайшем будущем? Может, уже сейчас начинать заливать WebP или другие форматы?»
Экспертом выступал Андрей Прудко, директор студии интернет-маркетинга и веб-брендинга «Большая Буква», и вот что он ответил:
«Google активно продвигает WebP и будет продолжать это делать. Но, как известно, данный формат поддерживают 75% браузеров.
Хорошим решением будет наличие нескольких форматов изображений и выдача нужного типа изображения по ответу браузера — поддерживает WebP или нет. Да, это приведёт к увеличению количества файлов и заполнения дискового пространства, но даст определенные преимущества перед теми, кто не пользуется новыми форматами.
Положительное влияние наличия формата WebP на сайте на поисковую выдачу уже замечено».
Эксперт советует применять формат WebP на сайте, но использовать его среди прочих. Разберемся, что это за формат и чем он отличается от других.
Что такое WebP
WebP — формат графических изображений. В 2010 году Google разработал его в качестве альтернативы для PNG и JPEG.
Как это работает
Сжатие в этом формате основано на алгоритме сжатия ключевых кадров видеокодека VP8, а упаковывается в контейнер на основе RIFF.
При сжатии с потерями применяют предиктивное кодирование: для предсказания пиксельного блока используют значения пиксельных блоков по соседству, затем разницу кодируют.
При сжатии Lossless, то есть без потерь, используют известные фрагменты изображений и на их основе реконструируют пиксели. Если совпадений для реконструкции нет, используют локальную палитру.
Преимущества и недостатки WebP
Плюсы формата:
- сохраняет такое же качество при меньшем размере картинки: при сжатии с потерями размер будет в среднем на 30% меньше, чем в JPEG, а без потерь в среднем на 25% меньше, чем PNG. Подтверждающее исследование в следующем пункте статьи;
- сочетает в себе все преимущества PNG, JPEG и GIF, поддерживает прозрачность и анимацию.
Недостатки:
- формат поддерживают не все браузеры;
- в пиксельной графике может потеряться часть цветов;
- при сжатии с потерями изображение может выглядеть плоским.
WebP vs JPEG: данные исследования
В январе 2019 года Google обновили исследование, в котором сравнивали сжатие изображений с помощью WebP и JPEG.
Как проводили исследование
Использовали два типа оценок. В первом случае генерировали изображения WebP того же качества, что и изображения JPEG, а затем сравнивали размеры получившихся файлов. Качество измеряли с помощью индекса SSIM, для вычисления использовали общедоступную реализацию на C ++.
Для второй оценки анализировали графики качества и битов на пиксель (bpp) для WebP и JPEG. Эти графики показывают компромисс между искажениями и скоростью для обоих форматов.
Изображения брали из нескольких наборов:
Результаты исследования
По первому методу оценивания выяснилось, что при одинаковом качестве средний размер файла WebP на 25-34% меньше по сравнению с размером файла JPEG.
Средний размер файла с одинаковым качеством, JPEG Q = 75
По методу подсчета битов на пиксель графики показали, что при одинаковом индексе SSIM для сжатия WebP нужно меньше битов на пиксель, чем для JPEG.
График для набора данных Kodak
По итогу исследования ясно, что WebP может обеспечить лучшее сжатие изображения по сравнению с JPEG.
Какие браузеры поддерживают WebP
Формат поддерживают Chrome, Opera, браузер Android и остальные популярные браузеры, последним о поддержке в Firefox объявили Mozilla. Остались браузеры Apple, которые не хотят включать поддержку этого формата. Причиной может быть то, что компания разрабатывает более современный AVIF.
Как конвертировать изображения в WebP
Рассмотрим несколько способов для конвертации изображений. Это можно сделать с помощью онлайн-сервисов, приложений с установкой, через инструменты командной строки.
Онлайн-сервисы
Squoosh
Squoosh конвертирует и сжимает изображения онлайн. Он справится с большими фотографиями, иллюстрациями, скриншотами и иконками в SVG, работает с разными форматами. Можно сравнивать варианты картинки, контролировать артефакты, настраивать нужный уровень сжатия и следить за итоговым размером изображения.
Сжатие JPG в WebP в Squoosh
Файл 1,51 MB после конвертирования стал весить 185 kB.
Online-Convert
Настройки конвертирования JPG в WebP в сервисе
После конвертирования файл стал весить 238,21 kB.
Zamzar
Простой онлайн-сервис Zamzar для конвертирования изображений. Перетаскиваете изображение в поле, выбираете нужный формат из списка и нажимаете на конвертирование, других настроек нет. Дальше останется скачать готовый файл.
Интерфейс приложения
Исходный файл весил 507,88 kB, итоговый 355 kB.
Приложения
Webpconv для Windows
Приложение Webpconv для конвертирования разных форматов в WebP. Работает с установкой и портативно. Webpconv может конвертировать несколько файлов одновременно, кодировать JPEG и PNG в WebP и обратно. Есть меню для настройки кодирования, чтобы получить более качественный файл и настроить итоговый размер.
Окно настройки кодирования
Photoshop-плагин для Windows и Mac
Для редактора Photoshop есть отдельный бесплатный плагин, позволяющий открывать и сохранять 24-битные изображения WebP. Плагин поддерживается версиями Mac CS2 / 3/4, Mac CS5 / CS6 и Windows (32 и 64 бит). На Photoshop CC не работает.
Выбор формата
WebPonize для Mac
Для работы с изображениями для Mac есть инструмент WebPonize — проект с открытым исходным кодом на Github. После установки можно конвертировать изображения в в формат WebP на Mac — просто перетащить изображение в поле.
Демонстрационное изображение WebPonize
Sketch для Mac
Если вы работаете в платном редакторе векторной графики Sketch, изображения оттуда можно экспортировать сразу в WebP.
Экспорт изображения в редакторе
Редактор предназначен для работы с устройствами на базе MacOS, доступна бесплатная версия на 30 дней.
Инструменты командной строки
Форматы JPEG, PNG и TIFF в WebP конвертируют с помощью утилиты cwebp, а декодируют с помощью dwebp.
Инструмент cwebp — самый популярный для кодирования изображений в файлы формата WebP. После установки утилиты можно настраивать уровень качества изображения, задавать имена файлам и работать с другими опциями.
Декодирование работает по такому же принципу.
Инструменты Node
Самые популярные библиотеки для конвертации — Imagemin с плагином imagemin-webp. Пример скрипта для конвертирования в WebP всех файлов форматов PNG и JPG из папки:
Этот скрипт можно использовать из командной строки или с помощью сборщика:
Настройка для Mac OSX
Для настройки у вас должен быть установлен Xcode. Порядок дальнейших действий:
- Загрузите и установите MacPorts.
- Запустите Terminal.
- Обновите MacPorts до последней версии: введите "sudo port selfupdate" и нажмите ввод.
- Для установки libwebp (WebP Library) введите "sudo port install webp" и нажмите ввод.
Как использовать WebP на сайте
Если вы хотите использовать формат WebP для браузеров, сделайте копию всех изображений в формате WebP и создайте скрипт, который будет проверять браузеры пользователей на поддержку WebP. Если поддержка есть, пользователь увидит картинки в этом формате.
При этом нужна система с резервными вариантами (fallback), на случай, если пользовательский браузер не воспринимает WebP.
Проверка форматов браузера
Способ, где скрипт проверяет браузер на поддержку формата и при ее наличии отдает WebP.
Атрибуты элемента source для определения формата и условий использования:
- type — MIME-тип формата;
- srcset — путь к файлу изображения, можно использовать несколько файлов с разными размерами и PPI — плотностью пикселей;
- sizes — список размеров каждого файла;
- media — запрос, определяющий источник для вывода картинки.
Специалист по оптимизации Деми Мурыч не советует использовать этот способ, так как он приведет к увеличению узлов в DOM-дереве на каждое изображение, а это увеличит расход памяти и замедлит скрипты.
Согласование при помощи заголовка Accept
Способ, подразумевающий использование заголовка Accept.
Браузеры передают заголовок Accept в виде строки. Для браузера Opera нужно указать все форматы:
Для Chrome нужно отдельно указать только WebP:
Можно настроить автоматическую передачу WebP с веб-сервера. Конфигурация в Nginx и Apache будет аналогичной. В файл конфигурации добавляем подобную запись:
Если в Accept нет поддержки WebP, то сервер будет передавать файлы других форматов.
Формат WebP можно назвать перспективным — он позволяет облегчить изображение, сохраняя его качество, а значит уменьшить размер страницы сайта. Но такой формат поддерживают не все браузеры, поэтому рекомендуем иметь несколько вариантов картинок и настроить веб-сервер так, чтобы выдавать пользователям картинки в WebP, если поддержка есть.
Для начала расскажем преимущества использования изображений в WebP.
1. Высокое сжатие изображений с сохранением качества
2. Более быстрая загрузка страниц при использовании WebP
3. Поддержка alpha канала
В итоге WebP сохраняет и объединяет преимущества .jpg и .jpg формата и является более легкой их версией.
WebP поддержка браузерами
Полная поддержка:
Edge версии 18+, начиная с 2018 года
Firefox версии 65+, начиная с 2019 года
Chrome версии 32+, начиная с 2014 года
Opera версии 19+, начиная с 2014 года
Safari iOS, iPad Os версии 14+, начиная с 2020 года
Opera Mini, все версии
Android Browser версии 4.2+, начиная с 2013 года
Opera Mobile, все версии
Частичная поддержка:
Safari macOS версии 15+, macOS 11 Big Sur и более поздними версиями.
Отсутсвие поддержки:
Internet Explorer всеми версиями
Проблемы использования WebP в 2021
К сожалению не все браузеры поддерживают использования изображений в формате WebP, к примеру, macOS Safari ниже 15 версии и macOS до Big Sur не поддерживает данный формат, поэтому при верстке необходимы некоторые ухищрения. О них вы узнаете в нашей статье.
Использование WebP в CSS
Первый и один из самых легких способов использовать новый формат в CSS – это использовать js библиотеку modernizr.js
Как это использовать:
Выбираем пункт Webp и нажимаем кнопку “Build”, затем переносим скачанный файл в папку с js файлами, подключаем скрипт на странице.
При загрузке страницы в разных браузерах вы увидите классы no-webp и webp, что соответствует поддержке этого формата браузера.
В CSS необходимо написать следующее правило
Второй и менее очевидный, использовать правило @supports
Третий способ, использование библиотек определения браузера посетителя
Для php можно использовать browser_detect.php
Js - user.browser.family
Использование WebP в верстке html
Тут все гораздо проще и поддержка есть у всех браузеров, кроме IE до 11 версии включительно.
Тег < picture >дает возможность определить несколько типов изображений для отображения, если поддержка webp имеется, будет загружена версия webp.
Так же данный тег дает возможность для разных размеров экрана отображать разные изображения.
Насколько быстрее может стать загрузка страницы с использованием формата WebP?
Приведем пример загрузки в браузере Google Chrome и macOS Safari 14 версии
*Все браузеры последних версий на начало февраля 2021 года
Тест в браузере Google Chrome
Скорость загрузки в данном примере составляет 734ms, вес страницы 1.7 MB
Тест в браузере Mac Os Safari до 14 версии
Здесь скорость загрузки превышает одну секунду, вес страницы 4.90 MB, что практически в 3 раза больше.
Тест в браузере Mac Os Safari 15 версии
Скорость загрузки - 611ms, вес страницы 1.57 MB, что в 3.1 раза меньше, чем в предыдущей версии Safari
Читайте также: