Отзывы по результатам опроса по оптимизации изображений, проведенного летом 2019 г.

Комментарии респондентов опроса о различных методах оптимизации изображений

Сэм Даттон

В этом посте перечислены отзывы в свободной форме, которые Google Web DevRel получил в ходе опроса по методам оптимизации изображений летом 2019 года. Ответы были получены через Web Fundamentals и @ChromiumDev . Целью опроса было выяснить, почему большинство сайтов не следуют лучшим практикам оптимизации изображений, хотя они кажутся относительно простым способом повышения производительности. Данные ответов здесь не приведены, поскольку в методологии опроса были допущены недостатки.

Аудитория

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

Комментарии

ВебП

  • «Мне нравится WebP, но он еще не полностью готов. Более того, наш WordPress не поддерживает WebP. Одно из самых популярных приложений для редактирования фотографий, Photoshop, также не поддерживает WebP «из коробки». Так что мы можем» Не полагайтесь на сторонние приложения или сервисы для сжатия изображений».
  • «Сделайте WebP пригодным для использования в Safari».
  • «Мне бы хотелось использовать WebP, если бы я мог экспортировать их из Photoshop/Figma/Sketch и чтобы все браузеры поддерживали его». [Примечание: Sketch поддерживает WebP]
  • «Решение для форматирования следующего поколения было бы отличным».
  • «Перестаньте так сильно продвигать WebP, когда поддержка браузеров плохая, и рассмотрите необходимость использования PNG вместо JPEG для скриншотов».
  • «Документы Google не поддерживают WebP».
  • «Мы хотели бы использовать исключительно WebP, но нас беспокоит совместимость браузеров».
  • «Сначала исправьте совместимость браузера и обновите устаревшие браузеры или добавьте устаревшие исправления, тогда люди будут более склонны адаптироваться к новым типам изображений, таким как WebP…»
  • «Поощряйте разработчиков плагинов/тем рассмотреть возможность предоставления поддержки WebP и других типов изображений следующего поколения, чтобы неразработчикам не приходилось с этим возиться».

SVG и векторные изображения

  • «Если возможно, я использую (анимированный) SVG. gatsby-image исправило многое из этого. Но когда вы вникаете в то, что они сделали, совершенно нереально, что обычному веб-сайту придется создавать что-то подобное, чтобы получать изображения». чтобы работать правильно. Браузер должен взять на себя большую часть этой ответственности».
  • «Можно ли задокументировать, как создавать SVG-анимацию с помощью lottie.js ?»
  • «Большую часть времени мы стараемся использовать на нашем веб-сайте изображения JPEG с большим разрешением и небольшими размерами, чтобы избежать времени загрузки. Мы также гарантируем использование SVG, когда это необходимо, чтобы обеспечить качество адаптивного дизайна».
  • «Мы стараемся использовать оптимизированную векторную графику для всех изображений, кроме изображений».

Другие форматы изображений

  • «Нам [нужно] лучше просвещать людей, чтобы они перестали использовать GIF».

Ленивая загрузка

  • «Пожалуйста, помните о пользователе при рассмотрении таких функций, как отложенная загрузка, потому что многих это раздражает».
  • «Пожалуйста, сделайте так, чтобы атрибут отложенной загрузки работал с фоновым изображением».
  • «Фреймворки должны лучше обрабатывать активы из коробки».
  • «Мы уже давно перешли на отложенную загрузку. Пользователи сообщают о миллионах изображений и сайтах, которые «НЕ ЗАГРУЗЯТСЯ». Это понимание, которое наша команда резюмировала так. Нетехническим пользователям трудно описывать проблемы».
  • «Я хочу лучше понять, как использовать Intersection Observer API для отложенной загрузки, а не использовать традиционные методы».
  • «У меня это хорошо работает: pwafire.org/developer/codelabs/progressive-loading ».

Фоновые изображения

  • «Обычно я загружаю изображения в качестве фона в CSS».
  • «Тег <img> проблематичен, и его сложно контролировать детализированные детали, особенно с контентом, отправленным пользователем. Мы используем <div> и стили фонового изображения гораздо чаще, поскольку это позволяет нам использовать фоновый размер, фоновый- положение и запретить сохранение изображения при щелчке правой кнопкой мыши».

Прозрачность

  • «На дворе 2019 год. Как файлы JPG до сих пор не имеют альфа-прозрачности?»
  • «Я использую PNG для фотографий только тогда, когда мне нужен прозрачный фон».

Заполнители изображений низкого качества (LQIP)

  • «Мы используем LQIPS, и это отличный метод, позволяющий удержать внимание посетителей без предварительной загрузки изображений высокого качества».

Производительность

  • «На самом деле у нас недавно возникла проблема с производительностью изображений. Когда пользователь прокручивает наш сайт вниз, мы показываем следующие 60 карточек, которые содержат миниатюры. Из-за ограничения на 6 подключений в одном домене миниатюры блокировались, а также следующий запрос AJAX для получения следующих 60 карточек, если пользователь продолжает прокручивать вниз».
  • «Мы хотели бы использовать HTTP/2, но большинство наших клиентов используют IE11! Поэтому мы изучаем сегментирование домена / загрузку запросов данных AJAX JSON из другого домена».

Размеры

  • «Извините за внутренний размер; мне кажется, лучше использовать высоту/ширину».
  • «Ищу способ генерировать меньшие размеры, сейчас это ~ 12».
  • «Динамическое изменение размера изображений действительно сложно и невозможно без JS».
  • «Такой инструмент, как Responsebreakpoints.com, хорош для web.dev :)».

Изображения высокого качества и высокого разрешения

  • «Как скачать сжатые изображения без потери качества DPI?»
  • «Мы — компания по управлению документами. Наши приложения обрабатывают МИЛЛИОНЫ отсканированных изображений в высоком разрешении, обычно в формате TIFF или PDF».
  • «Это хлопотно. Файлы img с высоким разрешением необходимы для формата печати; они должны быть оптимизированы для Интернета. Уменьшить размер изображений для Интернета сложно, но это мешает, если авторы предоставляют только легкие файлы для изображений, предназначенных для печатной публикации. Мы в конечном итоге мы получаем смешанные сообщения о требованиях к отправке рукописей с иллюстрациями. Затем мы сталкиваемся со сложными рабочими процессами для обработки этих материалов».

Возможности браузера

  • «Автоматическая обрезка src из браузера в качестве [встроенной] функции была бы очень полезной, поскольку обрезка всех изображений до 4 размеров и написание всей разметки занимает много времени. Если мы сможем загрузить одну большую фотографию и написать простой тег изображения, который браузеры автоматически создадут несколько атрибутов src, что станет выигрышной функцией».
  • «Лично мне трудно избежать перекомпоновки страницы, когда изображение с задано CSS для адаптивных изображений (максимальная ширина: 100%; высота авто или высота: ширина: 100%; высота авто), особенно в сочетании с художественным направлением из адаптивных изображений/тега изображения. Кажется, лучший способ избежать этого - использовать «хак с отрицательным заполнением» для фиксированного соотношения сторон изображения, а затем поместить изображение внутри этого поля соотношения. Лучшая поддержка браузера/отзывчивая обработка изображений была бы действительно большой помощью!»
  • «Пожалуйста, отключите «автовоспроизведение» GIF, выбрав только первый кадр».

CDN и сервисы изображений

  • «Google должен предоставить бесплатный CDN, такой как Cloudflare».
  • «Возможно, было бы неплохо получить больше инструментов для настройки динамического масштабирования и CDN с разными провайдерами».
  • «Одно сверхсжатое изображение большого размера — это очень достойное решение без дополнительных производственных затрат. Вам нужны изображения шириной около 1000 пикселей для мобильных устройств (ширина рендеринга 500 пикселей), и этот размер также нужен для больших настольных дисплеев без Retina. Я думаю, что это размер, который вам нужен. CDN с изменением размера изображений — очень плохое решение, хотя я использовал его в прошлом. CMS должна обрабатывать изменение размера, и поэтому ее слишком сложно настроить, одно решение — хороший компромисс (на данный момент)».
  • «CloudFlare автоматически масштабирует наши изображения, чтобы они наилучшим образом соответствовали дисплею пользователя. Таким образом, мы можем сэкономить время загрузки, поскольку изображения загружаются относительно дисплея пользователя. Например, если пользователь использует телефон, оно не будет загружаться в фон размером с рабочий стол».
  • «Cloudflare делает это в фоновом режиме, и нам не нужно ничего делать, кроме как установить флажок на панели настроек».
  • «Повторю еще раз: единственная причина, по которой я могу успешно использовать srcset и т. д., — это простота Cloudinary. Но Cloudinary очень быстро становится дорогой. Это похоже на серьезную дыру в опыте разработки».
  • «Нам нужен способ легко и разумно автоматически обрезать изображения, чтобы они могли работать с разными соотношениями сторон в разных контекстах».
  • «Я также использую изображения от других поставщиков, таких как Unsplash, где очень мало контроля над разрешением, качеством и сжатием».

CMS, платформа и фреймворк

  • «Я до сих пор пытаюсь выяснить, как лучше всего использовать изображения, когда создаю сайт с помощью CMS. Авторы склонны настраивать изображения с разными размерами и ожидают, что изображения не будут сжиматься или масштабироваться. Я не уверен, так ли это. ОК, чтобы установить максимальную ширину или максимальную высоту для изображений"
  • «Я использовал gatsby-image в последних нескольких проектах и ​​никогда не оглядывался назад».
  • «Изображения часто являются самой сложной частью, поскольку они помещаются в CMS конечным пользователем. Они могут использовать любой размер и формат, иногда исходное изображение в идеальном формате изображения, а размеры недоступны».
  • «Изображения сложно поддерживать, поскольку наша система работает самостоятельно. Добавление элементов управления затруднено, если только что-то не происходит автоматически, не влияя на разрешение. Кроме того, для нас изображения не выглядят правильно на мобильных устройствах и на настольных компьютерах».
  • «Я помогаю людям оптимизировать их сайты (WordPress). Самые большие проблемы, которые я видел с изображениями, заключаются в следующем: необходимость зависеть от CDN или плагинов для создания WebP. srcset/picture должен быть правильно закодирован разработчиками тем. Большая часть Плагины с ленивой загрузкой загружаются медленно, что приводит к плохому пользовательскому интерфейсу. Фоновые изображения сложно загружать с отложенной загрузкой».

Затрат и выгод

  • «Новые методы эффективны, но увеличивают время разработки сайтов».
  • «Многие компании из списка Fortune 500 медленно внедряют новые стандарты, такие как srcset и WebP. Видя это, многие компании сопротивляются этим изменениям, считая их ненужными затратами на разработку существующих веб-сайтов. Прирост производительности не является массовым. обсуждается или сообщается конечным пользователем (UX). Во всяком случае, это несколько усложняет сохранение изображений из Интернета».
  • «Создание и управление несколькими размерами и версиями обходится дорого».
  • «Они занимают много места на нашем сервере».

SEO

  • «Трудно найти баланс между приемлемым качеством изображения и размером файла. С одной стороны, я хочу быструю загрузку для улучшения SEO, но с другой стороны, изображения низкого качества будут ухудшать UI/UX».

Роль изображений в сети.

  • «В Интернете их слишком много. Прекратите использовать бесполезные изображения, которые не улучшают письменный контент».
  • «Вы еще помните время, когда в сети не было изображений и мы делились селфи в формате ASCII-арта?»

Инструменты, рекомендации, стандарты и передовой опыт: разочарования и запросы

  • [Один участник написал сообщение в блоге в ответ на этот опрос]
  • «Похоже, что требования постоянно меняются. Веб-разработчика это очень расстраивает, потому что сохранение изображений отнимает много времени. Мы оптимизируем все, что можем, проверяем сайт, а затем, несколько месяцев спустя, Google решил, что изображения могут быть еще более сжаты или должны быть в другом формате. Это не позволяет нам предоставить нашим клиентам наилучшее решение, которое будет длиться долго, и вместо этого создает дорогостоящие усилия для них и для нас. Некоторые из наших клиентов из малого бизнеса просто не У нас нет бюджета на исправление изображений и их повторное сохранение в соответствии с требованиями. У нас нет бюджета на выполнение этой работы в их пакетах управления. Написание кода для вызова изображений разных размеров для разных устройств — это Кроме того, это отнимает много времени. Было бы здорово придумать систему сохранения изображений, которая бы сохраняла стабильность в течение более длительного периода времени».
  • «Да, я думаю, что в Lighthouse вы неправильно поняли «Сохранять низкое количество запросов и небольшие размеры файлов». Если сайт обслуживает HTTP1.x, тогда конечно, но если сайт обслуживает HTTP2, тогда количество запросов менее важно или нет. даже проблема, если она исходит от одного и того же имени хоста. У меня есть облегченный веб-сайт, но я загружаю 30 небольших файлов WebP, в общей сложности около 35 запросов, через HTTP2 на одно и то же имя хоста. Lighthouse помечает это как «Сохранять низкое количество запросов и размеры файлов». «Небольшая» проблема, тогда как она очень быстрая, и из-за HTTP2 на том же имени хоста количество запросов не является проблемой. И да, файлы уже маленькие (большинство от 1 КБ до 2 КБ или меньше). Я мог бы загрузить спрайт но тогда необходимо выполнить больше вычислений CSS. Поэтому, пожалуйста, обновите отчет «Сохраняйте низкое количество запросов и небольшие размеры файлов» в Lighthouse, чтобы учитывать HTTP2 для того же имени хоста».
  • «Людям было трудно не забывать сжимать свои изображения».
  • «Кроссбраузерное поведение остается непредсказуемым, поэтому самые простые решения часто являются самыми безопасными».