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

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

Sam Dutton

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

Аудитория

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

Комментарии

WebP

  • "Мне нравится 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> и стили background-image, поскольку это позволяет нам применять background-size и background-position, а также запрещать сохранение изображения по нажатию правой кнопки мыши".

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

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

Плейсхолдеры изображений низкого качества

  • "Мы используем LQIP, и это отличный способ удержать посетителей, не загружая изображения высокого качества слишком рано".

Эффективность

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

Размеры

  • "Извините за intrinsicsize; по-моему, лучше использовать height/width".
  • "Ищу способ генерировать меньше размеров, сейчас их около 12".
  • "Динамическое изменение размера изображений – это очень сложная задача, которую невозможно решить без JS".
  • "Для web.dev хорошо подходит инструмент responsivebreakpoints.com".

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

  • "Как скачать сжатые изображения без потери качества DPI?"
  • "Мы занимаемся управлением документами. Наши приложения обрабатывают МИЛЛИОНЫ отсканированных изображений высокого разрешения, обычно в формате TIFF или PDF".
  • "Это хлопотно. Для печати необходимы изображения высокого разрешения, оптимизированные для интернета. Уменьшать изображения для публикации в интернете – это хлопотно, но если авторы предоставляют только легкие файлы для изображений, предназначенных для печати, то это может стать серьезной проблемой. Мы даем противоречивые указания о требованиях к рукописям с иллюстрациями. В результате у нас получаются сложные рабочие процессы для обработки этих материалов".

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

  • "Было бы очень удобно, если бы в браузере была встроенная функция автоматической обрезки изображений для адаптивного дизайна. Сейчас приходится вручную обрезать все изображения до четырех размеров и писать всю разметку. Если бы мы могли загрузить одну большую фотографию и написать простой тег, чтобы браузеры автоматически создавали несколько атрибутов src, это было бы отличным решением".
  • "Лично мне трудно избежать смещения макета, когда ширина адаптивных изображений задается с помощью CSS (max-width: 100%; height auto или height: width: 100%; height auto), особенно в сочетании с художественным оформлением адаптивных изображений/тегом picture. Чтобы избежать этого, лучше всего использовать отрицательные поля для фиксированного соотношения сторон изображения, а затем разместить изображение внутри этого поля. Было бы здорово, если бы браузеры лучше поддерживали адаптивные изображения".
  • "Отключите автовоспроизведение GIF-файлов, извлекая только первый кадр".

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

  • "Google должна предоставлять бесплатную сеть доставки контента, как Cloudflare".
  • "Было бы неплохо иметь больше инструментов для настройки динамического масштабирования и сетей доставки контента с разными поставщиками".
  • "Одно большое изображение с высокой степенью сжатия – это очень хорошее решение, не требующее дополнительных затрат. Для мобильных устройств нужны изображения шириной около 1000 пикселей (ширина отрисовки 500 пикселей). Такой же размер нужен для больших экранов и экранов компьютеров без Retina. Я считаю, что сети доставки контента, которые меняют размер изображений, – это очень плохое решение, хотя раньше я ими пользовался. Изменение размера должна выполнять CMS. Если это слишком сложно настроить, то единое решение – хороший компромисс (на данный момент)".
  • "CloudFlare автоматически масштабирует наши изображения, чтобы они лучше соответствовали экрану пользователя. Это позволяет сократить время загрузки, поскольку изображения загружаются в соответствии с дисплеем пользователя. Например, если пользователь зашел с телефона, фон не будет загружаться в размере для компьютера".
  • "Cloudflare делает это в фоновом режиме, а нам нужно только установить флажок на панели настроек".
  • "Повторюсь, что единственная причина, по которой я могу успешно использовать srcset и другие атрибуты, – это простота Cloudinary. Но Cloudinary очень быстро становится дорогим. Это кажется серьезным недостатком в процессе разработки".
  • "Нам нужен простой способ автоматически кадрировать изображения, чтобы они подходили для разных соотношений сторон в разных контекстах".
  • "Я также использую изображения от других поставщиков, например Unsplash, где разрешение, качество и сжатие практически не контролируются".

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

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

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

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

Поисковая оптимизация

  • "Трудно найти баланс между приемлемым качеством изображения и размером файла. С одной стороны, мне нужна быстрая загрузка, чтобы улучшить поисковую оптимизацию, а с другой – изображения низкого качества ухудшат интерфейс и взаимодействие с пользователем".

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

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

Инструменты, рекомендации, стандарты и лучшие практики: проблемы и запросы

  • [Один из участников написал запись в блоге в ответ на этот опрос]
  • "Требования постоянно меняются. Как веб-разработчика меня это очень раздражает, потому что на сохранение изображений уходит много времени. Мы оптимизируем сайт, как можем, проверяем его, а через несколько месяцев Google решает, что изображения можно сжать ещё сильнее или что они должны быть в другом формате. Это мешает нам предлагать клиентам лучшие решения, которые будут работать долго, и приводит к лишним расходам для них и для нас. У некоторых наших клиентов из малого бизнеса просто нет бюджета на то, чтобы мы постоянно исправляли изображения и сохраняли их заново в соответствии с требованиями. У нас нет бюджета на то, чтобы выполнять эту работу в рамках их пакетов управления. Кроме того, написание кода для вызова изображений разных размеров для разных устройств также занимает много времени. Было бы здорово придумать систему сохранения изображений, которая оставалась бы неизменной в течение более длительного периода времени".
  • "Да, я думаю, что вы неправильно поняли рекомендацию "Keep Request Counts Low And File Sizes Small" (Сократите количество запросов и уменьшите размер файлов) в Lighthouse. Если сайт использует протокол HTTP1.x, то да, но если он использует HTTP2, то количество запросов менее важно или даже не имеет значения, если они поступают с одного и того же имени хоста. У меня легкий сайт, но я загружаю 30 небольших файлов WebP (всего около 35 запросов) по протоколу HTTP2 на одном имени хоста. Lighthouse помечает это как проблему "Keep Request Counts Low And File Sizes Small" (Сохраняйте количество запросов низким, а размеры файлов – небольшими), хотя загрузка происходит очень быстро, а благодаря HTTP2 на том же имени хоста количество запросов не является проблемой. Да, файлы уже небольшие (большинство от 1 до 2 КБ или меньше). Я мог бы загрузить спрайт, но тогда потребуется больше вычислений CSS. Поэтому обновите отчет "Keep Request Counts Low And File Sizes Small" (Ограничивайте количество запросов и размер файлов) в Lighthouse, чтобы учесть HTTP2 для одного имени хоста".
  • "Люди часто забывают сжимать изображения".
  • "Поведение разных браузеров остается непредсказуемым, поэтому самые простые решения часто являются самыми безопасными".