Как выключить поддержку webp в браузере

Обновлено: 03.07.2024

Что такое WebP? Это лучший формат изображения, о котором никто не слышал, но он скоро изменится.

В этом посте мы разберемся, как начать использовать изображения WebP на сайте WordPress. Мы рассмотрим, как преобразовать изображения в WebP и как их использовать для совместимых браузеров.

Что такое изображения следующего поколения?

GIF были изобретены в 1987 году. Первый стандарт JPEG был выпущен в 1992 году, а PNG стал Рекомендацией W3C в октябре 1996 года.

WebP является самым экономичным и обычно обеспечивает сжатие на 30% больше, чем JPEG и JPEG 2000.

Что такое WebP?

Существует несколько вариантов изображений WebP, один из которых использует сжатие с потерями и сопоставим с изображениями JPEG, но с размером файла на 25-34% меньше. Изображения с потерями в WebP также поддерживают прозрачность, чего не могут делать JPEG.

Изображения WebP также универсальны, потому что они имеют возможности GIF, JPEG и PNG в одном формате. Вы сможете оптимизировать и упростить.


WebP поддерживает следующее:

  • Анимация
  • Сжатие без потерь
  • Сжатие с потерями
  • Прозрачность альфа-канала

Это означает, что вы можете конвертировать PNG, GIF и JPEG в один удобный формат, чтобы получить преимущества в производительности.

Непосредственное сравнение различных форматов файлов смотрите здесь.

Бесплатный WebP


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

Существует несколько способов обойти эти проблемы раннего внедрения в WordPress, чтобы вы могли начать использовать изображения WebP. Для этого нам понадобится решение, которое будет:

  1. Используйте конвертер WebP для преобразования существующих изображений в медиатеке в WebP, а также для будущих загрузок
  2. Уметь определять, поддерживает ли браузер посетителя изображения WebP
  3. Отдавать изображения WebP, если они поддерживаются, или устаревшие форматам файлов, таким как PNG или JPEG, если это не так.

Преобразование изображений в WebP для WordPress

Хотя вы можете конвертировать изображения в форматы следующего поколения перед загрузкой в ​​медиатеку WordPress, это не практично, если у вас много изображений.

Снимок экрана онлайн-инструмента конвертирования webp

Adobe Photoshop по умолчанию не экспортирует файлы в WebP, но вы можете добавить эту функцию с помощью плагина . Это не то же самое, что плагин WordPress. Это плагин, который вы загружаете и добавляете в папку Adobe Photoshop на вашем компьютере.

Вы также можете загрузить и установить WebPonize для Mac или Webpconv для Windows . Оба могут делать преобразования JPEG в WebP или PNG в WebP.

Для изображений WebP WordPress вы можете использовать SFTP для загрузки файлов WebP прямо в папку загрузки, минуя медиа-библиотеку.

Для удобства вы также можете разрешить WebP в медиатеке WordPress , изменив файл functions.php вашего сайта.

Массовое преобразование изображений WebP для WordPress

Если у вас есть сайт с большим количеством изображений для конвертации, вам понадобится более качественный инструмент, чтобы вы могли конвертировать изображения в форматы следующего поколения.

Вы можете использовать плагин, такой как Smush Pro, для предоставления WebP-версий всех ваших изображений с ее CDN. Smush оставляет ваши исходные изображения нетронутыми и выполняет преобразование перед передачей изображения. Это означает, что CDN Smush Pro не изменяет ваши изображения напрямую и не наносит им никакого вреда. Если вы отключите опцию преобразования webp, сервер больше не будет конвертировать ваши изображения в WebP, и ваш сайт вернется к исходному формату файла, который использовался при загрузке.

Smush Pro также дает вам возможность конвертировать изображения в другие папки, чтобы вы могли оптимизировать фоновые изображения и иконки вашей темы, например.

Вы также можете использовать командную строку.

Как использовать изображения в форматах следующего поколения

Некоторые плагины для оптимизации изображений только конвертируют ваши изображения в формат WebP, но не несут ответственности за предоставление нужного изображения вашим посетителям. Для этого вам, возможно, придется использовать дополнительный плагин или выполнить одно из следующих действий.

Smush Pro заботится об обоих: конвертирует в формат WebP в WordPress и предоставляет его совместимым браузерам, чтобы вы могли пропустить всю эту ерунду.

1. Используйте JavaScript для определения поддержки WebP

Вы также можете использовать библиотеку JavaScript, такую ​​как Modernizer, которая почти так же обнаруживает поддержку WebP .

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

2. Используйте accept headers браузера

Браузер посетителя отправит заголовок запроса «принять», указывающий, какие форматы изображений он будет принимать с веб-сервера.

Если браузер указывает, что он принимает изображения WebP, веб-сервер знает, что он может безопасно отправлять WebP.

Это метод, используемый Smush Pro CDN для определения того, какие браузеры будут принимать изображения WebP.

3. Измените файл Hypertext Access (.htaccess) в WordPress.

Файл .htaccess находится в корневом каталоге и является уникальным файлом по нескольким причинам:

  1. Он начинается с точки (.), Означающей, что это скрытый файл. Вы не увидите его, если не сделали скрытые файлы видимыми
  2. У него нет расширения файла
  3. Если вы допустите ошибку при редактировании, ваш сервер может серьезно работать со сбоями, поэтому редактируйте его, только если вы знаете, что делаете!

В WordPress этот файл обычно используется для перезаписи URL. В этом случае URL-адрес изображения изменяется и добавляется расширение .webp.

Скриншот файла .htaccess в WordPress

Вот как обычно выглядит файл .htaccess в WordPress

В коде Vincent Orback на GitHub , например, файл .htaccess изменяется. URL-адреса изображений JPEG и PNG изменяются, если в одной папке есть версия WebP и если браузер поддерживает WebP. В этом случае ответственность за правильное отображение изображения ложится на веб-сервер Apache.

4. Обслуживание нескольких размеров и форматов с HTML 5

Одним из лучших способов предоставления изображений WebP является использование браузера для выбора лучшего изображения и использование <picture> элемента HTML5 для передачи различных изображений, доступных для выбора браузером. Вы можете использовать этот <picture> элемент не только для представления различных форматов изображений, но и для мобильных устройств и устройств Retina разных размеров.

Хотя HTML-изображение будет выглядеть примерно так:

У <picture> элемента намного больше:

Видите, как <img> вложено в <picture> элемент? Браузеры, которые не поддерживают изображения WebP, вернутся к изображению, указанному в <img> элементе. Фактически, <img> это требование (или изображение не будет отображаться), и оно должно отображаться последним.

Как отдавать изображения следующего поколения с помощью Smush Pro

Есть более простой способ конвертировать ваши изображения в WebP и предоставлять их совместимым браузерам с помощью Smush Pro.

Сначала вам нужно активировать Smush Pro CDN. В настройках Smush, перейдите в раздел CDN и нажмите кнопку Get Started.

Снимок экрана настроек Smush Pro

После активации CDN прокрутите вниз до преобразования WebP в настройках CDN и включите.

последние дни в Хроме стали сохраняться картинки в каком-то формате WEBP, который стандартные редакторы не открывают. Если что-у меня 8 винда. Что делать, как этот ужас отключить?

судя по тому, что с разных сайтов фотки сохраняются в разных форматах, это проблема не в браузере, а в сайте-который фотки в данном формате хранит.

Фотошоп открывает, любой софт на маках тоже его открывает. Также для винды можно скачать отдельный webp-кодек. Сейчас почти все мобильные приложения и онлайн-сервисы умеют работать с webp картинками, как и почти весь актуальный софт.

Это новый формат вместо jpeg, дающий меньше потерь при меньшем объёме. Проблема с ним только на старых версиях винды и со старым софтом.

я пользуюсь обычным Xnview для быстрой обработки фоток, не буду же я фотошопить мелкие фотки, где только надо отрезать рамку или убрать лишние детали.

Жеребьян Дестребьян Жюримар Пасижюр Искусственный Интеллект (110221) Это приложение никогда уже не научится webp, проект заброшен. Для вас временным выходом может стать расширение-конвертер для хрома, хотя jpeg в мире становится постепенно всё меньше и это решение не навсегда.

Жеребьян Дестребьян Жюримар Пасижюр Искусственный Интеллект (110221) Да я и не против. С оговоркой что местоположение поменять можно. Карты бинг хороши тем что они же подгружаются в MS Flight 2020, и с процедурной генерацией на их основе выходит неплохая детализация в симуляторе. А другие карты не прикрутишь.

переименуй расширение на jpeg в каком-нибудь вьювере картинок.
Там типа сменить формат - и выбери джипег.

переименовываю! Через AcdSee, например. Не вручную, а через редактирование. не матерись.. тебе помочь пытаются.

WebP — формат сжатия изображений с потерями и без потерь качества, предложенный компанией Google Inc.
Никак не отключить. Только редактором перекодировать. Я плагин в фотошоп ставила отдельный.

блин, буквально неделю назад было все ок, сохранял в jpeg,и тут такое.

Svetlaya Просветленный (29522) Иногда, когда просто перетаскиваешь картинку с браузера на рабочий стол, он сохраняется в вышеупомянутом формате. Но если сделать все по правилам (правой кнопкой мыши - сохранить изображение) то всё будет ОК)))

Смотри в настройках Хрома. Например, в Firefox это переключается вообще без проблем.

Loony Искусственный Интеллект (518949) Тут ничем помочь не могу - все вопросы к разработчикам этого корявого браузера.

обратила внимание-эта проблема не на всех сайтах-к примеру, с фэцсбука фотки сохраняешь-в jpeg идут, а с авито-в webp. приплыли (((

Loony Искусственный Интеллект (518949) Потому что, постепенно отказываются от этого формата. И если на сервере нет картинки в таком формате, то только конвертирование.

Формат WebP по существу нацелен на создание меньших, лучше выглядящих изображений, которые могут помочь сделать Интернет быстрее.

Какие веб-браузеры изначально поддерживают WebP?

Веб-мастера, заинтересованные в повышении производительности сайта, могут легко создавать оптимизированные альтернативы WebP для своих текущих изображений и предоставлять их на целевой основе браузерам, которые поддерживают WebP.

  • WebP с потерями поддерживают:
    • Google Chrome (для ПК) 17+
    • Google Chrome для Android версии 25+
    • Microsoft Edge 18+
    • Firefox 65+
    • Опера 11.10+
    • Собственный веб-браузер, Android 4.0+ (ICS)
    • Google Chrome (для ПК) 23+
    • Google Chrome для Android версии 25+
    • Microsoft Edge 18+
    • Firefox 65+
    • Опера 12.10+
    • Собственный веб-браузер, Android 4.2+ (JB-MR1)
    • Бледная Луна 26+
    • Google Chrome (для ПК и Android) 32+
    • Microsoft Edge 18+
    • Firefox 65+
    • Опера 19+

    Как определить поддержку браузера для WebP?

    Вы захотите предоставлять изображения WebP только тем клиентам, которые могут правильно их отображать, и использовать устаревшие форматы для клиентов, которые не могут. К счастью, есть несколько методов обнаружения поддержки WebP, как на стороне клиента, так и на стороне сервера. Некоторые поставщики CDN предлагают обнаружение поддержки WebP как часть своей услуги.

    Согласование содержимого на стороне сервера через заголовки Accept

    Modernizr

    Элемент HTML5 <picture>

    HTML5 поддерживает элемент <picture> , который позволяет вам перечислить несколько альтернативных целей изображения в порядке приоритета, так что клиент запросит первое изображение-кандидат, которое он может правильно отобразить.

    В вашем собственном JavaScript

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

    Как преобразовать файлы изображений в WebP?

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

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

    Как оценить качество изображения WebP?

    В настоящее время вы можете просматривать файлы WebP, конвертируя их в общий формат, использующий сжатие без потерь, например PNG, а затем просматривать файлы PNG в любом браузере или программе просмотра изображений. Чтобы быстро получить представление о качестве WebP, см. Галерею на этом сайте для сравнения фотографий.

    Как получить исходный код?

    Код конвертера доступен в разделе загрузок на странице проекта с открытым исходным кодом WebP. Код для облегченного декодера и спецификация VP8 находятся на сайте WebM . Смотрите страницу Контейнер RIFF для спецификации контейнера.

    Каков максимальный размер изображения WebP?

    WebP совместим с потоком битов с VP8 и использует 14 бит для ширины и высоты. Максимальные размеры в пикселях изображения WebP составляют 16383 x 16383.

    Какие цветовые пространства поддерживает формат WebP?

    Lossless WebP работает исключительно с форматом RGBA. См. Спецификацию WebP Lossless Bitstream .

    Может ли изображение WebP стать больше, чем его исходное изображение?

    Да, обычно при преобразовании из формата с потерями в WebP без потерь или наоборот. Это происходит главным образом из-за разницы в цветовом пространстве (YUV420 против ARGB) и конверсии между ними.

    Есть три типичные ситуации:

    1. Если исходное изображение имеет формат ARGB без потерь, пространственная понижающая дискретизация до YUV420 представит новые цвета, которые сложнее сжимать, чем исходные. Такая ситуация обычно может возникнуть, когда источник имеет формат PNG с несколькими цветами: преобразование в WebP с потерями (или, аналогично JPEG с потерями) потенциально приведет к увеличению размера файла.
    2. Если источник имеет формат с потерями, использование сжатия WebP без потерь для захвата природы источника с потерями обычно приводит к увеличению размера файла. Это не относится к WebP и может происходить, например, при преобразовании источника JPEG в форматы WebP или PNG без потерь.
    3. Если источник в формате с потерями, и вы пытаетесь сжать его как WebP с потерями с более высоким качеством настройки. Например, попытка преобразовать файл JPEG, сохраненный с качеством 80, в файл WebP с качеством 95 обычно приводит к увеличению размера файла, даже если оба формата имеют потери. Оценка качества источника часто невозможна, поэтому рекомендуется снизить целевое качество WebP, если размер файла постоянно увеличивается. Другая возможность состоит в том, чтобы избегать использования параметра качества и вместо этого задавать размер файла с помощью -size параметра в cwebp инструменте или эквивалентного API. Например, ориентация на 80% исходного размера файла может оказаться более надежной.

    Обратите внимание, что преобразование источника JPEG в WebP с потерями или источника PNG в WebP без потерь не приводит к неожиданности такого размера файла.

    Поддерживает ли WebP прогрессивный или чересстрочный дисплей?

    WebP не предлагает прогрессивного или чересстрочного обновления декодирования в смысле JPEG или PNG. Это может оказать слишком большую нагрузку на процессор и память клиента декодирования, поскольку каждое событие обновления включает полный проход через систему декомпрессии.

    В среднем декодирование прогрессивного изображения JPEG эквивалентно декодированию базовой линии 3 раза.

    В качестве альтернативы, WebP предлагает инкрементное декодирование, где все доступные входящие байты битового потока используются, чтобы попытаться создать отображаемую строку выборки как можно скорее. Это позволяет сэкономить память, ЦП и перерисовать данные на клиенте, одновременно обеспечивая визуальные подсказки о состоянии загрузки. Функция инкрементного декодирования доступна через API расширенного декодирования .

    Как использовать привязки libwebp Java в Android?

    WebP включает поддержку привязок JNI к простым интерфейсам кодировщика и декодера в swig/ каталоге.

    Сборка библиотеки в Eclipse :

    Обратите внимание, что библиотека может быть собрана вручную с помощью ndk-build и включенной Android.mk . Некоторые из шагов, описанных выше, могут быть повторно использованы в этом случае.

    1. Сборка libwebp.dll. Это установит WEBP_EXTERN правильно для экспорта функций API.

    2. Добавьте libwebp.dll в ваш проект и импортируйте нужные функции. Обратите внимание, что если вы используете простой API, вы должны вызывать, WebPFree() чтобы освободить все возвращенные буферы.

    Зачем использовать анимированный WebP?

    Преимущества анимированного WebP по сравнению с анимированным GIF

    Недостатки анимированного WebP по сравнению с анимированным GIF

    Почему бы просто не поддерживать WebM в <img> ?

    Возможно, в долгосрочной перспективе имеет смысл поддерживать форматы видео внутри <img> тега. Однако сделать это сейчас с намерением, чтобы WebM <img> мог выполнять предложенную роль анимированного WebP, проблематично:

    Because of financial problems I'm still using Windows 7 on a PC thats almost 10 years old. The WebP image converter does not work on it. (btw I'm saving up to buy a new PC soon) I've found a website that can convert WebP to Jpg, but its a hassle to use it.

    I think there are now websites like Photobucket that are preventing anyone from downloading images using right click and save by fooling firefox that they are in a different format.

    Изменено 15 мая 2020 г., 11:46:26 -0700 WildBill TX

    . I'm still using Windows 7 . The WebP image converter does not work on it.

    I don't know why the extension would be sensitive to the version of Windows you have. Perhaps there is a conflict with another feature or setting?

    If mine doesn't work on Windows 7, that would be very interesting to know.

    I'm not comfortable at this time installing the webp converter add-on to my Firefox browser and would like to know alternative methods such as software that will convert a webp file once I've downloaded it. This includes files that are jpeg or gif format. Currently, when I download such files I can't open them on my Mac; they are not readable by the Mac's standard software programs and not recognized by my older video converter software. If I try to delete the webp from the file extension, that doesn't resolve the issue at all. Can someone recommend good software programs for conversion of webp files to standard jpeg, gif or other formats while retaining the file name if possible?

    Hi tjphoto, I don't have a Mac, but some Mac App Store apps shows up in a Google search. You could take a look at these and search further in the App Store app.

    Thanks for the advice. One big problem for me is that I have an older OS, so many of the latest apps don't work with my OS. I understand that there are software programs that can convert a webp file to more typical gif or jpeg, so I should research those options. I was hoping someone would be able to recommend the best of such programs. When I read the Mozilla notes on the Firefox add-on, I didn't like the sound of some functions in it that struck me as invasive, imposing upon my normal browser activity, etc.

    I understand your concern. You don't know these developers.

    My own webP converter also requires "all sites" permission. The reason is that a lot of images are embedded from different servers, so you need cross-site permissions to manipulate them, and the only practical way is to get permission in advance. However, if I think of a way to not require that, I'll update the extension with that approach.

    If you want to take a look at how it works now:

    I didn't include GIF format because it is limited to 256 colors, which tends to be kind of ugly.

    Hi tjphoto, if I could mention one other option: browsers can display webP image files, and also capture screenshots. So you can convert a saved webP file in Firefox as follows:

    (A) Display the webP file in a tab using either menu button > Open file, or File > Open file, or drag and drop the image file into a tab

    (B) Use the "Take a Screenshot" feature on the Page Actions (•••) menu in the address bar

    (C) Click "Save Full Page" and after a moment Firefox should display an overlay with its converted image

    (D) Either "Download" the image as a PNG file, or Copy it to the clipboard and then paste it into your image editor

    No other software needed.

    It sounds like you all are not understanding the issue correctly. Firefox is not converting the image files but appending webp to the end of the file name. If I download the exact same image file from Chrorne or IE than the webp extension is not appended and shows up as the correct file type. Example: Firefox sees image.jpep as image. jpeg. webp. It is this action we want to end as no one should have to deleted the webp extension as it should recognize, and save the file properly. So no renaming, no converting no nothing except for Firefox to save with the correct extension instead of changing it, as most websites do not support webp if you were to try to upload one. Get it now? I would attach an example but guess what? Mozilla does not support the webp file type either.

    It sounds like you all are not understanding the issue correctly. Firefox is not converting the image files but appending webp to the end of the file name. If I download the exact same image file from Chrorne or IE than the webp extension is not appended and shows up as the correct file type. Example: Firefox sees image.jpep as image. jpeg. webp. It is this action we want to end as no one should have to deleted the webp extension as it should recognize, and save the file properly. So no renaming, no converting no nothing except for Firefox to save with the correct extension instead of changing it, as most websites do not support webp if you were to try to upload one. Get it now? I would attach an example but guess what? Mozilla does not support the webp file type either.

    Hi Gelio, welcome to this thread. I'm not sure the earlier posters would agree that they don't understand their own situations when trying to save images. But we can discuss the problems you are encountering.

    Firefox wouldn't normally add a .webp extension unless the image actually is in a WebP container, whether it was originally a PNG or a JPEG before the site put it in the container. Where are you trying to save a JPEG that Firefox is mistakenly renaming with a .webp extension? Can you share a link?

    Hi tjphoto, if I could mention one other option: browsers can display webP image files, and also capture screenshots. So you can convert a saved webP file in Firefox as follows: (A) Display the webP file in a tab using either menu button > Open file, or File > Open file, or drag and drop the image file into a tab (B) Use the "Take a Screenshot" feature on the Page Actions (•••) menu in the address bar (C) Click "Save Full Page" and after a moment Firefox should display an overlay with its converted image (D) Either "Download" the image as a PNG file, or Copy it to the clipboard and then paste it into your image editor No other software needed.

    Thanks again for advice. I was trying to come up with a solution that preferably didn't involve too many steps. I discovered that there are sites that will process and convert files with the webp appended to the file name, converting it to a desired format such as gif to mpeg4 or webp to jpeg. I found a couple of these converter sites so far, though I noticed one of them has a limit on the number of conversions you can do for free within a day before you have to sign up for a paid membership with a monthly or annual fee. Anyway, these seem to be pretty easy processes to use, based on my experience so far. I also have the option of using the Grab software that came with my Mac to do a kind of screensave that I can control the cropping on. This saves as a tiff, then I use Photoshop to convert the tiff to a jpeg or whatever format I choose. At the moment, I think there's only one website I frequent that has been displaying files with a webp format in the name and only started this recently. So it's not a common problem with all sites I visit that have images or video clips. However, I've noticed there are sites like twitter and instagram, I think, that control images to prevent visitors from dragging the images to your desktop or doing a right click to save, etc. I understand the importance of protecting people's images. But of course software like Grab can still save these images and convert them easily enough.

    It sounds like you all are not understanding the issue correctly. Firefox is not converting the image files but appending webp to the end of the file name. If I download the exact same image file from Chrorne or IE than the webp extension is not appended and shows up as the correct file type. Example: Firefox sees image.jpep as image. jpeg. webp. It is this action we want to end as no one should have to deleted the webp extension as it should recognize, and save the file properly. So no renaming, no converting no nothing except for Firefox to save with the correct extension instead of changing it, as most websites do not support webp if you were to try to upload one. Get it now? I would attach an example but guess what? Mozilla does not support the webp file type either.

    I don't think you're understanding the issue. The only site I've been on that displays images that download with a webp file name is programmed to add that appended webp. It's not Firefox that's to blame. I have not experienced Firebox's browser adding a webp to a file name on any other sites, so it seems to be something unique to a single site I was referring to. I just wondered originally if Firefox had an easy add-on that would automatically convert the webp files to jpeg, gif or mpeg, for example, so my computer would read them normally. My computer and software programs I use don't recognize a webp file name.

    Читайте также: