Охватывая современные форматы изображений · Джош У Комо

В Стоимость Javascript Стоимость Javascript Адди делает действительно хорошую мысль: 200kb Javascript это более «дорогой», чем 200 КБ изображений, потому что браузер должен сделать больше работы, чтобы использовать код по сравнению с изображениями. Из статьи:

Изображение JPEG необходимо декодировать, растеризовать и нарисовать на экране. Пакет JavaScript должен быть загружен, а затем проанализирован, скомпилирован, выполнен — ​​и есть ряд других шагов, которые нужно выполнить движку. Просто имейте в виду, что эти затраты не совсем эквивалентны.

Это все еще очень верно, но это немного менее важно в данный момент истории.

С пандемией Во всем мире я обнаружил, что мой интернет стал довольно изменчивым. К счастью, поскольку инженеры по надежности сайтов являются блестящими и неутомимыми, большая часть интернета все еще работает, но определенно что-то происходит — у меня соединение со скоростью 100 Мбит / с, но сейчас это больше похоже на 3G.

Это немного смещает расчет. Наши устройства по-прежнему могут анализировать и компилировать JavaScript с той же скоростью, с которой они могли бы пару недель назад, но скорость работы в сети стала меньше. Таким образом, необработанное число битов в сети очень важно прямо сейчас!

И сайты обычно способ изображений стоимостью более 200 КБ; на странице нередко бывает нескольких мегабайт изображений. Многие разработчики (включая меня) склонны вообще не задумываться о размере носителя.

К счастью, есть несколько довольно висящих фруктов! В этом уроке мы увидим, как мы можем использовать форматы изображений следующего поколения, такие как WebP. Эти изображения часто в 2-3 раза меньше чем традиционные форматы, которые мы знаем и любим (jpg, png). Это может иметь огромное значение.

Есть три формата, которые мы можем использовать:

Мы проведем большую часть нашего времени сегодня, обсуждая webp но мы вернемся к двоюродным братьям jpeg, когда будем обсуждать совместимость браузера .

Несколько месяцев назад Я использовал это изображение в сообщении:

Я провел несколько экспериментов, используя jpg и png для исходного изображения. Я оптимизировал их, используя imagemin imagemin чтобы увидеть, насколько хороши эти «ретро» форматы.

Результаты довольно впечатляющие:

Я тестировал его на многих изображениях, и он почти всегда создает файлы, которые на 30-70% меньше, чем даже оптимизированные изображения!

Как насчет SVG? Я не проверял это на SVG вообще. SVG — векторный формат, то есть он состоит из математических инструкций, а не из отдельных цветов пикселей. Было бы стыдно потерять преимущества масштабирования векторного формата, и я подозреваю, что в большинстве случаев он увеличит размер файла.

.webp пользуется поддержка в большинстве браузеров:

Критически, нам не хватает Safari и Internet Explorer.

Как насчет JPEG 2000?

Хорошо, так что мы Заполнен в Safari, но все еще есть противный Internet Explorer…

Мы нажали на бинго caniuse! Благодаря этим трем форматам изображений мы получаем идеальный охват по всему спектру браузеров. *

Давайте посмотрим, как мы выбираем и выбираем разные форматы для разных браузеров

В HTML есть два элемента изображения: международная поп-звезда img и изображение нишевого хипстерского художника . . ] *

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

Вот как это выглядит:

 
 Изображение   тег поддерживает группу  source  детей. Браузер последовательно анализирует элементы источника   и ищет первый, который он может использовать на основе типа  . Когда он находит его, он выясняет, где изображение живет с помощью  srcset и обменивает его на  img   src  
 
  ] srcset  может делать много сложных вещей, но, к счастью для нашего сценария использования, мы можем рассматривать его так же, как  src . По сути,  source  является config, и он вставляет соответствующее значение в  img . 
 
 В Chrome, например, мы получаем что-то более или менее эквивалентно этому: 
 
 
 Этот каскад источников означает, что один будет совпадать в каждом браузере: большинство браузеров будут использовать  webp Safari будет использовать  jp2  и IE будет использовать  jxr . 
  
 Вышеуказанный фрагмент отличается своей способностью сопоставлять все возможные браузеры с современным форматом изображений «следующего поколения». Но предполагается, что эти изображения существуют в этих форматах. 
 
 Если мы создаем эти изображения вручную, это много ручного труда. И если мы генерируем их автоматически, это может значительно увеличить время сборки; Обработка изображений, как известно, медленная, когда выполняется в масштабе. 
 
 В моем собственном блоге, который получает очень мало трафика Internet Explorer    *   I ' Я выбрал более ленивое решение: 
 
 
 Я предлагаю хороший и крошечный веб-сайт   браузерам, которые его поддерживают (Chrome, Firefox, Edge), и возвращаюсь к наследию  jpg  для браузеров, которые этого не делают (IE, Safari). 
 
 Для меня это пример прогрессивного улучшения  . Все по-прежнему работает в старых браузерах, но загрузка изображений будет немного медленнее. Это компромисс, с которым я в порядке. 
 
 (Надеюсь, Apple скоро сядет на этот поезд! 🤞🏻) 
 
 Обозреватели devtools будут  всегда думать что у изображения есть то, что  источник  вы дали ему изначально. Если вы проверите его на панели элементов, вы увидите, что он использует  .jpg . 
 
 Чтобы проверить, работает ли он на самом деле, лучший трюк, который я нашел, состоит в том, чтобы нажмите и «Сохранить как…». В Chrome вы должны получить формат файла «Google WebP», тогда как в Safari или IE вы должны получить «JPEG». 
 
 Вы также можете проверить вкладку сети, чтобы увидеть, какая из них была фактически загружена. 
 
 
     Преобразование изображений в webp 
 
 
 Google создал набор инструментов для помощи мы работаем с файлами  webp . Одним из таких инструментов является  cwebp   cwebp который позволяет конвертировать другие форматы изображений в webp. 
 
 Если вы работаете в MacOS, вы можете установить пакет с помощью Homebrew : 
 
 
 На других платформах, я полагаю, вам необходимо скачать соответствующий  пакет libwebp   пакет libwebp  из их репозитория. 
 
 после установки вы можете использовать его следующим образом: 
 
 
 
   -q 80  — это флаг для установки «качества» от 1 (наихудший) до 100 (лучший). Вы можете экспериментировать с разными значениями. Я обнаружил, что 70-80 — это лучшее место.  
 
   cereal.png  — это путь к входному файлу, который вы хотите преобразовать.  
 
   -o cereal.webp  — выходной путь.  
 
 Тратить время на выполнение этих действий вручную — это не идея хорошего времени. В следующем посте я буду изучать различные стратегии автоматизации этого процесса, так что нам никогда не придется думать об этом и получать все преимущества бесплатно! 
 Если это вас интересует,   будьте уверены подписаться   не забудьте подписаться чтобы вы не пропустили его. 
  
 Компонент — это блестящий способ абстрагироваться от некоторых забав с помощью    элемент. Вот что я использовал для великолепного эффекта: 
 
 
 Мы можем использовать  ImgWithFallback  очень похоже на то, как мы использовали бы тег  img : 
 
 
 
    Использование со стилизованными компонентами 
 
 
 Если вы используете стиль  компоненты  или Emotion, вы можете быть использованы для упаковки изображений в стилизованную оболочку: 
 
 
 К счастью,  это все еще работает  с нашим  компонентом ImgWithFallback . Мы можем обернуть его как любой другой компонент: 
 
 
 Причина, по которой это работает, заключается в том, как работает помощник  в стиле . Он генерирует класс и внедряет его в таблицу стилей документа, а затем передает сгенерированное имя класса в виде реквизита: 
    
 Мы делегируем все свойства дочернему элементу  img поэтому правильные стили по-прежнему соответствуют изображению. К счастью, все работает так, как вы ожидаете. 
  
 Если вы разрабатываете с помощью Gatsby, пакет  gatsby-image  уже выполняет кучу оптимизаций из коробки, включая преобразование в  webp  (хотя вы должны выбрать его). 
 
 Gatsby Image не предназначено для замены  img ; это может быть немного сложнее в использовании, но он также поставляется с  множеством  дополнительных магических уловок для вашей проблемы. 
 
 Проверьте   документы   Документы  для получения дополнительной информации. 
 
 Единственный реальный недостаток, который я обнаружил на данный момент, заключается в том, что  webp  является раздражающим форматом для работы в качестве пользователя. 
 
 Большинство настольных программ еще не поддерживают его; Я не могу открыть его в Preview на MacOS, например. Это означает, что если я щелкну правой кнопкой мыши и "Сохранить как …" изображение  webp я не смогу его просмотреть! 
 
 Преобразование webp   в  jpg  относительно безболезнен, и поиск в Google обнаруживает многих онлайн-провайдеров, которые сделают это бесплатно. Но все же, это дополнительный бит трения. Если ваш сайт / приложение поощряет пользователей загружать изображения, возможно, вы не захотите делать это. 
 
 Я очень рад, что сократил размер изображений в моем блоге примерно на 50%. В дополнение к преимуществам пользовательского опыта в критическое время, я также ожидаю, что это сэкономит мне немного денег с точки зрения пропускной способности. 
 
 Конечно, не представляется практичным вручную конвертировать каждый image Я использую для  WebP . Я уже изучаю, как автоматически генерировать эти изображения из исходных файлов  jpg  и  png . В идеале, я не должен думать об этом, это должно происходить автоматически, когда я создаю свой сайт. Ожидайте увидеть что-нибудь об этом в ближайшее время =)