Так как Blogger принадлежит Google, то не удивительно, что системой предусмотрена автоматическая конвертация изображения в разработанный тем же Google, более эффективный формат WebP. Стоит ли, на сегодняшний день, использовать формат WebP для публикации изображений в интернете?
Выбор формата изображения. Если, протестировав сайт на скорость загрузки, при помощи сервиса PageSpeed Insights от Google, вы получили совет использовать современные форматы изображений, узнайте, поддерживаются ли такие форматы браузерами, доступна ли анимация и канал прозрачности (альфа-канал).
Существуют три стандартных формата изображений: GIF, PNG и JPEG. Кроме них, почти все браузеры поддерживают и новые форматы WebP и JPEG XR, для которых доступно большее сжатие. Последние версии браузера Mozilla Firefox, также, поддерживают WebP. Информация по оптимизация изображений от Google.
В формате PNG не применяется сжатие с потерей данных, поэтому изображение сохраняется в самом высоком качестве, но может весить больше, чем файлы других форматов. В формате JPEG используется комбинация сжатия с потерями и без потерь. Формат подходит для оптимизации фотографии.
Формат WebP. Формат WebP создан в 2010 году Google. Поддерживает прозрачность (альфа-канал). Конвертация изображений. На данный момент поддерживается почти всеми браузерами https://caniuse.com/#feat=webp. Подготовить к публикации в интернете и конвертировать изображение в формат WebP, можно в редакторе GIMP.
Тест PageSpeed Insights. Для примера возьму одну из страниц с фотографиями https://computer.freewebmaster.info/2020/01/ssd-samsung-860-evo.html блога на Blogger. Общий результат теста для компьютеров был 85 для мобильных 55. Для изображений рекомендуется использовать современные форматы:
Для мобильной версии страницы расклад по изображениям выглядит так:
Конвертация изображения в формат WebP в Blogger. Для автоматического преобразования загруженного в Blogger изображения в формат WebP, в код, указывающий на масштаб отображения такого изображения, например, s640, добавьте символы -rw:
Для конвертации оригинала изображения, которое открывается по щелчку мыши на таком изображении, добавьте символы -rw к коду масштаба в ссылке на оригинал изображения.
Стоит ли конвертировать изображения в формат WebP? Тест предыдущей страницы на PageSpeed Insights с изображениями WebP-формата показал, даже, еще худший результат, хотя, раздела с советом использовать современные форматы изображений уже небыло. Вообще, трудно объективно оценить скорость загрузки страницы, если на ней сторонние скрипты блоков рекламы и много других факторов влияния. Но и так понятно, что изображения влияли на загрузку минимально. Плюс, на данный момент, WebP не поддерживается браузером Safari. Так как процент посещений с браузера Safari высок, то использование такого формата оставлю на будущее.
Сервис Webpagetest. Для анализа скорости загрузки страницы, интересным будет сервис Webpagetest. На странице Webpagetest, можно найти ссылку на сервис оценки стоимости сайта What Does My Site Cost? По ссылке меню Image Analysis открывается сервис Website Speed Test, где уже проанализированы изображения страницы сайта.
Website Speed Test анализирует изображения сайта и конвертирует в оптимальные форматы. Замечу, что на вкладке альтернативного формата WebP, конечно же, не все значки браузеров отображены, как поддерживающие этот формат. Скачать изображения можно опцией в вверху справа.
Кстати, замечу, что автоматически сконвертированное изображение в формат WebP системой Blogger, весит в несколько раз больше чем предлагаемое здесь. Проверил по качеству - разницы не увидел.
Выбор формата изображения. Если, протестировав сайт на скорость загрузки, при помощи сервиса PageSpeed Insights от Google, вы получили совет использовать современные форматы изображений, узнайте, поддерживаются ли такие форматы браузерами, доступна ли анимация и канал прозрачности (альфа-канал).
Существуют три стандартных формата изображений: GIF, PNG и JPEG. Кроме них, почти все браузеры поддерживают и новые форматы WebP и JPEG XR, для которых доступно большее сжатие. Последние версии браузера Mozilla Firefox, также, поддерживают WebP. Информация по оптимизация изображений от Google.
В формате PNG не применяется сжатие с потерей данных, поэтому изображение сохраняется в самом высоком качестве, но может весить больше, чем файлы других форматов. В формате JPEG используется комбинация сжатия с потерями и без потерь. Формат подходит для оптимизации фотографии.
Формат WebP. Формат WebP создан в 2010 году Google. Поддерживает прозрачность (альфа-канал). Конвертация изображений. На данный момент поддерживается почти всеми браузерами https://caniuse.com/#feat=webp. Подготовить к публикации в интернете и конвертировать изображение в формат WebP, можно в редакторе GIMP.
Тест PageSpeed Insights. Для примера возьму одну из страниц с фотографиями https://computer.freewebmaster.info/2020/01/ssd-samsung-860-evo.html блога на Blogger. Общий результат теста для компьютеров был 85 для мобильных 55. Для изображений рекомендуется использовать современные форматы:
Для мобильной версии страницы расклад по изображениям выглядит так:
Конвертация изображения в формат WebP в Blogger. Для автоматического преобразования загруженного в Blogger изображения в формат WebP, в код, указывающий на масштаб отображения такого изображения, например, s640, добавьте символы -rw:
<a href="https://1.bp.blogspot.com/.../s1600/name.png">
<img data-original-height="251" data-original-width="761" height="210"
src="https://1.bp.blogspot.com/.../s640-rw/name.png" width="640" /></a>
Для конвертации оригинала изображения, которое открывается по щелчку мыши на таком изображении, добавьте символы -rw к коду масштаба в ссылке на оригинал изображения.
<a href="https://1.bp.blogspot.com/.../s1600-rw/name.png">
<img data-original-height="251" data-original-width="761" height="210"
src="https://1.bp.blogspot.com/.../s640-rw/name.png" width="640" /></a>
Стоит ли конвертировать изображения в формат WebP? Тест предыдущей страницы на PageSpeed Insights с изображениями WebP-формата показал, даже, еще худший результат, хотя, раздела с советом использовать современные форматы изображений уже небыло. Вообще, трудно объективно оценить скорость загрузки страницы, если на ней сторонние скрипты блоков рекламы и много других факторов влияния. Но и так понятно, что изображения влияли на загрузку минимально. Плюс, на данный момент, WebP не поддерживается браузером Safari. Так как процент посещений с браузера Safari высок, то использование такого формата оставлю на будущее.
Сервис Webpagetest. Для анализа скорости загрузки страницы, интересным будет сервис Webpagetest. На странице Webpagetest, можно найти ссылку на сервис оценки стоимости сайта What Does My Site Cost? По ссылке меню Image Analysis открывается сервис Website Speed Test, где уже проанализированы изображения страницы сайта.
Website Speed Test анализирует изображения сайта и конвертирует в оптимальные форматы. Замечу, что на вкладке альтернативного формата WebP, конечно же, не все значки браузеров отображены, как поддерживающие этот формат. Скачать изображения можно опцией в вверху справа.
Кстати, замечу, что автоматически сконвертированное изображение в формат WebP системой Blogger, весит в несколько раз больше чем предлагаемое здесь. Проверил по качеству - разницы не увидел.
Комментариев нет:
Отправить комментарий