Вопрос про изображения webp
Подскажите какие из топовых браузеров не поддерживают формат изображений webp? Или уже все поддерживают и можно их использовать?
Ответы на пост (26) Написать ответ
10.03.2019 22:28
В Гугле нашел, что вроде как всё устройства ios их не поддерживают?
10.03.2019 23:07
https://caniuse.com/#feat=webp
Вообще apple не поддерживает.
10.03.2019 23:17
10.03.2019 23:20
Тогда не пойдёт, у меня по 400-500 человек в день с айфонов заходит (
11.03.2019 01:53
Конечно, все ломанулись с jpg и png бежать на таинственный webp. Учитывая, что иногда нужна прозрачность, то webp не всегда и подойдет. Да и нахер он нужен? Тесты проводили. По-моему бред. Попробуйте сжать картинку webp и jpg и сравните вес. На мой взгляд, разница будет мелочной. А если уж вашему посетителю прямо так скорость важна, то уберите нахрен тогда всю графику с сайта, в том числе рекламу. Будет как документ в Word, только со ссылками, и грузиться быстро будет. В 21 веке всё о скорости интернета думают.
12.03.2019 10:44
webp прозрачность поддерживает. Соотношение качество/вес картинки тоже на высоте, в отличи от jpeg, который ложает на красных и голубых тонах и даёт мусор. А вот с поддержкой браузерами — беда. Помимо Apple, проблема и с осликом IE, который никак не отомрёт. По поводу скорости загрузки. Скорость загрузки страницы (читайте страниц сайта), один из главных факторов ранжирования в поиске. Долго грузиться = клиент уходит. Интернет-пользователь ждать не любит. Это касается в первую очередь пользователей мобильного интернета.
11.03.2019 04:34
Согласен с Vantysiker — новый формат не годится. Если сравнивать картинки, сжатые до одинакового размер, то он в качестве не выигрывает. Если webp-ом сжимать сильнее, то получается пластмассовый вид. Я отказался от него.
11.03.2019 10:45
Живем в 21 веке, развитие интернет технологий развивается с приличной скоростью, в центре пустыни Сахара можно спутниковый интернет словить со скоростью 5 мб. сек. а Вы как в 18 ом веке картинки сжимаете. «колхоз» Вам самим не смешно?))
11.03.2019 11:52
Прежде чем критиковать, съездите в «колхоз» (деревню, село, провинциальный городишко) и проверьте скорость интернета. А узнав помалкивайте про 21 век.
11.03.2019 23:24
Я не критикую, а правду говорю. А в самом заброшенном «колхозе» ребята подключаются к спутнику и самодельные вай фай раздают. , но это мы говорим об 3 х процентном населении, а вы сжимаете картинки для тех 50 % пользователей у которых интернет выше 50 мб.с. А вы делаете тоже самое, как заливать в мотор авто не настоящее моторное масло, а подсолнечное. Как все запущено.
12.03.2019 10:46
Ага, особенно хорошо работает спутниковый интернет в туман и низкую облачность. А спутниковый трафик безлимитный уже? И стоит он копейки, правда?
12.03.2019 12:19
И все равно они при тумане умудряются войти в тормознутый перегруженный Фейсбук который сам по себе не собирается подстраиваться под приказы гугла, Будет он Вам еще картинки сжимать..Может Контакт начнет музыку MP3 в моно полифонию с битрейтом 16 сжимать? Посмотрите на крупные посещаемые сайты им похер на оптимизацию и правила гугла Пусть гугл сам свой Ютюб и рекламу Ад Сенс в webp сжимает.
11.03.2019 16:26
Россия находится в мезозойской эре. Перестаньте смотреть рашка 24 и выйдите на улицу и посмотрите на развалины этого колхоза.
11.03.2019 13:13
Бред, сейчас у каждого второго, если не первого айфон, у меня 70 процентов посетителей с эпла, заходят именно фотки посмотреть.
11.03.2019 13:15
Лучше старых проверенных jpg ничего нет. Отлично индексируются, а размер можно уменьшать в программах, при чем пакетно, а не по одной штуке
11.03.2019 14:08
эх, можно использовать сразу два формата
для всех браузеров использовать webp
для safari прописать путь к файлу jpg/png
11.03.2019 14:12
При чем тут скорость интернета? Важна скорость загрузки сайта. Скорость загрузки сайта зависит от разных факторов, а не только от контента. А вообще рекомендации даются не просто так. Но на данный момент проще не использовать этот формат. Если не «вылизывать» сайт под Google.
11.03.2019 16:37
Я уже начал постепенно менять фоновые изображения на webp. Картинки которые предназначены для скачивании оставляю пока что в стандартных форматах. Пластмасовый вид заметен только на фотках с людьми, но у меня строительные проекты и фотки с интерьерами — так что все путем. На данный момент экономия сжатия достигает 25-30% не теряя визуального качества. И не нужно быть гуру сеошником что бы понимать простую логику, что поисковик гугла придает приоритет и лояльность сайтам, которые используют их стандартные изображения webp — просто они это не озвучивают. Это как с https — сразу в 2010 году писали что пох, но через 7 лет сказали что не пох и установка обязательно для лучшей поисковой выдачи.
11.03.2019 17:11
Скорее всего — вы правы. «Партия сказала — надо». Придется, рано или поздно, выполнять.
Не поделитесь — конкретикой? Практикой перевода.
1/ Все/нет браузеры понимают формат без дополнительных «разъяснений»? (Хром, FireFox, Яндекс)
2/ Самый простой/производительный конвертор.
В Сети много разного и разноречивого. Пробовал, «без фанатизма». FF — не кушает новые форматы, навскидку. Нужно как-то наладить — «конвейер», упростить процесс. Картинок — десятки тысяч, надо с чего-то начать/пробовать.
Есть личностные рецепты-рекомендации? Не «секретные» 🙂
Спасибо.
11.03.2019 20:18
Я не стал заморачиваться с подменой картинок для разных браузеров — это сложно и тупо. Основной гигант это Гугл — рано и поздно на него все ровняются и Яблочники не исключение, а вопрос времени. А опера или файрфокс — для меня вообще не понятно кто и зачем юзает это. Разве что пенсионеры 90 летние. А такие клиенты мне точно не нужны и пофиг на них. Пользователей айфонов у меня это 10-15% от всей посещалки и примерно 10% это отказы из-за долгой прогрузки контента (предположительно). Заменой на webp я предполагаю увеличить скорость загрузки и снизить процент отказников, тем самым компенсировав какую то часть возможных потерь клиентов на айфонах, где не будут прогружаться картинки webp. Но опять же, я меняю пока что какую то часть картинок на каждой странице — и на ios часть контента отображается более менее адекватно. Через годик сравню показатели и если хуже не станет заменю все на webp. Конвектор использую https://webp-converter.com/
12.03.2019 06:46
Я не спрашивал — зачем, только — как.
Правильно я понимат, что картинки типа .jpg в коде тупо меняются на .webp и не прописывается более — ничего? (естественно, что картинки предварительно конвертируются и «заливаются» на сервер 🙂 )
С конвертером понятно. В google — он же в выдаче, никаких «откровений».
Пробовал менять. Что-то не понял моих «потуг» Хром, не отображает «тупой» замены. Что-то не так.
А какой просмотровщик юзаем?
зы1: FireFox юзаю — я, хотя и не достиг указанного возраста 🙂 Зачем: удобный и привычный инструмент вебмастера, десять лет пользования = привычка. Хром мне не понравился.
Забавно, что Оперу — юзают два моих приличных клиента, тоже еще не впавших в маразм. Приходится считаться и с мнением меньшинства. Не у всех сайтов аудитория — молодежная. Иногда пара-тройка «нестандартных» посетителей «перевешивают» — тысячу отформатированных.
У всех своя срецифика. Хотя мобильный траф на всех проектах перевалил за 50%, с этим надо считаться.
зы2: ВСЁ заменить пока прблематично будет, ни один популярный скрипт фотоальбомов — пока не поддерживает новые форматы. Желающих прописать плагины/хаки — пока немного, результаты — сомнительны. Есть, но мало и результат — не в адеквате.
Странно, но и разработчики шаблонов для популярных cms — не особо «рвутся» в новый формат. В .svg — вижу часто, .webp — пока не встречал (хотя — может и есть уже, давно не юзал новейших шаблонов).
Ладно. Спасибо за ответ, хоть он ничего нового не привнес. Спросил конкретику, получил — «бла-бла» 🙂
12.03.2019 10:52
yootheme — решили данный вопрос. У них все просто: загружай любой формат из поддерживаемых, а скрипт делает остальное 🙂 Если используется хром — один формат выводит, если сафари — другой. Скорость загрузки джумла 3 в зеленой зоне (выше 90)
Как преобразовать изображения WebP в JPG или PNG?
Формат WebP все чаще можно встретить в Интернете, служит он для хранения изображений. Сам формат можно назвать относительно молодым, он был разработан в 2010 году компанией Google. WebP уменьшает размер изображений на 25-34% по сравнению с изображениями, сохраненными в формате JPEG. Это помогает быстрее работать веб-сайту и передавать данные.
Но есть у WebP и свой недостаток – это относительно новый формат изображений. Пока еще не все программы могут работать с таким типом файлов. Например, Photoshop его еще не поддерживает. Да и на своем веб-сайте вы, скорее всего, не сможете использовать картинки в новом формате. К счастью, ничто не мешает быстро и просто сконвертировать изображения WebP в JPG или PNG. Это можно сделать на Mac, а также на iPhone, iPad или с помощью Интернета.
Что такое WebP?
Формат WebP был разработан компанией Google и обеспечивает сжатие изображений как с потерями, так и без потерь. Сжатие изображения с потерями — это процесс, при котором некоторые данные удаляются из картинки с целью ее «облегчения». За счет этого уменьшается размер файла, сам процесс является необратимым. При сжатии без потерь итоговое изображение является идеальной реконструкцией оригинала. В результате обработки изображение становится меньшего объема, но при этом сохраняется качество оригинала. Как и GIF, WebP также поддерживает анимацию.
Ограниченная поддержка WebP
Вы будете сталкиваться с этим форматом в Интернете все чаще и чаще, например, в Facebook и Netflix. Однако WebP используется далеко не всеми приложениями. Большинство веб-браузеров позволяют без проблем открывать и просматривать WebP. «Просмотр» для Mac также поддерживает WebP, начиная с macOS Big Sur. Если программа не может открыть изображение WebP, вам придется преобразовать его в другой формат файла, например, в JPEG или PNG, прежде чем вы сможете работать с этой картинкой.
Как преобразовать WebP на Mac с предварительным просмотром изображения?
1. Откройте изображение WebP в «Просмотре» для Mac.
2. Нажмите «Файл» в строке меню.
3. Выберите «Экспортировать».
4. Выберите нужный формат файла в разделе его структуры.
5. При необходимости измените качество изображения, меняя формат его сжатия.
6. Выберите место, где вы хотите сохранить изображение
7. Наконец, нажмите «Сохранить».
CloudConvert для работы с WebP
В Интернете имеется множество веб-сайтов, которые позволяют конвертировать изображения в другой формат. Самый известный из них – cloudconvert.com, работать с ним можно не только на десктопе, но и на мобильных устройствах, например, на iPhone или iPad. Как видно из названия, вся конвертация будет происходить в «облаке», куда надо лишь закачать ваш файл.
В разделе «convert» выберите тип вашего файла из соответствующего раздела (в нашем случае это image), а потом нажмите «Select File» для загрузки на сайт вашей картинки в формате WebP. Затем вы сможете настроить качество результата и другие его характеристики, а потом можно приступать к конвертации. После ее окончания готовый файл можно скачать и начать им пользоваться.
Приложения для iPhone, iPad и Mac
Конечно же, есть и специальные приложения, которые специализируются на преобразовании изображений в формате WebP. Вышеуказанные методы бесплатны и всегда работают. Но вполне возможно, что вам удобнее будет воспользоваться специальным приложением, несколько примеров мы вам предложим. Однако обратите внимание, что большинство таких программ имеют ограниченный функционал, они требуют покупки в самом приложении для получения полного доступа ко всем возможностям.
WebP Converter – AnyWebP для Mac
Convert Images для iPad или iPhone
Jpeg Png Webp конвертер для iPad или iPhone
�� Смотрите также:
- Как сделать изображение с прозрачным фоном на Mac в программе Просмотр.
- Как удалять файлы на macOS мимо корзины.
- Как изменить иконку приложения, папки или файла на Mac (macOS).
�� Мы в Telegram и YouTube, подписывайтесь!
Safari не загружает webp картинки
Всем доброго времени суток. Недавно довелось потратить заметное количество времени и нервов для решения проблемы на одном из сайтов наших клиентов. Начну с небольшой истории.
Я не фанат яблочных устройств как пользователь и я не очень люблю продукцию apple как разработчик. Мы в компании активно занимаемся WEB разработкой, где приходится делать так, чтобы все наши результаты открывались одинаково хорошо как в Google Chrome, так и в других браузерах — Mozilla Firefox, Microsoft Edge и Apple Safari. Сегодня речь пойдет про результат стараний разработчиков Apple. Я уже писал ранее о сложностях работы PWA на Safari, а сегодня поговорим про изображения.
Что такое формат WEBP?
На тему форматов изображений есть крайне интересный и полезный доклад Никиты Дубко: youtube.com/watch?v=EwBYOQwPEpY. Никита прошелся по всем форматам изображений и как их можно показать пользователю на разных девайсах. Но, если вкратце, webp — это формат изображений, который был придуман Google в 2010 году, который помогает нашим изображением «худеть» и делают наши сайты быстрее в загрузке.
Что произошло у нас?
В обычный будний день клиент решил через админку залить новые изображения на сайт. После заливки новые изображения проверялись через Google Chrome и проблем обнаружено не было. Через несколько дней мне присылают следующий скриншот:
Как видно из скриншота (надеюсь он у вас открылся), картинки загрузились на самым приятным образом. Я уже достаточно ученый в этих делах — сразу пошел смотреть формат картинки, которая отдается — image.jpg. «Хм, жипег», подумал я — «должно быть ок». И в этот момент марафон поиска и решения проблем был объявлен открытым.
Я пересмотрел много интересных способов решения проблемы — простановка какой-то галочки, сброс кеша, конвертация в png. Не сработало ничего. В итоге я скачал файл, открыл у себя в винде встроенным редактором и пересохранил как jpg, загрузил на сайт и все заработало даже на яблоках.
Утилиты конвертации
Сначала у меня возникла мысль — мы имеем дело с битым jpeg. Решил попробовать конвертировать через imagemagick команда convert успехом не увенчалась. Получал ошибку:
convert-im6.q16: delegate failed `'dwebp' -pam '%i' -o '%o''
Тут у меня уже закралась мысль — похоже, что дело не битости файла, а в его формате.
У меня была уверенность, что это jpg т.к. файлы были с расширением jpg, но оказалось, что это ошибка — неизвестно чья именно, но ошибка. В итоге мы получили webp файл с расширением jpg. Именно поэтому девайсы на винде, андроиде, линуксе отлично открывали эту картинку, а apple отказывался, наверное, из принципа (webp же разработка google).
Разгадка уже была близка, но я пошел не по тому пути — я попытался конвертировать через что-нибудь другое, думая, что может быть проблема у imagemagick. Команда jpegtran выдала уже прямо совсем толстый намек на то, что в моих руках не JPEG:)
Not a JPEG file: starts with 0x52 0x49
Загуглив в чем может быть дело мне уже явно дали понять, что я имею дело с webp и что нужно придумывать как перегонять из «плохого» jpg в нормальный.
Для начала я пошел по достаточно адскому пути — написал скрипт, который сначала переводит из webp в png, а потом из png в jpg. Мне не хватило смекалки просто установить webp в систему (sudo apt-get install webp) и запустить стандартный convert, который отлично поймет какое изображение перед ним и конвертирует в нормальный jpg. Если кому-то интересно, то вот тот адский php скрипт — gist.github.com/amorev/00cb6213fe15217a1e23987eb40a77da.
Вместо заключения
Проблема решается запуском convert image.jpg image.jpg и установкой webp в систему (sudo apt-get install webp). Но как много нервов и времени было потрачено на то, чтобы прийти к этому решению. Надеюсь этот пост окажется полезным:)
На iPhone и iPad
Если вы используете PhotoRoom на iPhone или iPad, вы можете задать формат файла в настройках. Выбранный формат файла будет использоваться по умолчанию для всех дизайнов.
Можно также отредактировать дизайн и выбрать формат файла, который будет применяться только к этому конкретному дизайну.
(Видео демонстрирует работу PhotoRoom на iPhone)
На странице Создать выберите пункт Ваш контент.
Выберите Параметры.
Выберите формат файла экспорта, который PhotoRoom будет использовать по умолчанию.
Выберите Назад.
На странице Создать создайте новый дизайн.
Кроме того, выберите пункт Ваш контент и отредактируйте один из существующих дизайнов
Выберите значок Share в правом верхнем углу.
На странице Экспорт в верхней части отображается имя файла дизайна. Файл имеет формат, выбранный в настройках.
Чтобы изменить формат, выберите пункт Параметры, а затем выберите формат. Это изменение формата относится только к выбранному дизайну, а не ко всем дизайнам.
Выберите Готово.
[Необязательно] Чтобы изменить имя файла, выберите Функции и затем выберите значок карандаша рядом с именем. Введите новое имя файла и выберите Готово.
Используйте опции на странице Экспорт для сохранения и публикации дизайна.
На Android
Если вы используете PhotoRoom на устройстве Android, вы можете задать формат файла в настройках. Выбранный формат файла будет использоваться по умолчанию для всех дизайнов.
Можно также отредактировать дизайн и выбрать формат файла, который будет применяться только к этому конкретному дизайну.
(Видео демонстрирует работу PhotoRoom на Android)
На странице Создать выберите пункт Ваш контент.
Выберите Параметры.
Выберите формат экспортного файла, который PhotoRoom будет использовать по умолчанию.
Выберите стрелку назад в левом верхнем углу.
На странице Создать создайте новый дизайн.
В качестве альтернативы выберите пункт Ваш контент и отредактируйте один из существующих дизайнов
Выберите значок Share в правом верхнем углу.
На странице Экспорт в верхней части отображается имя файла дизайна. Файл имеет формат, выбранный в настройках.
Чтобы изменить формат, выберите пункт Параметры, а затем выберите формат. Это изменение формата относится только к выбранному дизайну, а не ко всем дизайнам.
Выберите Готово.
[Необязательно] Чтобы изменить имя файла, выберите Функции и затем выберите имя. Введите новое имя файла и выберите Готово.
Используйте опции на странице Экспорт для сохранения и распространения дизайна.
В веб-приложении
В версии PhotoRoom для Web-приложения (настольной) тип файла можно задать в настройках.
(В видеоролике показана работа PhotoRoom в Web App)
Войдите в систему по адресу https://app.photoroom.com/.
Выберите Параметры.
Выберите формат файла.
Создайте новый дизайн или отредактируйте существующий.
[Необязательно] Измените имя файла для дизайна. Введите имя в поле вверху.
Выберите Загрузить.
Чтобы загрузить тот же дизайн в другом формате, необходимо вернуться в Параметры и снова изменить тип файла. Затем снова отредактируйте дизайн и загрузите его.