Комментарии респондентов опроса о различных методах оптимизации изображений
Sam Dutton
В этом посте перечислены отзывы в свободной форме, которые 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 Docs не поддерживает WebP».
- «Мы бы использовали исключительно WebP, но нас беспокоит совместимость с браузерами».
- «Сначала исправьте совместимость браузеров и обновите устаревшие браузеры или добавьте устаревшие исправления, тогда люди будут более склонны использовать новые типы изображений, такие как WebP…»
- «Поощряйте разработчиков плагинов/тем рассмотреть возможность предоставления поддержки WebP и другим типам изображений следующего поколения, чтобы неразработчикам не приходилось возиться с этим».
SVG и векторные изображения
- «По возможности я использую (анимированный) SVG. gatsby-image исправил многое из этого. Но если разобраться в том, что они сделали, то совершенно нереально, что обычному веб-сайту пришлось бы создавать что-то подобное, чтобы изображения работали правильно. Браузер должен взять на себя большую часть этой ответственности».
- «Можно ли задокументировать, как создавать SVG-анимацию с помощью lottie.js ?»
- «Мы стараемся использовать на нашем сайте изображения JPEG с большим разрешением и небольшими размерами, чтобы избежать времени загрузки. Мы также гарантируем использование SVG, когда это необходимо, чтобы обеспечить качество для адаптивного дизайна».
- «Мы стараемся использовать оптимизированную векторную графику для всего, кроме фотографий, если это возможно».
Другие форматы изображений
- «Нам [нужно] лучше информировать людей о необходимости отказаться от использования GIF-файлов».
Ленивая загрузка
- «Пожалуйста, помните о пользователе, когда рассматриваете такие функции, как отложенная загрузка, поскольку многих это раздражает».
- «Пожалуйста, сделайте так, чтобы атрибут отложенной загрузки работал с фоновым изображением».
- «Фреймворки должны лучше обрабатывать активы сразу после установки».
- «Мы давно отказались от ленивой загрузки. Пользователи сообщают о миллионах изображений и сайтов, которые «НЕ ЗАГРУЖАЮТСЯ». Так наша команда это поняла. Нетехническим пользователям сложно описать проблемы».
- «Я хочу лучше понять, как использовать API Intersection Observer для отложенной загрузки, а не использовать традиционные методы».
- «Это хорошо работает для меня: pwafire.org/developer/codelabs/progressive-loading ».
Фоновые изображения
- «Обычно я загружаю изображения в качестве фона в CSS».
- «Тег
<img>проблематичен и сложен для управления мелкими деталями, особенно с контентом, отправленным пользователями. Мы используем<div>и стили background-image гораздо чаще, поскольку они позволяют нам использовать background-size, background-position и предотвращать сохранение изображения по щелчку правой кнопкой мыши».
Прозрачность
- «На дворе 2019 год. Почему JPEG до сих пор не поддерживают альфа-прозрачность?»
- «Я использую PNG-файлы для фотографий только тогда, когда мне нужен прозрачный фон».
Заполнители изображений низкого качества (LQIP)
- «Мы используем LQIPS, и это отличный метод, позволяющий удерживать интерес посетителей без слишком ранней загрузки высококачественных изображений».
Производительность
- «У нас действительно недавно возникла проблема с производительностью изображений. Когда пользователь прокручивает страницу вниз, мы показываем следующие 60 карточек, включающих миниатюру. Из-за ограничения в 6 подключений на одном домене миниатюры блокировались, как и следующий запрос AJAX для получения следующих 60 карточек, если пользователь продолжает прокручивать страницу вниз».
- «Мы бы с удовольствием использовали HTTP/2, но большинство наших клиентов используют IE11! Поэтому мы изучаем возможность сегментирования домена/загрузки запросов данных AJAX JSON с другого домена».
Размеры
- «Извините за intrinsicsize; мне кажется, лучше использовать высоту/ширину».
- «Ищем способ уменьшить размеры, сейчас их около 12».
- «Динамическое изменение размера изображений действительно сложно и невозможно без JS».
- «Такой инструмент, как responsivebreakpoints.com , хорош для web.dev :)».
Изображения высокого качества и разрешения
- «Как загрузить сжатые изображения без потери качества DPI?»
- «Мы — компания по управлению документами. Наши приложения обрабатывают МИЛЛИОНЫ отсканированных изображений высокого разрешения, обычно в формате TIFF или PDF».
- «Это хлопотно. Для формата печати необходимы файлы img с высоким разрешением; их нужно оптимизировать для веб-сайта. Уменьшать размер изображений для веб-сайта — хлопотно, но это может стать проблемой, если авторы предоставляют только легкие файлы для изображений, предназначенных для печатной публикации. В итоге мы даем противоречивые сообщения о требованиях к представлению рукописей с иллюстрациями. Затем мы получаем сложные рабочие процессы для обработки этих материалов».
Возможности браузера
- «Автоматическая адаптивная обрезка исходного кода из браузера как [встроенная] функция была бы очень полезна, поскольку обрезка всех изображений до 4 размеров и написание всей разметки отнимает много времени. Если бы мы могли загрузить одну большую фотографию и написать простой тег изображения, который браузеры автоматически создадут для нескольких атрибутов исходного кода, это было бы выигрышной функцией».
- «Лично мне сложно избежать перекомпоновки страницы, когда изображение с задано 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 должны быть правильно закодированы разработчиками тем. Большинство плагинов отложенной загрузки загружаются медленно, создавая плохой UX. Фоновые изображения трудно поддаются отложенной загрузке».
Затраты/выгоды
- «Новые методы эффективны, но увеличивают время разработки сайтов».
- «Несоблюдение новых стандартов, таких как srcset и WebP, медленно внедряется многими компаниями из списка Fortune 500. Видя это, многие компании сопротивляются изменениям, считая их ненужными затратами на разработку текущих веб-сайтов. Конечный пользователь (UX) нечасто обсуждает или не сообщает о повышении производительности. Наоборот, это несколько затрудняет сохранение изображений из Интернета».
- «Создание и управление несколькими размерами и версиями требует больших затрат».
- «Они занимают много места на нашем сервере».
SEO
- «Сложно найти баланс между приемлемым качеством изображения и размером файла. С одной стороны, мне нужна быстрая загрузка для SEO-преимуществ, но с другой стороны, плохое качество изображений будет отвлекать от UI/UX».
Роль изображений в Интернете
- «Их слишком много в Интернете. Прекратите использовать бесполезные изображения, которые не улучшают текстовый контент».
- «Вы еще помните время, когда в Интернете не было изображений, и мы делились селфи в виде ASCII-арта?»
Инструменты, руководства, стандарты и передовой опыт: разочарования и запросы
- [Один из участников написал сообщение в блоге в ответ на этот опрос]
- «Требования, похоже, постоянно меняются. Как веб-разработчика, это крайне раздражает, потому что сохранение изображений изначально занимает много времени. Мы оптимизируем все, что можем, проверяем сайт, а затем, спустя несколько месяцев, Google решает, что изображения можно сжать еще сильнее или нужно сохранить в другом формате. Это мешает нам предоставить клиенту наилучшее возможное решение, которое будет работать долго, и вместо этого создает дорогостоящие усилия для него и для нас. У некоторых наших клиентов из малого бизнеса просто нет бюджета, чтобы мы продолжали исправлять изображения и повторно сохранять их, чтобы соответствовать требованиям. У нас нет бюджета, чтобы выполнять эту работу в своих пакетах управления. Написание кода для вызова разных размеров изображений для разных устройств также занимает много времени. Было бы здорово придумать систему сохранения изображений, которая была бы единообразной в течение более длительного периода времени».
- «Да, я думаю, что вы неправильно поняли «Сохраняйте низкий уровень количества запросов и небольшие размеры файлов» в Lighthouse. Если сайт обслуживается через HTTP1.x, то да, но если сайт обслуживается через HTTP2, то количество запросов не так важно или даже не является проблемой, если они исходят с одного и того же имени хоста. У меня есть облегченный веб-сайт, но я загружаю 30 небольших файлов WebP из примерно 35 запросов в общей сложности по HTTP2 на одном и том же имени хоста. Lighthouse помечает это как проблему «Сохраняйте низкий уровень количества запросов и небольшие размеры файлов», хотя он работает очень быстро, и из-за HTTP2 на одном и том же имени хоста количество запросов не является проблемой. И да, файлы и так небольшие (большинство от 1 до 2 КБ или меньше). Я мог бы загрузить спрайт, но тогда нужно будет выполнить больше вычислений CSS. Поэтому, пожалуйста, обновите отчет «Сохраняйте низкий уровень количества запросов и небольшие размеры файлов» в Lighthouse, чтобы учесть HTTP2 через одно и то же имя хоста».
- «Людям было трудно помнить о необходимости сжимать изображения».
- «Поведение разных браузеров остается непредсказуемым, поэтому самые простые решения часто оказываются самыми безопасными».