От автора: сегодня вы узнаете, как увеличить скорость загрузки сайта и веб-приложений, используя Google WebP, мощную технологию сжатия изображений. WebP является близким родственником формата WebM (сжатие видео), который я недавно рассмотрел здесь на TechStacker. Вы также узнаете, как использовать два простых метода предоставления резервных вариантов… Я имею в виду не очень современные веб-браузеры.
Скорость — это важно
Быстрая загрузка вашего сайта всегда должна быть основным приоритетом. Ни у кого нет слишком много терпения. Даже одна единственная секунда может стоить вам тысяч, миллионов или даже миллиардов долларов дохода.
Солидная цифра, не так ли? Ну, согласно собственным расчетам Amazon, замедление загрузки даже на одну секунды может стоить им 1,6 миллиарда долларов продаж в год.
Согласно тестам Google, 53% мобильных пользователей покидают сайт, если загрузка занимает более трех секунд. Как вы знаете, одной из основных причин медленной загрузки страницы являются изображения. Или, скорее комбинация различных изображений — от собственно изображений до различных графических ресурсов, таких как иконки и логотипы.
И именно здесь в дело вступает WebP.
Оптимизация изображений с помощью WebP
Удивительно, но большинство людей, работающих в области информационных технологий, не используют WebP. Это позор, потому что этот формат позволят значительно увеличить среднюю скорость загрузки страницы на любом веб-сайте.
Наиболее распространенными типами изображений, используемыми в Интернете, являются PNG, JPG, GIF и SVG. Я имею в виду для тех из нас, кто работает с файлами изображений на регулярной основе. Широкая публика ничего не знает о форматах файлов.
Надеюсь, в этом списке скоро появится WebP, но этого не произойдет, пока разработчики, дизайнеры и специалисты не начнут использовать и продвигать современные веб-технологии. WebP был представлен в 2010 году, поэтому это не совсем новая технология, но ее принятие было трагически медленным.
Чем хорош WebP
Вы можете конвертировать любой из распространенных форматов файлов в WebP. Сохраняя первоначальное качество (сжатие без потерь).
Согласно исследованию, WebP-версия для файла JPG будет иметь до 34% меньший размер, чем исходный JPEG-файл. И до 45% меньше, чем PNG-изображение — без потери качества
Является ли WebP совместимым со всеми веб-браузерами?
Нет, но вы все равно можете использовать WebP, не нарушая / не повреждая изображения в других браузерах, используя резервный вариант. Пока что WebP поддерживается только в Chrome и Opera. FireFox работает над его добавлением. На момент написания статьи Edge не анонсировали таких планов.
Позвольте мне повторить, потому что это важный момент: Вы можете использовать WebP, со всеми его преимуществами по сравнению с PNG и JPEG, для всех пользователей Chrome и Opera. Добавив простой резервный вариант, вы можете предоставить посетителям, использующим FireFox или другие браузеры, исходный файл (и больший размер файла). Будь то PNG, JPEG или что-то еще.
И кстати: Chrome, Opera и Android полностью поддерживают WebP, вместе они составляют 74% всех пользователей Интернета!
Сейчас мы просто ждем FireFox, Edge и Safari.
Не помню, говорил ли я, что совместимость не является проблемой для пользователей Firefox, Safari и Explorer / Edge? Боже благослови резервные варианты.
Как использовать WebP с резервными вариантами (руководство)
Существует несколько способов создания резервного варианта для WebP. Это один из основных способов реализации:
<picture> <source srcset="your-image.webp" type="image/webp"> <img src="your-image.jpg"> </picture>
Вы просто добавляете одну ссылку на формат WebP и одну ссылку на исходный формат файла (JPEG, PNG и т. l.). Тогда браузеры, поддерживающие WebP, будут отображать этот формат, а остальные — любой другой формат исходного файла изображения.
Но приведенный выше способ может привести к дополнительной ручной работе. Вы также можете автоматизировать весь процесс, прибегнув к услугам одной из ведущих компаний, предоставляющих сервисы облачного хранения файлов. Давайте рассмотрим, как это работает.
Как автоматизировать преобразование в WebP
Здесь, в TechStacker, мы используем для размещения изображений Cloudinary. В настройках изображений Cloudinary предоставляет параметр, автоматически добавляемый к каждому изображению, для которого вы хотите использовать WebP.
Затем CloudMan автоматически загружает изображения в формате WebP для всех посетителей, которые используют Chrome или Opera, с помощью специального тега.
От JPEG к WebP
Давайте рассмотрим эту замечательную графическую работу моего друга, Аарона Рида:
Изображение выше имеет формат JPEG. Оно размещено в аккаунте TechStacker на Cloudinary, с использованием тега f_auto в URL-адресе (который автоматически предоставляет версию WebP для пользователей Chrome / Opera):
Если вы просмотрите это изображение в Chrome или Opera, оно будет иметь размер 58 КБ. Если вы просмотрите его в FireFox или другом браузере, несовместимом с WebP, оно будет иметь размер 68 КБ.
Это разница в 15%, и на самом деле это при сжатии на самом низком уровне того, вы можете сжимать JPEG (до 34%). Это легко проверить. Просто откройте URL-адрес изображения выше, в Chrome и FireFox, затем загрузите его и сравните размеры (и форматы) файлов. Не беспокойтесь о пути URL выше, в котором указано расширение .jpg, изображение будет обслуживаться как .webp в Chrome и Opera.
Теперь представьте, что на вашем сайте есть 10, 20 или несколько сотен изображений различных форматов и размеров. Вот, где на помощь придет WebP. Огромное сокращение объемов передачи данных с вашего хостинга / хостинга изображений и уменьшение использования пропускного канала ваших пользователей.
Мы говорим не только о мегабайтах, мы говорим о гигабайтах и потенциально еще больше (если ваша платформа достаточно велика). Это серьезный объем сэкономленных энергии, времени и денег — и с минимальными усилиями с вашей стороны!
Заключение
Это не просто функция скорости, но и одна из важнейших функций в принципе. Особенно с учетом конкурентной среды, где ваш сайт не единственный игрок в городе. Теперь вы знаете, как использовать WebP для уменьшения размеров файлов изображений и ускорения загрузки страниц. Это напрямую влияет на результат вашего бизнеса или бизнеса вашего клиента.
Автор: David
Источник: https://techstacker.com/
Редакция: Команда webformyself.