Как выключить поддержку webp в браузере
Если вы используете браузер Google Chrome, вы, возможно, заметили, что изображения на некоторых веб-сайтах, например, во многих свойствах Google, таких как Google Play, отображают изображения в формате Google WebP, а не в стандартном формате, таком как JPG или PNG.
Google утверждает, что webp значительно уменьшает размер изображений по сравнению с PNG и JPG. Это уменьшает размер файла по сравнению с PNG изображениями до 26% и до 34% по сравнению с JPG изображениями.
Если вы используете Chrome, вы получаете изображения webp исключительно на этих сайтах, в то время как пользователи Firefox или Internet Explorer получают вместо них стандартные форматы изображений. Рассматриваемые веб-сайты проверяют браузер, к которому вы подключаетесь, и либо доставляете веб-страницы, если они поддерживаются, либо переходите к jpg или png, если это не так.
Хотя это и не является большой проблемой, поскольку большинство современных средств просмотра изображений поддерживают формат webp к настоящему времени, вам все равно может не понравиться это в зависимости от того, что вы делаете с изображениями.
Хотя вы можете просматривать их во многих программах, которые поддерживают формат «из коробки», или установив кодек в вашей системе, который добавляет общесистемную поддержку формата, вы не сможете использовать их во всех программах или сделать их рабочим столом. обои на стену. Если вы попытаетесь, вы заметите, что формат может не поддерживаться.
Конверсия приходит на ум, и такие программы, как XnConvert, поддерживают формат webp, так что вы можете конвертировать загруженные изображения в другой формат изображений. Для этого также доступно множество онлайн-конвертеров.
Это, однако, только решение для периодической загрузки, но если вам нужно регулярно загружать изображения, которые предлагаются только в формате webp, вы, возможно, не захотите идти по этому пути, поскольку это добавляет еще один ненужный шаг к процессу.
Я хотел бы представить вам два варианта, которые вы можете использовать, чтобы избежать сохранения изображений webp и сохранять их как изображения png или jpg.
Как не сохранять изображения в интернете
1. Chrome Сохранить как PNG
Первый вариант - расширение Chrome Сохранить изображение как Png. Он добавляет опцию в контекстное меню браузера, вызываемое правой кнопкой мыши, чтобы сохранить любое изображение, на которое вы наведите курсор мыши, как png вместо формата, в котором он указан.
Хотя я не могу точно сказать, что происходит за кадром, автор отмечает, что он конвертирует изображение на лету. Нет никакого упоминания об удаленном сервисе, который он использует для этого, что означает, что не очень ясно, как преобразование обрабатывается в фоновом режиме.
2. Используйте браузер, который не поддерживает webp
Не все веб-браузеры поддерживают формат webp, и большинство веб-сервисов, которые используют формат webp, вместо этого используют изображения png или jpg, когда такой браузер используется.
Вы можете запустить Firefox или Internet Explorer вместо этого для всех ваших потребностей загрузки изображений, так что изображения автоматически сохраняются как изображения png или jpg.
Если вы используете Chrome, попробуйте расширение User Agent Switcher, которое подделывает используемый вами браузер. Выберите пользовательский агент браузера, который не поддерживает webp, и вы должны получить ту же самую доставку png или jpg, которую получают эти браузеры.
Теперь прочитайте : почему веб-сайт Google Play работает быстрее в Chrome
Стандарт кодирования изображений WebP нельзя назвать новым, его представила Google в уже далёком 2010 году. Однако всё это время использование его было сильно ограничено из-за того, что разработчики браузеров имели собственное мнение по поводу того, какой новый формат изображений должен поддерживать их браузер. Но скоро ситуация изменится, т. к., наконец, поддержка WebP появится на подавляющем большинстве браузеров. Но стандарт WebP рискует стать популярным, будучи уже устаревшим, ведь его конкурент — AVIF, поддерживаемый альянсом большинства разработчиков браузеров, уже в активной разработке.
Поддержка WebP
Несмотря на открытость формата WebP, Firefox долго тянули с внедрением WebP. Разработчики «лисы» долгое время пытались продвинуть формат APNG как замену анимированных Gif, WebP в этом плане мешал продвижению. Кроме того, Mozilla экспериментировала с улучшением алгоритмов сжатия jpeg, и даже представила свой кодировщик MozJpeg. Тем не менее, в кодовую базу Firefox было решено включить, наконец, поддержку WebP, и планируется к релизу в Firefox 65 в первой половине 2019 года.
Microsoft же изначально делала ставку на JPEG XR, и решение не внедрять WebP было скорее политическим. Однако продвижению этого формата помешало то, что этот формат был не свободным от лицензирования, поэтому принятия его сообществом Open Source никогда бы не последовало. Что касательно WebP, взгляд Microsoft на него недавно изменились, и уже внедрила поддержку его в Edge 18.
На данный момент, единственный участник, который пока не планирует включать поддержку WebP в свои браузеры — это Apple, даже несмотря на то, что тестовая поддержка его была в браузере Safari. Причины на то есть, во-первых, у Apple есть собственный формат HEIF, основанный на стандарте видеосжатия HEVC. Во-вторых, в активной разработке формат AVIF, который гораздо современнее, чем WebP. Как будет дальше — покажет время.
WebP уже устарел
Формат WebP основан на алгоритме сжатия ключевых кадров видеокодека VP8. Хотя его эффективность перед JPEG не вызывает сомнений, сам VP8 уже устарел, и есть более эффективные алгоритмы в VP9, HEVC и AV1. Если использование второго не представляется возможным из-за лицензионных составляющих, то последний специально разрабатывается свободным от лицензионных выплат.
На данный момент в альянс Alliance for Open Media который развивает стандарт AV1, входят практически все участники браузеростроения — Google, Microsoft, Mozilla и Apple. Кроме того в альянс входят разработчики чипов, и обещают внедрить аппаратное ускорение, что немаловажно, особенно для мобильных устройств. В целом перспективы AV1/AVIF выглядят радужно, но пока его нет, WebP для изображений выглядит вполне хорошей альтернативой.
последние дни в Хроме стали сохраняться картинки в каком-то формате WEBP, который стандартные редакторы не открывают. Если что-у меня 8 винда. Что делать, как этот ужас отключить?
судя по тому, что с разных сайтов фотки сохраняются в разных форматах, это проблема не в браузере, а в сайте-который фотки в данном формате хранит.
Фотошоп открывает, любой софт на маках тоже его открывает. Также для винды можно скачать отдельный webp-кодек. Сейчас почти все мобильные приложения и онлайн-сервисы умеют работать с webp картинками, как и почти весь актуальный софт.
Это новый формат вместо jpeg, дающий меньше потерь при меньшем объёме. Проблема с ним только на старых версиях винды и со старым софтом.
я пользуюсь обычным Xnview для быстрой обработки фоток, не буду же я фотошопить мелкие фотки, где только надо отрезать рамку или убрать лишние детали.
Жеребьян Дестребьян Жюримар Пасижюр Искусственный Интеллект (110420) Это приложение никогда уже не научится webp, проект заброшен. Для вас временным выходом может стать расширение-конвертер для хрома, хотя jpeg в мире становится постепенно всё меньше и это решение не навсегда.
Жеребьян Дестребьян Жюримар Пасижюр Искусственный Интеллект (110420) Да я и не против. С оговоркой что местоположение поменять можно. Карты бинг хороши тем что они же подгружаются в MS Flight 2020, и с процедурной генерацией на их основе выходит неплохая детализация в симуляторе. А другие карты не прикрутишь.
переименуй расширение на jpeg в каком-нибудь вьювере картинок.
Там типа сменить формат - и выбери джипег.
переименовываю! Через AcdSee, например. Не вручную, а через редактирование. не матерись.. тебе помочь пытаются.
WebP — формат сжатия изображений с потерями и без потерь качества, предложенный компанией Google Inc.
Никак не отключить. Только редактором перекодировать. Я плагин в фотошоп ставила отдельный.
Svetlaya Просветленный (35981) Иногда, когда просто перетаскиваешь картинку с браузера на рабочий стол, он сохраняется в вышеупомянутом формате. Но если сделать все по правилам (правой кнопкой мыши - сохранить изображение) то всё будет ОК)))
Loony Искусственный Интеллект (551311) Тут ничем помочь не могу - все вопросы к разработчикам этого корявого браузера.
обратила внимание-эта проблема не на всех сайтах-к примеру, с фэцсбука фотки сохраняешь-в jpeg идут, а с авито-в webp. приплыли (((
Loony Искусственный Интеллект (551311) Потому что, постепенно отказываются от этого формата. И если на сервере нет картинки в таком формате, то только конвертирование.
Проблема с оптимизацией изображений в том, что мы хотим сохранить размер изображений, не жертвуя при этом качеством. Предыдущие попытки создать типы файлов, которые бы оптимизировали изображения лучше, чем стандартные JPEG, PNG и GIF, успеха не возымели.
Знакомимся с WebP
WebP — формат изображений, созданный в 2010 году и развиваемый компанией Google. Этот формат обеспечивает сжатие изображений как с потерями, так и без потерь. Некоторые крупные компании, такие как Google, Facebook и eBay, советуют использовать данный формат для сжатия изображений.
В нашей компании мы всегда экспериментируем с методами улучшения производительности сайтов. Мы запустили несколько A/B-тестов для понимания влияния WEBP на качество изображения и каким способом его лучше внедрить в проекты наших клиентов.
- WebP сжимает изображения без потерь на 26% лучше, чем PNG.
- WebP сжимает изображения с потерями лучше, чем JPEG на 25-34% при одинаковом индексе структурного сходства (SSIM)
- WebP поддерживает прозрачность без потерь (известную, как альфа-канал) при увеличении размера всего лишь на 22%.
Качество изображений
WebP использует новый алгоритм сжатия, поэтому искажение (т.е. деформация и ухудшение качества) выглядят иначе относительно других типов файлов. WebP оставляет четкие края фотографии, но при этом ухудшается детализация и текстура, что неизбежно при сжатии с потерями. В то время как сопоставимый JPEG-файл показывает дрожание на сплошных участках изображения, WEBP может похвастаться гладкими переходами даже на самых низких настройках качества.
Недостаток этого в том, что лица людей могут выглядеть пластиковыми или постеризированными при низкой настройке качества.
Разница в качестве между JPEG и WebP. (Полная версия)
Разница в качестве между JPEG и WebP при приближении. (Полная версия)
Есть еще пара особенностей формата WebP. Настройки сжатия не повторяют в точности таковые в JPEG. Не стоит ожидать, что 50%-качество JPEG будет соответствовать 50%-качеству WebP. В случае в WebP качество падает довольно стремительно, так что начинать лучше с наибольших значений и постепенно их уменьшать. Другой плюс в пользу WebP — способность добавлять маску альфа-канала, прямо как в PNG. В отличии от конкурирующего формата, изображение формата WebP вы можете сжать до одной десятой размера изображения в формате PNG. Это действительно то, чем выделяется WebP.
Один пример из жизни: файл PNG размеров 880Кб (24-битное изображение с альфа-каналом) было сжато до 41Кб — сжатие в 95%! Хоть это и не обычная ситуация, но возможности WebP видны налицо.
Разница в качестве текстур. (Полная версия)
Для дальнейшего уменьшения размера файла, мы можем не включать метаданные убрав галочку “Сохранить Метаданные” в окне сохранения редактора изображений. Для еще больших результатов, можно выбрать “альфа-канал с потерями”.
Настройки качества для альфа-канала применяются и к самому изображению. Например, 50%-качество изображений будет иметь 50%-качество альфа-канала. В нашем тестировании, мы ожидали искажения края маски, однако были также заметные изменения всего изображения. Конечно, это вариант для дальнейшего уменьшения размера, но тогда стоит очень тщательно следить за качеством изображения.
Также, обратите внимание на нежелательные полосы в альфа-канале.
Разница в качестве альфа-канала. (Полная версия)
Мы очень обрадовались, когда обнаружили Плагин для Photoshop для поддержки WebP. С ним можно легко настраивать качество WebP-изображений. Правда, интерфейс плагина оставляет желать лучшего. В настоящее время вы не можете просмотреть изображение для оценки параметров качества.
WebP Плагин для Photoshop.
В качестве обходного пути, можно сравнить файлы в Google Chrome. Открытие диалогового окна «Сохранить» также неудобно в Photoshop. Для этого мы назначили горячую клавишу, чтобы не использовать постоянно диалоговое окно. Несмотря на неудобства, это все-таки стоит того.
С отличными показателями сжатия, хорошим качеством и альфа-каналом, WebP выглядит хорошим соперником текущим форматам изображений.
Реализация
Определив, что WebP может быть эффективным инструментом для нас, мы обратились к нашим разработчикам для реализации этого формата. WebP полностью поддерживается браузерами Chrome, Opera, Opera Mini, Android-браузер и Chrome для Android. Firefox, Internet Explorer и Safari не имеют полной поддержки, хотя у Firefox с WebP своя история. К счастью, есть несколько способов отображать WebP в этих браузерах.
Мы нашли 3 способа поддержки этого формата. Нам важно было понимать, что мы используем лучшее средство относительно размера страницы, помня, что индекс скорости — это ключевая метрика и принимая во внимание любые необходимые полифиллы Javascript.
Мы провели 4 теста, чтобы определить, какой формат нам лучше подходит. Первое использовало JPEG как контрольный образец, а остальные 3 использовали подходы, описанные ниже. Мы использовали JPEG-изображение и WebP-изображение одинакового качества (269Кб JPEG и 52Кб WebP).
Во втором тесте, мы включили WebPJS, полифилл размером 67Кб, созданный Домиником Хомбергером. Он обеспечивает поддержку WebP во всех современных браузерах, даже в IE6 и выше. Полифилл удобен тем, что не нужно менять img-тэг в вашем коде, нужно просто изменить расширение изображений с .jpg и .jpg на .webp.
Следующий подход был в использовании Picturefill, полифилла, который позволяет вам использовать тэг, даже когда он полностью не поддерживается. С его помощью можно использовать для отдачи WebP и, если формат не поддерживается браузером, отдавать ему JPEG, PNG или другой формат.
Последний тест было в использовании файла .htaccess на сервере для внедрения WebP. Этот вариант был разработан Винсентом Орбахом.
Используя его, код в .htaccess смотрит, есть ли WebP-версия каждого изображения на странице. Если браузер поддерживает WebP и WebP-изображение доступно, отдается оно, а не JPEG или PNG. Это удобно и не нужно менять разметку веб-страницы.
После просмотра результатов, мы заключили, что WebP-полифилл (из второго теста) — наиболее легковесное решение, которое работает во всех браузерах, но мы не были удовлетворены метрикой индекса скорости при использовании этого метода. WebP-полифилл отображает изображения хуже, чем контрольный тест JPEG и хуже других реализаций, кроме iOS. Мы склонны использовать эту реализацию из-за лучшей поддержки браузерами.
Также было замечено, что на iOS-устройствах файлы занимали на 100Кб больше, чем на других устройствах. Мы обнаружили, что в iOS5.1 в и IE 8 и IE9, WebP-изображение загружалось 3 раза. Хоть дополнительные 2 раза — это не есть хорошо, занимало места это все же меньше, чем JPEG-эквивалент. Мы не тестировали это в новых версиях iOS, возможно там это уже было исправлено.
Взгляд в будущее
Наша команда решила реализовать метод, используемый в 3 тесте, используя тэг для отдачи WebP-изображений браузерам, которые их поддерживают и отдачи JPEG или PNG тем, которые о WebP ничего не знают.
Мы считаем, что это лучший способ прогрессивного улучшения и он поддерживает отдачу изображения в поддерживаемом браузером формате.
Изначально мы использовали метод с полифиллом, но посчитали, что результат не будет идеальным.
WebP пока не сможет полностью заменить JPEG или PNG, но он будет очень крутым инструментом в вашем арсенале.
Для начала расскажем преимущества использования изображений в 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
Читайте также: