Что значит сжатие изображений при отправке

Влияет ли сжатие на качество изображения?

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

Несмотря на то, что прошло уже более 15 лет с момента появления формата JPEG он и по сей день является лучшим для цифровой фотографии. Под сжатием изображения следует иметь в виду JPEG сжатие, работа которого заключается в уменьшении размера изображения.

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

Для того чтобы увидеть то, что происходит с изображением, мы воспользуемся режимом наложения Difference (Разница). Режим наложения (Blend Mode) Разница (Difference) приобрёл свое название в результате того, что он показывает различие между двух слоёв. Любые области из обоих слоёв, которые в точности совпадают, будут отображаться только черным цветом, и наоборот, области, в которых имеются отличия, будут отображаться в различных цветах.

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

Перед вами скриншот с двумя открытыми документами в редакторе Photoshop, каждый из которых содержит идентичное изображение:

Но идентичны ли изображения на самом деле? Внешность порой бывает обманчива, в особенности, если это касается экрана компьютера. Откровенно говоря, они не одинаковы. Изображение, что справа – оригинал, это не подвергнутое сжатию изображение, оно было загружено непосредственно с цифровой фотокамеры. А вот изображение слева – копия оригинала, сохранённая в Photoshop с 60% качеством, что является довольно типичной ситуацией. Это означает, что к изображению слева было применено сжатие.

Понимаю, что исходя из представленного выше скриншота, сложно судить о качестве изображений и даже, если бы вы просматривали их на моем мониторе в редакторе Photoshop, то вы также с трудом могли бы ответить на вопрос, какое из изображений было подвергнуто сжатию, а какое – нет. Но в случае если бы мы распечатали их, то разница была бы очевидной, на мониторе, имеющим меньшее разрешение, чем распечатанное изображение, разницу определить не так уж и легко. По крайней мере, без использования режима наложения Difference (Разница).

Чуть раннее я говорил, что режим наложения Difference (Разница) показывает отличие между двумя слоями, и что любая область, которая в точности совпадает у данных двух слоев, отображается сплошным черным цветом. Давайте проведём тест. Для этого я возьму фото оригинал (несжатое изображение) и сделаю его дубликат, воспользовавшись клавишами Ctrl+J. В палитре слоёв у меня теперь два слоя – фото оригинал в качестве фона и его копия чуть выше, которой Photoshop дал название Layer 1.

Поскольку слой с названием Layer 1 является дубликатом фонового слоя, то они одинаковы. Теперь воспользуемся режимом наложения Difference (Разница), для того чтобы это проверить. Для этого выберите слой Layer 1 и в верхней части панели слоёв в параметре Blend Mode (Режим наложения) измените режим наложения с Normal (Обычные) на Difference (Разницу).

Обратите внимание на окно документа с включённым режимом Difference (Разница) для слоя Layer 1, мы видим, что это изображение залилось чистым чёрным цветом. В этом случае режим наложения Difference (Разница) говорит нам о том, что слои действительно идентичны:

Пойдём ещё дальше, для того чтобы убедиться, что перед нашими глазами действительно сплошной чёрный цвет. Для этого мы будем применять корректирующий слой Levels (Уровни). Перемещаемся в нижнюю часть панели слоёв и кликаем по иконке (в форме чёрно-белого кружка) New Adjustment Layer (Новый Корректирующий слой):

Теперь из списка корректирующих слоёв выбираем Levels (Уровни):

Появилось диалоговое окно Levels (Уровни). Обратите внимание на гистограмму в центре диалогового окна, на ней представлена информация о тональности, отображенной на изображении. В нашем случае все пиксели изображения отображены чисто чёрным цветом, такое происходит тогда, когда оба слоя идентичны. Следовательно, всё, что показала гистограмма – чёрная вертикальная полоска слева:

Гистограмма показала нам то, что кроме чёрного цвета посторонние цвета здесь не присутствуют. Из этого следует, что фоновый слой и слой Layer 1 на 100% одинаковы. Пока все бесспорно. Мы только что доказали факт, который каждый из нас и так знает – дубликат слоя всегда идентичен его оригиналу. Увлекательно, не так ли? Продолжим.

Чтобы выйти из диалогового окна Levels (Уровни), кликаем на кнопке Cancel (Закрыть), что в верхнем правом углу, а затем из палитры слоёв удаляем слой Layer 1, кликнув и перетащив его на пиктограмму мусорной корзины.

Теперь в палитре только фоновый слой.

А теперь давайте посмотрим, что произойдет, в результате использования того же самого приёма только в сравнении оригинала и его сжатой копии. Как я уже говорил ранее – увидеть разницу между ними на экране монитора не так-то просто. Но что же об этом нам скажет режим наложения Difference (Разница), давайте посмотрим.

Из двух открытых окон с фотографиями, я выбрал документ сжатой копией (фото слева) и при помощи инструмента Move (Перемещение) перетащил её в окно документа с фото оригиналом (справа).

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

В панели слоёв у нас опять два слоя. Изображение оригинал это фоновый слой, а его сжатая версия чуть выше, на слое с названием Layer 1.

Еще раз меняем режим наложения Normal (Обычные) на Difference (Разница).

Итак, если оба изображения визуально одинаковы, то при применении режима наложения Difference (Разница) у нас должен получиться сплошной чёрный цвет.

Хмм. Посмотрите внимательно на изображение выше, видите на нём слабо выраженный шум? Всё зависит от вашего монитора, а точнее от его настроек. Вы можете увидеть только чёрный цвет, но я на своём мониторе вижу нечто иное, и скажу определенно, что это не тот сплошной чёрный цвет, какой получался раннее при сравнении копии слоя и оригинала. Здесь присутствует что-то ещё… И это «что-то» позволяет нам сделать вывод, что и оригинал и сжатое изображение не идентичны. Но чем же они отличаются друг от друга? Действительно ли сжатие в результате даёт какую-либо заметную разницу?

Опять воспользуемся корректирующим слоем Levels (Уровни) и с помощью гистограммы попытаемся ответить на эти вопросы. В нижней части панели слоёв кликаем по иконке New Adjustment Layer (Новый Корректирующий слой) и из списка выбираем Levels (Уровни).

На этот раз в показаниях гистограммы в её левой части что-то изменилось, это доказывает, что зрение меня не обманывало.

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

Ну, так в чём же собственно разница?

Всё очень просто – в мусоре. Каждый раз, сжимая изображения, мы автоматически добавляем к ним кучу мусора. Мусор или шум, можете называть это, как хотите.

Линия внизу означает то, что мы повредили изображение. Сколько же мусора добавило JPEG сжатие? Пока нам кажется, что немного, но нам и сейчас сложно это разглядеть. Поэтому кликаем по маленькому белому ползунку внизу гистограммы и перемещаем его до чёрного ползунка.

Не вдаваясь в тонкости, касаемо работы диалогового окна Levels (Уровни), поясню: этими действиями мы сделали весь шум, присутствующий на нашем изображении, ярче. Теперь нам легче его рассмотреть. Не забывайте о том что, многообразие цветов, которые вы видите на изображении, свидетельствуют о разнице между оригиналом фотографии и его сжатой версией.

Не очень приятное зрелище, не так ли? Теперь мы можем с легкостью увидеть эти посторонние цвета, свидетельствующие о повреждении, возникшие в результате JPEG сжатия.

Изображение заполнено тем, что обычно называют «артефакты сжатия», об этом, грубо говоря, можно сказать «мы взяли и испортили безупречное по качеству изображение».

То, насколько повреждается цифровое изображение, в результате применения сжатия мы уже видели, теперь возникает вопрос, что мы можем сделать по этому поводу? Не многое, к сожалению. Формат JPEG и по ныне наш лучший выбор для хранения цифровых фотографий, а когда размер файла слишком велик, у нас действительно не остаётся выбора, кроме как его сжать.

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

Источник

Как работает сжатие цифровой фотографии – базовые алгоритмы

Сжатие является большой проблемой, когда дело доходит до фотографий. Вы можете легко испортить большое изображение, сжимая его слишком много или слишком часто.

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

Что такое сжатие файла

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

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

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

Когда заметно сжатие

Разница в форматах сжатия может быть не заметна на ЖК-экране камеры или даже на мониторе компьютера. Это наиболее очевидно при печати изображения, особенно если оно увеличено. Слишком сильное сжатие может повлиять даже на качество печати размером 8×10 дюймов. Однако, если вы просто делитесь фотографией в социальных сетях, потери при сжатии не будут заметны.

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

Как работает цифровое сжатие

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

Механизм сжатия ищет любые большие области повторяющихся цветов и удаляет некоторые повторяющиеся данные. Затем они восстанавливаются на изображении при распаковке файла.

Два типа сжатия изображений

Два типа сжатия – без потерь и с потерями, и они означают именно то, как звучит их название.

Советы по предотвращению проблем со сжатием

Любой фотограф может предпринять шаги, чтобы не потерять качество фотографии при сжатии.

Источник

Как сжать фотографию и сохранить качество

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

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

Часто перед пользователями возникает вопрос: « как сжать фотографию? », потому как « большой вес » изображения является причиной следующих неудобств:

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

Сжатие фото онлайн

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

Ниже приведены несколько бесплатных онлайн-сервисов подобного рода:

Программы для сжатия фотографий

« Как сжать размер фотографии? » — такой вопрос частенько предстает перед начинающими фотографами, да и не только перед ними.

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

Уменьшить размер изображения в paint не составит труда, если выполнить следующие действия:

Также уменьшить вес фотографии можно в профессиональном графическом редакторе Photoshop :

Для уменьшения веса необходимо:

Советы по сжатию изображений

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

Сжимаем много

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

Для более качественной обработки фотографий лучше использовать приложения, которые устанавливаются на ваш компьютер. Примером такой программы является Picture Combine — данный графический редактор позволяет проводить пакетную оптимизацию фотографий. Программа проста в использовании, поэтому овладеть ей сможет каждый:

Как сжать несколько фотографий в фотошопе

В фотошопе также есть возможность сжать несколько фотографий одновременно. Для этого необходимо создать action – алгоритм действий для пакетной обработки фотографий.

Ниже описаны шаги по созданию подобного алгоритма:

Сжимаем целую папку

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

Для решения данной задачи лучше всего воспользоваться архиватором, который уменьшит вес папки ( от 20 до 75 процентов ). Самым распространенным архиватором является WinRar :

Для того чтобы сжать папку, необходимо кликнуть по ней правой кнопкой мыши и выбрать пункт « Добавить в архив ». Откроется окно с параметрами, в котором можно выбрать метод сжатия и формат архива, после чего нужно нажать « Ок » — начнется процесс сжатия.

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

Источник

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

Введение

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

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

Памятка: Контрольный список по сжатию изображений

Почему важно быть маленьким

Что может быть хуже, чем заставлять пользователей платить за загрузку вашего сайта

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

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

Большие изображения – большие проблемы

Мы можем видеть, что наибольшую долю в объёме страницы занимают изображения. Это плохие новости для мобильных устройств, где картинка буквально стоит тысячи слов.

Неправильная обработка изображений часто становится причиной плохой производительности. Слишком большие, недостаточно сжатые изображения или изображения очень высокого качества могут оказаться слишком тяжёлыми, что оказывает прямое влияние на скорость загрузки вашего сайта. Выбрать правильный метод сжатия и достичь при этом наилучших результатов несложно, зная об особенностях этого процесса.

Виды алгоритмов сжатия

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

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

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

Рис. 1 – Пример сжатия с потерей данных. Значения округляются до ближайшего числа, кратного 10. Это преобразование необратимо.

Рис. 2 – Пример сжатия без потерь. Количество символов, идущих подряд, определяется числом, после символа. Мы можем точно восстановить исходные данные. Заметьте, что если подряд идут не больше двух символов, имеет смысл просто оставить их как есть. Вы видите такой пример в конце потока в виде ‘bb’.

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

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

В общем случае веб-разработчику при выборе формата изображения нужно ответить на следующие вопросы:

‘Lena’ – распространённое изображение для оценки и сравнения алгоритмов сжатия изображений.

Если вам не нужна прозрачность или анимация, JPG – лучший формат для вас.

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

Рис. 3 – Особенности некоторых форматов, поддерживаемых браузерами.

Компромисс между качеством и размером

Это значит, что многие изображения выглядят хорошо для обычного пользователя на уровне качества 75, но вдвое меньше размером, чем, если бы они были на уровне качества 95. По мере того, как качество опускается ниже 75, появляются более различимые визуальные изменения, а экономия в размере уменьшается.

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

Рис. 4 – Средний уровень качества JPG, используемый на крупнейших сайтах.

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

Этот процесс – компромисс между размером файла и быстродействием клиента: он экономит трафик, но провоцирует большую нагрузку на стороне клиента, чтобы реконструировать изображение при рендеринге.

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

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

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

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

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

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

Есть несколько способов решить эту проблему.

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

Однако, одна из пока-не-разрешённых проблем с этим подходом – найти хорошее решение для управления ростом объёма ваших данных. Что касается логики, есть надежда, что атрибут srcset решит эту проблему (движок WebKit, как вы знаете, поддерживает его, Blink намерен реализовать поддержку, FF будет его поддерживать в iOS).

А пока, можно использовать polyfill для srcset в качестве промежуточного шага.

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

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

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

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

Существует два основных способа отображать изображения в сети.

Браузеры не используют первый вариант, так как это приводит к наиболее медленной загрузке страницы.

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

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

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

Рис. 6 – Пример линейной и прогрессивной загрузки изображений.

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

Нестандартные изображения

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

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

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

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

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

Заключение

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

Источник