Сжатие изображений для веб-разработчиков

Вступление

Поскольку изображения по-прежнему составляют большую часть контента веб-страницы, для веб-разработчиков крайне важно активно контролировать размеры и качество своих изображений, чтобы обеспечить пользователям самый быстрый загрузочный и отзывчивый сайт. Попасть в это сладкое место не бесплатно; Вы можете автоматизировать «достаточно хорошее» значение большую часть времени, но для лучшей экономии вам нужно тестировать уровни качества с помощью человеческого глаза. Эта статья расскажет о причине, истории и технике, чтобы понять и правильно решить проблемы сжатия изображений на вашем сайте.

TL; DR: Контрольный список сжатия изображений

1. Сжатие изображений в правильном формате с минимально допустимым уровнем качества
   1. Отрегулируйте вручную (где это возможно) качество сжатия для всех изображений
   2. Автоматизируйте все остальное, чтобы добиться максимальной производительности
2. Изучите использование WebP для всех ваших потребностей изображения
3. Сохраняйте изображения с прогрессивными параметрами, чтобы улучшить восприятие пользователем времени загрузки ваших страниц
4. Исследуйте другие интересные способы получить лучшее сжатие или прозрачность. Думай нестандартно!

Почему маленький большой

Проще говоря, для загрузки больших страниц неизбежно требуется больше времени. Существует бесконечное количество исследований, которые показывают, что пользователи медленных сайтов тратят меньше времени на сайт, просматривают меньше, кликают меньше рекламы и тратят меньше. Небольшие сайты, такие как AutoAnything, сократили время загрузки пополам и увидели доход вырос на 13 процентов , И крупные сайты, такие как Amazon, показали, что для каждого 100 миллисекунд замедления , они испытали падение дохода на 1 процент. И давайте не будем забывать, что президентская кампания 2012 года основывала всю успех по сбору средств при мгновенной загрузке их сайта ,

Что еще хуже, пользователи должны платить за скачивание вашего сайта.
Хотя большие страницы снижают производительность и для пользователей настольных компьютеров, самыми большими жертвами раздувания страниц являются мобильные пользователи. Мало того, что страница размером в 1 МБ загружается вечно, она также может доставить неприятный шок, когда вы получите счет за телефон.

Даже самые «безлимитные» тарифные планы для мобильных устройств, на самом деле не «безгранично бесплатно». Большинство из них будут взимать фиксированную ставку за доступ до 2 ГБ или около того, и передача этой суммы может стоить больше денег. Не говоря уже о том, что во многих регионах мира нет таких видов биллинговых планов «все, что вы можете съесть», где стоимость загрузки информации является серьезной проблемой для пользователей, как исследовательская работа AT-T выделена :

проблемы стоимости трафика мобильной передачи данных сегодня серьезно затрудняют использование мобильных услуг на портативных устройствах
...
Было интересно, что пользователи пытаются понять правила выставления счетов, даже если перевозчик не предоставляет эту информацию. Основываясь на показателях подключения, информации, отображаемой в телефонном счете, и предыдущем опыте выставления счетов за трафик данных, люди создают воспринимаемую модель выставления счетов, которая влияет на их модели использования мобильного просмотра.

Люди в mobiforge предоставил еще больше контекста, изложив весь аргумент с точки зрения затрат:

AT-T зарядить столько же, сколько $ 19,97 / MB для данных роуминга в определенных странах. Принимая некоторые из примеров от Гая таблица и при использовании роумингового тарифа AT-T пик на 1pictureaday.com действительно стоит 178 долларов? Вам действительно нужно посетить thenextweb.com за 44 доллара или vogue.co.uk за 65 долларов? На $ 17 microsoft.com является относительной сделкой.
Для пользователей в роуминге эти веса страниц запрещают все, кроме самых важных задач.

Большие изображения - большая проблема. Мы видим наибольшее увеличение размеров из изображений который может записать плохие новости для мобильных устройств, где изображение буквально стоит тысячу слов ,
Неподходящее форматирование изображения является распространенным виновником производительности. Изображения, являющиеся слишком большими, недостаточно сжатыми или имеющими слишком высокое качество настройки, могут привести к тому, что эти изображения будут раздутыми и негабаритными, что напрямую влияет на загрузку вашего сайта. Выбор правильного метода сжатия для получения наилучших результатов легко достигается путем изучения того, что происходит под капотом.

Типы алгоритмов сжатия

Обычно в компрессоре изображений есть две стадии: фаза с потерями и фаза без потерь. Алгоритмы сжатия с потерями изменят исходный поток так, что вы потеряете информацию, которая не может быть восстановлена ​​при декомпрессии. Большинство алгоритмов с потерями при сжатии изображений используют преимущества работы визуальной системы человека, часто удаляя информацию, которую мы действительно не видим, и в процесс, сохранение байтов. Например, ограничение цветов, используемых в изображении; меньшее количество цветов означает меньше данных для бега. Как правило, когда вы сохраняете изображение в формате, поддерживающем сжатие с потерями, вас спрашивают, какой «уровень качества» вы хотите для изображения, по сути, вы выбираете скалярное значение, которое меняет размер файла на изображение. качественный. Опытные веб-разработчики понимают, что есть приятное место для изображений, так как уровень качества достаточно высок, а размер файла минимален.

До После 0.123, 1.2345, 21.2165, 21.999, 12.123 0,0,20,20,10 Рисунок 1 - Пример сжатия с потерями. Значения квантуются до наименьшего кратного 10, которое они занимают. Это преобразование не может быть отменено.

После компрессора с потерями применяется вариант без потерь , то есть данные после распаковки восстанавливаются до точного состояния перед сжатием. Это типичные алгоритмы сжатия, которые позволяют восстановить исходный поток без потери точности или информации. В изображениях популярные кодеки Lossless включают LZ77 , RLE , а также Арифметическое кодирование , Алгоритмы сжатия без потерь являются основой сжатия, часто выжимая последние проценты данных из вашего контента, постоянно борясь с теория информации уменьшить ваши размеры данных.

До После aaaaabbbbbcccddddeeeeffffaaaaabb a5b4c2d4e4f4a5bb0 Рисунок 2 - Пример сжатия без потерь. Прогоны значений кодируются как символ, за которым следует длина прогона. Мы можем правильно восстановить оригинальный поток. Обратите внимание, что если длина строки <= 2 символа, имеет смысл просто оставить символы в покое. Вы видите это в конце потока с помощью «bb».

Форматы изображений

Формат изображения обычно связывает воедино различные алгоритмы с потерями + без потерь, чтобы обеспечить экономию сжатия. В веб-браузерах используется несколько форматов, каждый из которых имеет различные функции и компромиссы в производительности. Для ясности, в настоящее время нет формата «один размер подходит всем». Различные типы изображений должны быть закодированы в различные форматы в зависимости от того, какой это тип изображения, что поддерживает браузер и что требуется на странице.

Обычно есть три решения, которые выбирают формат изображения для веб-разработчика.

• Нужна ли прозрачность?
• Нужна ли анимация?
• Нужны ли качественные данные?

PNG это простой формат, который поддерживает прозрачность и сжатие без потерь. Он позволяет вам определять альфа-канал для вашего изображения, маскировать прозрачные области, а также возможность включить без потерь выкачивать компрессор по данным. (Deflate представляет собой комбинацию двух компрессоров без потерь, LZ77 , а также Хаффман ). Поскольку сжатие выполняется без потерь, качество изображения остается идентичным исходному изображению, однако это вызывает проблемы, связанные с тем, что размеры файлов имеют тенденцию быть довольно раздутыми и не такими маленькими, как могли бы быть.

GIF другой формат, который поддерживает прозрачность, наряду с анимацией (которая является прямой причиной для всего кошки в интернете ' вещь..). Формат GIF содержит два этапа сжатия, с потерями укладка на паллеты шаг (ограничение всего изображения только 256 цветами) с последующим без потерь LZW компрессор. Процесс квантования цветов изображения только до 256 обеспечивает агрессивное снижение качества при преимуществе лучших размеров сжатия, что приводит к лучшему сжатию с конца LZW.

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

Если вы ищете больше «единого окна» для вашего формата изображения, то WebP должен быть на вашем радаре. Формат может похвастаться не только превосходным качеством / размером сжатия, но также прозрачностью и анимацией . Он использует комбинацию компрессора с потерями и без потерь, и, как и JPG, позволит вам определить уровень качества по сравнению с размером файла. Конечно, это новый формат изображения пока не был принят во всех браузерах поэтому веб-разработчики, которые приняли его, в настоящее время находятся на ранних этапах работы с вопросы юзабилити , Хотя 30% экономии по сравнению с JPG наряду с увеличенным принятие на стороне сервера Докажите, что WebP является доминирующим форматом для любых сайтов, имеющих дело с проблемами раздувания изображений.

Сжатие Без потерь Потеря прозрачности Анимация PNG Хорошо Да Нет Полный Нет GIF OK Да Да Двоичный файл Да JPG Хорошо Да Да Нет Нет Нет WebP Отлично Да Да Полный Да Рисунок 3 - Набор функций для определенных поддерживаемых браузером форматов

Торговое качество для размера

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

И в качестве imgmin В проекте отмечается, что между уровнями сжатия JPG между уровнями 75 и 100 наблюдается небольшое изменение воспринимаемого пользователем качества:

Для среднего JPEG есть очень незначительное, в основном незначительное изменение * кажущегося * качества со 100-75, но существенная разница в размере файла для каждого шага вниз. Это означает, что многие изображения выглядят хорошо для обычного зрителя с качеством 75, но в два раза меньше, чем они были бы с качеством 95. Когда качество падает ниже 75, появляются большие видимые визуальные изменения и уменьшенная экономия в размере файлов.

И далее мы покажем, что большинство крупных веб-сайтов имеют тенденцию колебать свои изображения около этого значения = 75 для почти всех своих изображений JPG:

Качество JPG Google Изображения Миниатюры 74-76 Полноразмерные изображения Facebook 85 Главная страница Yahoo JPEG 69-91 Главная страница Youtube JPEG 70-82 Изображения из Википедии 80 Живой фон Windows 82 Пользователь Twitter Изображения JPEG 30-100 Рисунок 4 - Средний уровень качества JPG, используемый для лучшие сайты

Настройка параметров для каждого изображения на вашей странице, чтобы сбалансировать соотношение между качеством и размером, обеспечит наилучшую экономию при наилучших уровнях качества. Эти большие сайты, как правило, имеют множество изображений и, как правило, не имеют возможности ручной оптимизации каждого из них, поэтому индивидуальная настройка уровня качества для каждого изображения практически невозможна. Некоторые разработчики взяли больше автоматизированный подход к этому типу кодирования; часто получая выходные данные от художников и запуская свои эвристические и кодирующие процессы на изображениях во время сборки. Этот тип установки находится в хорошем положении между настройкой и автоматизацией, которая поможет большинству веб-разработчиков. Вы также можете принять такие приложения, как MiniJPG который автоматически настроит ваш уровень сжатия JPG, чтобы получить наилучшее возможное качество.

Весьма радикальный подход, который разработчики используют для атаки на размер изображения, заключается в уменьшении любых упрощенных значков и изображений до SVG файлы и позволяют растеризовать их клиентом перед их отображением. Этот тип процесса обменивает размер файла на скорость клиента, экономя биты на проводе, но влечет за собой дополнительные накладные расходы на стороне клиента для восстановления изображения при его визуализации. В качестве таких SVG формат изображения сильно отличается от других типов файлов тем, что это векторный формат; Это означает, что окончательное изображение процедурно генерируется используя информацию о форме, определенную в файле, для определенного разрешения выходного изображения. Когда изображение SVG загружено, оно преобразуется в растровый формат (2D-массив пикселей, как растровое изображение) перед отображением.

Рисунок 5. Пример растрового изображения (слева) по сравнению с векторным изображением (справа). Обратите внимание, что векторное изображение намного проще и содержит меньше деталей на пиксель.Это связано с тем, что тип формата не позволяет создавать высококачественные данные.

Подумайте о SVG как о формате файла, который позволяет хранить «описание» изображения с очень малым объемом памяти и генерировать высококачественное, независимое от разрешения изображение на клиенте, независимо от размера исходных данных. Одно из ограничений формата SVG состоит в том, что он может представлять только определенный тип качества изображения, то есть векторные изображения имеют тенденцию быть упрощенными, используя только набор примитивных типов, чтобы определить, как генерировать цвета на экране. Например, поле травы в прерии потребовало бы слишком много сложных форм, чтобы сэкономить на сжатии. Растровые изображения лучше всего использовать для фотографий и других информационных изображений, где векторные изображения отлично подходят для таких вещей, как логотипы или простые шаблоны изображений.

Качество изображения, размеры и разрешение экрана.

Одна из больших проблем, с которой сталкиваются разработчики, - это размер пикселей монитора относительно размера созданных изображений. То есть, если автор создает изображение для веб-сайта для настольных компьютеров, существует высокая вероятность того, что размеры и уровни качества изображения были адаптированы для просмотра на больших мониторах с разрешением рабочего стола. Однако мобильные устройства создают проблему, так как их размеры экрана намного меньше, а их соединения стоят дороже. Таким образом, пользователи могут получать изображения большего размера, чем они могут отображать или в которых они нуждаются.

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

Другая подход , предназначенный для бума мобильные устройства с высоким разрешением , включает в себя игры с качеством изображения, размерами изображения и стоимостью на стороне клиента для изменения размера изображения. По сути, вы можете хранить изображение с разрешением 2x (процесс увеличения масштаба), однако при экспорте в формат с потерями выберите вариант с очень низким качеством (что приводит к высокой степени сжатия). Намерение здесь состоит в том, чтобы выбрать такой уровень качества, чтобы сжатое большее изображение было меньше сжатого меньшего изображения.

На клиенте вы можете указать предполагаемые размеры изображения (которое должно быть меньше текущего размера изображения, так как оно было масштабировано). Веб-браузер уменьшит изображение до предполагаемого разрешения, процесс, который может размывать шумовые артефакты, возникающие из-за низкого качества сжатия; в некоторых случаях все вместе. Конечным результатом является файл меньшего размера, который легко масштабируется до нескольких разрешений экрана и не приводит к значительному снижению качества.

Размеры изображения, восприятие пользователя и время загрузки

Если посмотреть на результат, единственное, что имеет значение, это то, что сайт быстро загружается для пользователей. Появляется быстрее, значит быстрее, и воспринимаемая производительность важнее фактическая скорость .

Там два доминирующие способы для отображения изображений через Интернет.

1. Подождите, пока будет загружено все изображение, и покажите его, когда все будет готово.
2. Показать часть изображения, которое вы загрузили до сих пор.

Ни один браузер не использует первый вариант, просто потому, что он делает страницу максимально медленной.

Второй вариант - это то, на чем основывается большая часть Интернета. Я уверен, что мы все хорошо знакомы со стилем «раскрытия» изображения сверху вниз с течением времени. Это происходит потому, что изображения обычно хранятся в растровом порядке, или, точнее, первые байты изображения, которые получает браузер, начинаются в верхнем левом углу изображения и перемещаются горизонтально по всей строке. Стоит отметить, что если мы сохраним наше изображение другим способом, мы могли бы изменить то, какие биты сначала идут по проводам, что меняет то, как выглядит изображение.

Это «прогрессивный» метод кодирования может иметь благотворное влияние к восприятию пользователя, что страница загружается «быстро» (обратите внимание, это обсуждается, в зависимости от пользователя). Это работает путем кодирования нескольких дополнительных версий изображения с меньшим разрешением, которые могут быть быстрее переданы пользователю. Это позволяет пользователю видеть отображение изображения, которое постепенно становится более резким, когда изображение загружается больше.

Coddinghorror.com есть отличный пример, который демонстрирует визуальную разницу между этими двумя технологиями. Вы можете видеть, что стандартный метод создает нисходящее раскрытие изображения, в то время как прогрессивный «уточняет» визуальное по мере получения большего количества данных.

Если вам не нравятся единороги, вы также можете посмотреть более подробный пример на Патрик Минан или даже опробуйте это на своих собственных изображениях, используя Интерактивный инструмент Патрика ,

Использовать это свойство в вашем изображении очень просто: просто сохраните изображения в формате GIF или PNG с помощью параметра «чересстрочная развертка» или изображения в формате JPEG с помощью параметра «прогрессивный» . и начните заставлять своих пользователей любить время загрузки вашего сайта. Хотя стоит отметить, что прогрессивные изображения поддерживаются не во всех браузерах, и загрузка прогрессивного изображения на этих платформах может привести к снижению производительности.

Изображения вне коробки

В Интернете полно блестящих веб-разработчиков, и ни одна статья о сжатии изображений не была бы полной, если бы не указывать на некоторые замечательные хаки, обходные пути и вообще впечатляющие вещи, которые эти разработчики создали, чтобы позволить им создавать меньшие, более качественные и впечатляющие изображений.

Разделение вашего прозрачного слоя для улучшения сжатия.

HTML5 разработчики игр обычно посылают больше данных об изображении, чем ваш стандартный веб-сайт, большинство из которых представляют собой прозрачные рамки для анимации флипбука К сожалению, это заставляет эти файлы использовать опцию PNG для получения прозрачности. Однако несколько разработчиков разработали несколько обходных для изображений, чтобы получить лучшее сжатие и прозрачность. Например, вы можете разделить данные о цвете и данные о прозрачности на два отдельных файла изображения (например, два JPG) и восстановить их на клиенте с помощью элемента CANVAS. Хотя это увеличивает количество запросов, которые происходят в сети, экономия в размере изображения может быть значительной для разработчиков, у которых есть тонны прозрачных изображений на их сайте (например).

Улучшить сжатие PNG за счет лучшей обработки.

Опция PNG Deflate - это кодер без потерь, но это не должно помешать вам использовать препроцессор с потерями, если он вам нужен. Инструменты обработки изображений, такие как ImageAlpha а также ImageOptim , может сжать ваше изображение PNG методом с потерями в качестве предварительной обработки перед передачей его в окончательный формат PNG. Это создает двухэтапный процесс, в котором ваши потери и сжатие без потерь выполняются двумя отдельными приложениями. Результаты впечатляют: уменьшенное цветовое пространство позволяет компрессору без потерь находить и делать более частые совпадения в файле, обеспечивая лучшее сжатие.
После того, как вы экспортировали PNG, пришло время упаковать данные PNG с использованием современных компрессоров, чтобы создать файл PNG меньшего размера. Инструменты как advPNG возьмет уже экспортированный PNG и пропустит его через лучший компрессор Deflate, чтобы получить файл меньшего размера. Или вы могли бы объединить PNGOUT с такими инструментами, как OptiPNG или же Zopfli чтобы получить тот же эффект. Конечно, каждая из этих систем дает немного разные результаты, учитывая системы ввода, поэтому может быть целесообразно принять систему, которая будет сжимать против нескольких компрессоров и выбирать наименьший файл; Если тебе лень, ScriptPNG сделает тяжелую работу за вас.

Не все анимации созданы равными.

SublimeText Команда запустила веб-сайт, на котором они хотели иметь богатую анимацию, демонстрирующую возможности редактора. Вместо того, чтобы использовать видео или стандартный GIF, они сгенерировали пользовательская анимация и система упаковки для обеспечения отличной анимации изображения в гораздо меньших размерах. Техника позволяет им отображать высококачественную анимацию на нескольких платформах без необходимости продвинутого видео или флеш-плагина.

Более чем один способ адаптивного изображения.

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

Заключение

Изображения представляют собой сложный тип контента, который может повысить качество и восприятие пользователем вашего сайта, но также может подорвать ваши усилия по быстрой загрузке и отзывчивому качеству. Перед тем, как вы отправите свой сайт в живую, убедитесь, что вы выполняете контрольный список сжатия изображений :

1. Сжатие изображений в правильном формате с минимально допустимым уровнем качества
   1. Отрегулируйте вручную (где это возможно) качество сжатия для всех изображений
   2. Автоматизируйте все остальное, чтобы добиться максимальной производительности
2. Изучите использование WebP для всех ваших потребностей изображения
3. Сохраняйте изображения с прогрессивными параметрами, чтобы улучшить восприятие пользователем времени загрузки ваших страниц
4. Исследуйте другие интересные способы получить лучшее сжатие или прозрачность. Думай нестандартно!

Полезные инструменты