HTTP ArchieveСогласно статистике, изображения уже составляют 62% всего содержимого в Интернете, то есть более половины трафика и времени тратится на загрузку изображений. С точки зрения оптимизации производительности изображения, безусловно, являются одной из горячих точек и ключевых моментов. Google PageSpeed или 14 правил оптимизации производительности Yahoo — все рассматривают оптимизацию изображений как важный метод оптимизации. Эта статья охватывает все аспекты оптимизации веб-изображений, от базового выбора формата изображений до адаптивных изображений, которые ещё не получили широкой поддержки.
Мне очень нравится то, что говорит Google Web Fundamentals:
Оптимизация изображений — это одновременно искусство и наука. Это искусство, потому что не существует единственного наилучшего конкретного решения для сжатия отдельного изображения. Это наука, потому что многие хорошо разработанные методы и алгоритмы позволяют значительно уменьшить размер изображения. Чтобы найти оптимальные настройки для изображения, необходим тщательный анализ по многим измерениям: возможностям формата, содержимому закодированных данных, пиксельным размерам и многому другому.
Действительно ли вам нужно использовать изображения?
Действительно ли вам нужно изображение для достижения желаемого эффекта? Это первый вопрос, который стоит задать себе. Браузеры и веб-стандарты развивались чрезвычайно быстро. Я помню, несколько лет назад, когда я писал видеоплеер на Microsoft Silverlight 1.0, китайский текст не отображался с пользовательскими шрифтами, поэтому я написал много ужасного кода, который генерировал нужный текст в виде изображений на сервере и кэшировал их. Пользователям было медленно их скачивать, а поисковые системы вообще не могли индексировать этот текст.
Но сейчас всё иначе. Многие эффекты (градиенты, тени, скруглённые углы и т. д.) можно реализовать с помощью чистого HTML, CSS, SVG и т. д. Для реализации этих эффектов требуется всего несколько строк кода или, в худшем случае, загрузка дополнительной библиотеки (обычное фото по сравнению сочень мощной библиотекой эффектовтакже намного больше). Эти эффекты не только занимают совсем немного места, но и хорошо работают на множестве устройств и разрешений, а на старых браузерах могут изящно деградировать. Поэтому, когда существуют альтернативные технологии, следует в первую очередь выбирать их, а реальные изображения добавлять только тогда, когда без изображений не обойтись.
Альтернативные технологии
- CSS-эффекты и CSS-анимации. Они обеспечивают эффекты, не зависящие от разрешения, чётко отображаются при любом разрешении и уровне масштабирования и занимают очень мало места.
- Веб-шрифты. Теперь даже многие библиотеки иконок поставляются в виде шрифтов, сохраняя возможность поиска по тексту и расширяя стили отображения.
Фронтенд-инженерам в идеале следует поддерживать связь с дизайнерами и продакт-менеджерами,помогая им понять, какие эффекты являются «простыми, эффективными и легко поддерживаемыми». Ведь в CSS изменение радиуса скруглённого прямоугольника видно в реальном времени; с изображениями же нужно как минимум заново сгенерировать изображение, вырезать его и заменить ресурс. Retina, экраны с высоким разрешением и устройства с множеством размеров — всё это ускорило развитие эффектов без изображений. Вспомните, как ужасно Windows 7 выглядит на экранах с высоким разрешением, и вы поймёте, что нативные графические ресурсы — это точно не «чем больше, тем лучше».
Выбор формата изображения
Если изображение действительно необходимо для передачи эффекта, то выбор формата изображения — это первый шаг оптимизации. Часто можно услышать такие термины, как векторная графика, растровая графика, SVG, сжатие с потерями, сжатие без потерь и т. д. Давайте сначала разберём особенности различных форматов изображений.
| Формат изображения | Метод сжатия | Прозрачность | Анимация | Совместимость с браузерами | Подходящие сценарии |
|---|---|---|---|---|---|
| JPEG | Сжатие с потерями | Не поддерживается | Не поддерживается | Все | Сложные цвета и формы, особенно фотографии |
| GIF | Сжатие без потерь | Поддерживается | Поддерживается | Все | Простые цвета, анимация |
| PNG | Сжатие без потерь | Поддерживается | Не поддерживается | Все | Когда требуется прозрачность |
| APNG | Сжатие без потерь | Поддерживается | Поддерживается | Firefox Safari iOS Safari | Анимации, требующие полупрозрачности |
| WebP | Сжатие с потерями | Поддерживается | Поддерживается | Chrome Opera Android Chrome Android Browser | Сложные цвета и формы; предсказуемая браузерная платформа |
| SVG | Сжатие без потерь | Поддерживается | Поддерживается | Все (IE8 и выше) | Простая графика, хорошее масштабирование, требуется динамическое управление эффектами изображения |
Среди них форматы APNG и WebP появились относительно поздно,и ещё не были приняты веб-стандартами.Их следует использовать только тогда, когда конкретная платформа или браузерная среда предсказуемы. Хотя оба могут корректно деградировать в неподдерживаемых средах, в этом разделе эти два формата пока не рассматриваются. Процесс выбора формата изображения выглядит следующим образом:
Для фотографий с насыщенными цветами JPG — универсальный выбор.
- Структура человеческого глаза хорошо приспособлена к просмотру фотографий, сжатых в JPG; он может полностью игнорировать детали и мысленно их дополнять.
- JPG довольно хорошо сохраняет детали, когда степень сжатия невысока.
- WebP может уменьшить размер файла на 30% по сравнению с JPG, но в настоящее времяимеет плохую совместимость с браузерами.
Если нужен более универсальный формат анимации, GIF — единственный пригодный для использования вариант.
- GIF поддерживает цветовой диапазон из 256 цветов и поддерживает только полную прозрачность / полную непрозрачность.
- При отображении анимации с богатыми цветами у GIF могут возникать проблемы, такие как потеря цветов и зубчатые края.
Если изображение состоит из стандартных геометрических фигур или если вам нужно динамически управлять эффектами его отображения с помощью программ, можно рассмотреть формат SVG.
- SVG — это векторная графика, определяемая с помощью XML, а полученные изображения можно свободно масштабировать при любом разрешении.
- В SVG можно свободно изменять эффекты изображения через такие интерфейсы, как JavaScript, и добиваться свободного вращения, перемещения, изменения цвета и т. д. для некоторых элементов.
Если нужно четко отображать изображения с богатыми цветами, лучше подходит PNG.
- PNG-8 может отображать 256 цветов, но также поддерживает 256 уровней прозрачности. Поэтому для сценариев с небольшим количеством цветов, но требующих полупрозрачности (например, анимированные смайлики WeChat), можно рассмотреть PNG-8.
- PNG-24 может отображать истинный цвет, но не поддерживает прозрачность. Рекомендуется для изображений с богатыми цветами (например, скриншотов, макетов UI-дизайна).
- PNG-32 может отображать истинный цвет и поддерживает 256 уровней прозрачности. Он дает наилучший результат, но также имеет самый большой размер файла.
Выбор размеров изображения
Раньше размеры были наименее обсуждаемой темой, но мир стал намного сложнее с появлением Retina. Тема пикселей и размеров на мобильных устройствах тянет на целую научную работу. Я рекомендую студентам, которые хотят узнать подробности, обратиться к следующей статье:
Краткий разговор о мобильной веб-разработке (Часть 1): Углублённые концепции
Здесь мы говорим только о тех частях и выводах, которые нас интересуют. Нам нужно различать разные типы пикселей: CSS-пиксели и пиксели устройства. Один CSS-пиксель может содержать несколько пикселей устройства. Для изображений на экранах с высоким DPI нужны изображения с более высоким разрешением. Если мы говорим о Retina, то нужны изображения с разрешением 2x (почти в 4 раза больше по размеру). Здесь почти нет места для компромиссов: экран просто такой большой, а нужное изображение, само собой, такого же размера. (Почему голубь такой большой? ^_^)
Что мы можем контролировать, так это отображение изображения «точно» требуемого размера. Например, на экране с помощью CSS илиатрибутов width/height тега <img>, масштабируя изображение 200x200 до 100x100, тогда (200x200)-(100x100)=30000 пикселей тратится впустую, что составляет 75% размера изображения!
Причина такой огромной траты заключается в том, что размер файла изображения в основном пропорционален площади, а значит, пропорционален квадрату ширины и высоты. Поэтому расчёт фактического отображаемого размера изображения на стороне клиента может значительно уменьшить размер изображения. Даже если впустую тратится всего 10px ширины и высоты, когда изображение достаточно большое, эта часть всё равно будет иметь значительное влияние.
Адаптивные изображения
Ранее мы упоминали отображение изображений «точно» того размера, который нужен клиенту. Звучит просто, не так ли? Но после появления адаптивных макетов это стало чрезвычайно сложно. Нам нужно поддерживать бесчисленное множество устройств от 1920px в ширину до 320px в ширину. Если мы используем изображения шириной 1920px, то на маленьких устройствах (которые часто более чувствительны к скорости сети и расходу данных) каждый пользователь расплачивается дополнительным трафиком и временем ожидания. Если мы используем изображения шириной 320px, то на экране 1920px это так же неприемлемо, как запускать DOS на HD-экране.
Естественно, нам нужно, чтобы изображения также загружались «адаптивно», загружая разные размеры изображений в зависимости от устройства. Адаптивные изображения ещё не внесены в веб-стандарты, а их реализация имеет множество неудобств и ограничений по совместимости. Рекомендую обратиться к этой статье от команды Baidu EFE:
Адаптивные изображения на практике
Хотя адаптивные изображенияещё не стали стандартом,они являются мощным инструментом оптимизации веб-изображений. После широкой поддержки нет более эффективного метода оптимизации, чем уменьшение размера изображения.Оптимизация JPG и PNG
После выбора правильного формата изображения и создания изображения правильного размера нам всё ещё нужно дополнительно оптимизировать изображение. Эта оптимизация обычно выполняется в два этапа:
- Оптимизация с потерями: удалить цвета, которые никогда не появляются или появляются очень редко, и объединить соседние похожие цвета. Этот шаг не является строго обязательным; например, в формате PNG можно сразу перейти к следующему шагу.
- Оптимизация без потерь: сжать данные и удалить ненужную информацию.
После создания изображений в форматах JPG и PNG обычно всё ещё остаётся возможность дальнейшей оптимизации. Например, фотографии JPG могут содержать информацию Exif камеры, а изображения PNG могут содержать информацию о слоях из такого ПО, как Fireworks. После удаления этой лишней информации можно также оптимизировать, уменьшив палитру изображения, удалив цвета, которые никогда не появляются, и объединив соседние одинаковые цвета. Я не буду здесь углубляться в теоретические детали; я лишь представлю практические инструменты оптимизации, которые можно использовать в инженерной практике.
Существует ряд инструментов для разных форматов изображений, и у этих инструментов гораздо больше параметров настройки. Несколько распространённых инструментов настройки:
| Инструмент | Назначение |
|---|---|
| jpegtran | Оптимизация JPG-изображений |
| OptiPNG | Оптимизация PNG без потерь |
| AdvPNG | Оптимизация PNG без потерь |
| PNGQuant | Оптимизация PNG с потерями |
Если вам действительно нужно стремиться к экстремальному сжатию различных изображений, вы можете обратиться к документации этих инструментов. Однако для типичных веб-приложений встречающиеся типы изображений разнообразны, и в инженерной практике почти невозможно независимо настроить каждый инструмент. Поэтому для оптимизации рекомендуется использовать следующие инструменты. Эти инструменты часто используют один или несколько инструментов оптимизации из таблицы выше.
ImageOptim (Mac)
Домашняя страница:https://imageoptim.com/
Очень хороший инструмент оптимизации изображений на платформе Mac. Вам просто нужно перетащить изображения, которые нужно оптимизировать, в ImageOptim, и оптимизация выполнена. Настройки также богатые, и в настоящее время он поддерживает оптимизацию JPG и PNG. Это инструмент, который я использую чаще всего при написании статей: перетащите изображения, используемые на сайте, и оптимизация завершена~
Kraken (Web)
Домашняя страница:https://kraken.io/
В бесплатном режиме вы можете загружать изображения, и после оптимизации они упаковываются для скачивания. Многие зарубежные компании также выбирают его платную услугу. Я лично тестировал результаты оптимизации изображений Kraken; они обычно примерно на 3% меньше, чем в ImageOptim. Эффект хороший, и, конечно, цена тоже хорошая. Это подходит для периодических потребностей в оптимизации изображений или ситуаций, когда на машине разработчика нет доступного программного обеспечения для оптимизации.
Zhitu (Web)
Домашняя страница:http://zhitu.tencent.com/
У команды Tencent ISUX есть статья, знакомящая с Zhitu:http://isux.tencent.com/zhitu.html
Пришло время отечественным продуктам заявить о себе. Инструмент Zhitu от Tencent появился недавно, но практическое тестирование показывает, что он хорошо работает, и он обеспечиваетподдержку автоматизации GulpЭта часть будет представлена позже в разделе автоматической оптимизации. Я хочу лишь предложить одну вещь: домашняя страница Kraken в сотни раз красивее, чем у Zhitu... И действительно ли нормально ставить сжатый PNG и сжатый JPG рядом для сравнения размера?
Оптимизация SVG
Все современные браузеры поддерживают масштабируемую векторную графику (SVG). SVG — это основанный на XML формат изображений, подходящий для двумерных изображений. Разметку SVG можно встраивать непосредственно в веб-страницы или включать как внешний ресурс. Файлы SVG можно создавать с помощью большинства векторных графических редакторов. Вот простой SVG-рисунок:
Этот круг имеет чёрный контур и красный фон, экспортирован напрямую из Adobe Illustrator. В нём можно увидеть множество метаданных, таких как информация о слоях, комментарии, пространства имён XML и так далее. Эти данные обычно не нужны при рендеринге ресурсов в браузере. Поэтому нам нужно использовать некоторые инструменты, чтобы удалить эти ненужные метаданные и оставить только необходимую разметку.
SVGO-инструменты могут уменьшить размер файлов SVG. В этом примере SVGO может уменьшить размер SVG-файла, созданного Illustrator, на 58%, с 470 байт до 199 байт. Поскольку SVG — это основанный на XML формат и по сути обычный текст, для уменьшения объёма передаваемых данных также можно использовать сжатие GZIP. Конечно, это требует некоторой настройки сервера, например указания следующего в сервере Apache:
AddType image/svg+xml .svg AddOutputFilterByType DEFLATE image/svg+xml
чтобы включить сжатие GZip для файлов SVG (конечно, также нужно загрузить модуль deflate и правильно его настроить; настройка GZip выходит за рамки этой статьи, поэтому, пожалуйста, поищите эту часть в Google самостоятельно)
Оптимизация GIF и APNG
GIF имеет много преимуществ: при небольшом количестве цветов он может значительно уменьшить размер изображения, а также является единственным форматом изображений, который может отображать анимацию относительно универсальным способом. Я не очень хорошо знаком с принципами оптимизации формата GIF; в инженерной практике я напрямую использую зрелые инструменты сжатия. В дальнейшемавтоматической оптимизациив разделе о Grunt я представлю метод автоматической оптимизации с помощью задач Grunt.
Что касается APNG, текущая поддержка браузерами пока недостаточно хороша. Однако в сценариях с поддержкой HTML5 есть зрелый инструмент с открытым исходным кодомapng-canvas, который можно использовать для поддержки APNG.
У команды Tencent ISUX есть статья, представляющая инструментыiSparta:http://isux.tencent.com/introduction-of-apng.htmlВ настоящее время это почти единственный инструмент, способный пакетно обрабатывать APNG-файлы. Заинтересованные читатели могут узнать больше из той статьи.
Автоматическая оптимизация
Выше я уже слишком много сказал о методах и инструментах оптимизации изображений различных форматов. Оптимизация изображений требует много повторяющейся работы. Как инженеры, мы, очевидно, не можем это терпеть, поэтому было создано множество инструментов для автоматической оптимизации изображений. Здесь я в основном представлю три метода: CDN, Grunt/Gulp и Google PageSpeed.
Автоматическая оптимизация: CDN
Использование CDN для автоматической оптимизации изображений. Я редко встречал такого рода услуги среди зарубежных CDN-провайдеров, но два восходящих отечественных CDN-лидераQiniuиUpyunпроделали в этом отношении большую работу. Принцип работы таков: при запросе изображения с CDN параметры URL включают параметры обработки изображения (формат, ширина и высота и т. д.). Сервер CDN генерирует нужное изображение согласно запросу и отправляет его в браузер пользователя.
У облачного хранилища Qiniuинтерфейс обработки изображенийчрезвычайно богат и охватывает большинство базовых операций с изображениями, таких как:
- Обрезка изображений, поддержка нескольких методов обрезки (например, по длинной стороне, короткой стороне, заполнение, растяжение и т. д.)
- Преобразование форматов изображений, поддержка JPG, GIF, PNG, WebP и т. д. с разными коэффициентами сжатия изображений
- Обработка изображений, поддержка наложения водяных знаков, размытия по Гауссу, обработки фокуса и т. д.
Интерфейс обработки изображений облачного хранилища Qiniu не сложен в использовании. Например, возьмём следующее исходное изображение:
Мы запрашиваем следующий URL, чтобы обрезать центральную часть и пропорционально масштабировать её для создания миниатюры 200x200:
http://qiniuphotos.qiniudn.com/gogopher.jpg?imageView2/1/w/200/h/200
Автоматическая оптимизация: Grunt/Gulp
Здесь я представлю компоненты Grunt, используемые для оптимизации изображений:grunt-imageПовторяющуюся работу фронтенд-инженеров, такую как объединение статических ресурсов, сжатие файлов JS и CSS, компиляция SASS и т. д., можно выполнять пакетно с помощью инструментов автоматизации вроде Grunt. Оптимизация изображений не исключение.
grunt-image очень мощный. Согласно описанию автора, встроенные инструменты оптимизации изображений включают pngquant, optipng, advpng, zopflipng, pngcrush, pngout, mozjpeg, jpegRecompress, jpegoptim, gifsicle и svgo. Он поддерживает пакетную автоматическую оптимизацию PNG, JPG, SVG и GIF, и его скорость также хороша. Конфигурация поддерживает оптимизацию одного изображения и оптимизацию всего каталога:
module.exports = function (grunt) {
grunt.initConfig({
image: {
// 指定单独的图片优化
static: {
options: {
pngquant: true,
optipng: true,
advpng: true,
zopflipng: true,
pngcrush: true,
pngout: true,
mozjpeg: true,
jpegRecompress: true,
jpegoptim: true,
gifsicle: true,
svgo: true
},
files: {
'dist/img.png': 'src/img.png',
'dist/img.jpg': 'src/img.jpg',
'dist/img.gif': 'src/img.gif',
'dist/img.svg': 'src/img.svg'
}
},
// 指定图片目录进行优化
dynamic: {
files: [{
expand: true,
cwd: 'src/',
src: ['**/*.{png,jpg,gif,svg}'],
dest: 'dist/'
}]
}
}
});
grunt.loadNpmTasks('grunt-image');
};
Автоматическая оптимизация: Google PageSpeed
Google подходит к работе довольно основательно. Когда компания видит программное обеспечение, которым неудобно пользоваться, она сразу форкает новую версию или просто переписывает его. Для веб-оптимизации Google выпустилаGoogle PageSpeedэтот серверный модуль, который можно подключить в Apache или Nginx, а автоматическая оптимизация выполняется с помощью настроек в конфигурационном файле сервера. Есть соответствующие опции для преобразования форматов изображений, оптимизации изображений и даже ленивой загрузки изображений. Если раскрывать эту тему, она получится очень длинной, поэтому, если вам интересно, обратитесь к руководству Google.
Источник: http://blog.cabbit.me/web-image-optimization