От автора: «Уменьшите вес страницы» — один из наиболее частых советов на сайте Dareboost. По данным HTTP Archive trends изображения представляют 53% от среднего веса страницы, будь-то десктоп или мобильное устройство. Если вы хотите уменьшить вес веб-страниц, оптимизация изображений должна быть на первом месте.
Под каждое изображение свой формат
Не всегда так просто найти подходящий формат изображений. Возьмем наш логотип, например. Мы могли сохранить его в PNG, JPEG, WebP или SVG. Вес изображений сильно бы различался. С помощью теста это можно визуализировать:
В этом случае самый подходящий формат SVG, после которого идет PNG. У изображения простые цвета, нет анимации, и оно состоит из геометрических фигур. Все эти факторы благоприятствуют этим двум форматам.
Разберем второй пример, на этот раз с фотографией взлета шаттла. SVG просто не может представить корректно такое изображение (почему объясним чуть позже). Мы получаем примерно одинаковые изображения в форматах JPEG, PNG и WebP:
Результаты разительно отличаются. WebP явно выделяется при представлении всей сложности фотографии. К сожалению, этот формат поддерживается только в Chrome и Opera, поэтому мы отдаем предпочтение JPEG.
Совет: при тестировании веб-производительности на Dareboost наш инструмент систематически определяет правильное использование формата PNG (или советует использовать другой формат).
При сохранении JPEG большая часть ПО спрашивает вас, какое качество оставить, так как это формат с потерей качества. Выбирая качество меньше 100%, можно сохранить драгоценные байты, корректируя только определенные точки изображения. Давайте сохраним наше изображение с качеством 80%. Мы получим довольно интересный результат: вес упал более чем на 50%, а существенно изменилось всего пара точек.
Как видите, выбор формата не такая уж тривиальная задача, и не все форматы подходят для всех изображений. Давайте объясним более подробно…
Как выбрать правильный формат изображения?
В конечном счете, все изображения появляются на экране одинаково – прямоугольник, состоящий из точек разного цвета. Однако изображения не обязательно записываются на диск в таком формате. Все форматы изображений используют разные техники кодировки визуальной информации. Чтобы выбрать правильный формат файла, необходимо задать себе несколько вопросов:
Что из себя представляет мое изображение?
Некоторые форматы файлов кодируют изображения ровно так, как они появляются на экране – в виде матрицы цветных точек. Каждая цветная точка кодируется на несколько байт и располагается внутри карты со своими координатами. Поэтому такие форматы иногда называют bitmap. Затем различные алгоритмы сжатия уменьшают пространство, занимаемое этой информацией на жестком диске. Эти форматы относятся к растровой графике. Их преимущество в том, что они умеют обрабатывать любые фотографии, а у некоторых форматов, например PNG, есть дополнительные возможности типа оптимизации цветовой палитры и прозрачности.
К сожалению, этот процесс кодировки перед позиционированием точек должен определить размеры матрицы (разрешение изображения). Как следствие – если увеличить растровую графику JPG, PNG или WebP, значительно снижается качество.
У других форматов файлов нет таких недостатков, так как они кодируют изображения в виде набора геометрических форм. Изображения в них определяются линиями, точками и полигонами, которые в сумме дают общую картину. Где бы не показывалось это изображение, компьютер перерисует его по виртуальной чертежной спецификации. Векторная графика подходит для рендера маленьких форм, логотипов и графиков. Изображения не зависят от разрешения, поэтому они адаптированы для адаптивного дизайна. Среди таких изображений SVG и шрифты иконок. Другая сторона медали – векторная графика не подходит для фотографий.
Уменьшение веса изображений за счет информации
Можно провести еще более глубокую оптимизацию и вырезать кое-какую информацию. Задача состоит в том, чтобы избавиться только от мусора, сохранив подходящее качество. Этот процесс называется этапом оптимизации потерь.
Для векторной графики сейчас есть инструмент svgo, есть и онлайн интерфейс svgomg. Инструмент способен уменьшить объем кода путем очистки метаданных, которые никак не влияют на отображение (например, информация об инструменте, с помощью которого был сгенерирован файл), а также путем объединения геометрических фигур или их трансформации. При уменьшении веса шрифта с иконками действует та же логика за исключением того, что здесь можно урезать область действия, выбрав только символы, используемые в вашем наборе. В сети есть сайты типа Icomoon, на которых можно создать свой шрифт с иконками.
Как мы видели в примере с шаттлом, (оптимизации с потерей или без потери качества также применимы к растровой графике. Каждый формат обладает своими характеристиками (например, PNG поддерживает прозрачность), поэтому у всех алгоритмов разные режимы действия и визуальное влияние.
Ниже представлено несколько форматов файлов и подходящие к ним инструменты оптимизации. Некоторые из них включают графическое ПО типа Photoshop или GIMP:
PNG: Zopfli-png, PNGOUT, OptiPNG, AdvPNG, PNGCrush, PNQQuant
JPG: JPEGOptim, MozJPEG, Jpegtran, Guetzli
FileOptimizer (Windows), ImageOptim (Mac) или Trimage (Linux) – ПО, совмещающее в себе несколько алгоритмов. В них можно тестировать разные оптимизации с разными уровнями потерь и напрямую экспортировать оптимизированное изображение. Они даже способны сохранять PNG в PNG-8 (вариант PNG с палитрой в 256 цветов), а не в PNG-24 для экономии байт.
Почему ничего не сказано про GIF?
GIF – очень ограниченный формат (он описывает только 256 цветов), поддерживающий прозрачность и анимацию. Он годами использовался для кодирования логотипов, пиктограмм и небольших анимаций. Скажем это вслух – ему пора на пенсию.
Во всех социальных сетях или мессенджерах вы найдете функцию с пометкой GIF, но это не совсем правда. На самом деле, многие из этих сервисов используют видео форматы с маленькими файлами! Мы вернемся к этой теме в следующей статье.
Если вам нужен формат GIF, есть алгоритм сжатия gifsicle. С его помощью удобно манипулировать GIF контентом – уменьшайте цветовую палитру, размер, обрезайте и кадрируйте… Иногда я использую gifsicle для кодирования коротких записей своего экрана и вставки их в email, так как большинство email клиентов не умеют читать встроенные видео.
Подавайте правильный размер файла под контекст
Подобрать правильный формат файла недостаточно для того, чтобы предоставить оптимальное изображение.
Представьте, что вы используете изображение 2680 пикселей в ширину на заднем фоне сайта, спроектированного под компьютеры с высоким разрешением экрана (HiDPI и Retina™). На мобильном устройстве или меньшем разрешении с 3G соединением браузер не только будет загружать большой объем необязательных данных, но он также будет сам изменить размер изображений с помощью внутреннего алгоритма, чтобы вписать ширину в экран телефона. Результат будет не очень, не говоря уже о задержке в рендере… Вместо этого было бы лучше создать несколько версий оригинального изображения под разные разрешения и позволить браузеру выбирать изображение под текущий контекст.
Адаптивные изображения – термин, воплощающий в себе все методы, которые входят в процесс создания нескольких изображений для одной области веб-страницы, которые будут адаптированы под возможные контексты навигации. Для фонов и декоративных изображений можно использовать CSS медиа запросы.
Для недекоративных изображений спецификация picture добавила атрибут srcset в тег в 2014 году (да, уже три года прошло!). Атрибут srcset представляет собой коллекцию URL-адресов на разные версии одного изображения с разными разрешениями (но с сохранением соотношения сторон). Атрибут дает браузеру возможность выбрать версию изображения, исходя из текущего контекста. К сожалению, без загруженных файлов CSS браузер может не понять относительное пространство, занимаемое изображением в окне, поэтому также необходимо определить атрибут sizes.
Если помимо оптимизированного изображения вы хотите предложить форматы, поддерживаемые ограниченным числом браузеров (таких как WebP), или хотите управлять разным соотношением сторон в зависимости от контекста (вопрос дизайна), можете завернуть изображение в тег picture и несколько source:
Со всеми возможными медиа файлами, стилями, разрешениями, плотностью пикселей и поддерживаемыми форматами HTML разметка адаптивных изображений может стать довольно обширной. Но не забывайте, что HTTP ответ всегда должен быть сжат. Ну и разница в 500B между этой разметкой и просто одним тегом img будет существенным сдвигом в сторону уменьшения веса изображения.
Новые HTML теги плохо поддерживаются, однако есть надежная и популярная библиотека, которая обеспечит поддержку в старых браузерах picturefill.
Автоматизируйте, автоматизируйте, автоматизируйте
Выбор правильного формата изображения, генерация превью, иногда использование других форматов, более адаптированных под контекст (WebP), после чего повторная генерация превью… Выполнять эту работу с большим количеством изображений высокого качества – титанический труд. Всего пара инструментов, будь-то WCM или E-Commerce платформы, включают продвинутые функции по управлению изображениями. Даже решения Digital Asset Management будут бесполезны, которые обычно уделяют внимание управлению визуальными файлами, где управление адаптивными изображениями должно быть прерогативой.
Тем не менее, существуют решения типа Cloudinary — сторонний сервис на SaaS- или Thumbor (устройство, которое необходимо установить в сети). Поговорите со своей командой разработки и выберите лучшее решение, не забудьте объяснить участникам проблемы и подготовить их к выбранному решению. Не забывайте хранить оригинальные изображения (в лучшем качестве) и думать об оптимизации, даже с потерей качества.
Например, на E-Commerce сайте фотографии товаров намного критичнее, чем декоративные изображения, поэтому вам нельзя снижать их качество. Точно так же если вы в дорогом магазине, ваши посетители будут ожидать безупречного качества изображений. Вам необходимо тонко настроить оптимизацию. Иногда, как было с Flickr, правильная настройка может занять несколько месяцев.
Используйте ленивую загрузку по максимуму (с или без визуального эффекта)
Еще один способ улучшить производительность веб-страницы – избегать ненужных изображений при первичной загрузке. Например, можно задержать загрузку всех изображений, которые не появляются в первой видимой области страницы (ленивая загрузка). Существует множество JS библиотек, но некоторые несовместимы с вашим кодом: посоветуйтесь с командой разработки или предложите независимую библиотеку на чистом JS типа Lozad. Ленивая загрузка также доступна на Apache и nginx: ModPageSpeed Lazyload.
Внезапное появление изображений – одна из проблем ленивой загрузки. Поэтому необходимо определять когда и как загружать изображения с задержкой, чтобы пользователь не замечал этого. Но когда? После первичной загрузки страницы (onload)? Когда пользователь скролит контент и вьюпорт достигает определенной области? Ленивую загрузку необходимо обсуждать с UX дизайнерами, которые могут посоветовать, как анимировать появление изображений, чтобы это было не так резко. Некоторые сайты заполняют область брендированным контентом. Другие используют основные цвета изображения или даже форму реального изображения в SVG.
Снижение количества изображений с помощью стека изображений
В сетях с высокой задержкой можно быстро сэкономить время, уменьшив количество загружаемых изображений. Вместо загрузки отдельных файлов изображения можно сгруппировать в один файл. Спрайты – пример такой техники для растровых изображений. Шрифты иконок и SVG символы – эквивалент для векторных изображений.
Насколько эта идея может быть привлекательной, настолько же может быть сложна ее реализация. Использование спрайтов оправдывает себя, когда вы действительно используете все сгруппированные изображения на странице, что бывает крайне редко. Более того, если в стеке необходимо заменить один элемент, вам придется вырвать целый спрайт из кэша браузера.
Наконец: задержка может быть не постоянной проблемой. В протоколе HTTP/2 соединения оптимизированы на одновременную загрузку нескольких ресурсов эта техника потеряет свою значимость. В теории.
Конец?
Ну нет! Управление изображениями (адаптивными) еще далеко от совершенства.
Например, вместо отправки большого количества информации в браузер и возможности выбрать правильное изображение под контекст почему не попросить браузер передавать контекст во время первичной загрузки и вычислять все контексты на сервере? Об этом думают несколько членов What WG в спецификации «Client Hints». Поддержка до сих пор сильно ограничена, но концепция стандартизируется в IETF. Она сильно похожа на инициативу в начале 2010 Responsive Web Design + Server Side Components, aka RESS, которая уже пыталась воплотить серверные механизмы.
Получится ли в этот раз?
Автор: Boris Schapira
Источник: //blog.dareboost.com/
Редакция: Команда webformyself.
