Ускоряем изображения еще больше при помощи HTTP2 и Progressive JPEG. Progressive JPEG для фотографов - эффективное использование PJPEG

• Перевод

С точки зрения пропускной способности канала, изображения - обжоры. В среднем, они занимают наибольший (62%) средний трафик сайтов и чаще всего их передача является узким местом. Загружаясь, изображения рвут страницу, расталкивая другие элементы вокруг и вызывая неуклюжую перерисовку (прим. перев. : от этого, конечно, можно избавиться определенной версткой, но тогда нужно хардкодить или ограничивать размеры картинок). Загрузка изображения на странице воспринимается или как «тик, тик, тик, тик, тик, готово», или же сначала вообще ничего нет, а потом внезапно «бум!» и оно появляется ниоткуда. Все понимают, что подразумевается под «тик, тик, готово» и «бум» и всех нас это немного раздражает, потому что мы чувствуем, сколько времени наших прелестных и коротких жизней потеряно в ожидании загрузки картинок.

Упущенная возможность

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

Оптимизированные для веба фото - это jpeg, а jpeg делится на два типа: базовый последовательный (baseline) и прогрессивный (progressive). Последовательный jpeg - это один скан изображения сверху вниз в полном разрешении, а прогрессивный jpeg - это серия сканов улучшающегося качества. Так они и рендерятся - последовательный jpeg отрисовывается сверху вниз («тик, тик, тик, …»), а прогрессивный быстро размечает свою территорию и затем совершенствуется (по крайней мере так задумано).

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

В локальном эксперименте - иллюстрация в начале поста - на задушенном канале, 80-килобайтный прогрессивный jpeg появляется на странице раньше , чем 5-килобайтный последовательный jpeg (то же самое изображение, уменьшенное в размере) в Firefox под Windows, что должно произвести впечатление. Конечно, на первом проходе прогрессивный jpeg имеет низкое разрешение, но он содержит столько же информации, сколько и маленькое изображение, или даже больше. А если масштаб страницы уменьшен, например, на мобильном устройстве, то низкое разрешение даже не заметно. Адаптивные изображения работают на нас прямо сейчас (прим. перев. : отсылка к responsive web design)!

По существу, прогрессивный jpeg лучше. Так какой же самый распространенный тип jpeg в сети? Угадали: последовательный , и с очень большим отрывом. В выборке из тысячи изображений, 92.6% - последовательные.

Не беспокойтесь, нам всего лишь нужно объявить, что прогрессивный jpeg - это best practice и затащить остальной мир к нам на борт. Но чтобы сделать такое объявление, нужно быть в нем уверенным. А для этого сначала необходимо понять, как сегодня обстоят дела с поддержкой прогрессивного jpeg браузерами.

Проверка реальностью №1

Прогрессивные jpeg отрисовываются во всех браузерах, об этом не стоит переживать. Нас волнует то, как они отрисовываются.

Поведение прогрессивных jpeg в браузерах

Браузер (конкретная версия)	Отрисовка прогрессивных jpeg переднего плана (foreground)	Отрисовка прогрессивных jpeg заднего плана (background)
Chrome (v 25.0.1323.1 dev Mac, 23.0.1271.97 m Win)	прогрессивно (очень быстро!)	прогрессивно (очень быстро!)
Firefox (v 15.0.1 Mac, 12.0 Win)	прогрессивно (очень быстро!)
Internet Explorer 8	мгновенно после загрузки файла (медленно)	мгновенно после загрузки файла (медленно)
Internet Explorer 9	прогрессивно (очень быстро!)	мгновенно после загрузки файла (медленно)
Safari (v 6.0 Desktop, v 6.0 Mobile)	мгновенно после загрузки файла (медленно)	мгновенно после загрузки файла (медленно)
Opera (v 11.60)	UPD: прогрессивно (очень быстро!) (proof)	мгновенно после загрузки файла (медленно)

Результаты разочаровывающие, но в целом, доля рынка браузеров с прогрессивной отрисовкой прогрессивных jpeg идет вверх. Поддержка пока что составляет около 65% (Chrome + Firefox + IE9).

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

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

Проверка реальностью №2

Вы можете спросить «А не будут ли прогрессивные jpeg весить больше, чем обычные? Не платим ли мы за “слои”?». С некотороыми другими типами многослойных изображений - платим, но не с jpeg. Прогрессивный jpeg обычно на несколько килобайт меньше, чем его же последовательная версия. Стоян Стефанов в процессе построения графика конвертации 10000 случайных последовательных jpeg в прогрессивные , открыл ценное практическое правило: файлы больше 10Кб, чаще всего, будут весить меньше в прогрессивном варианте.

Убеждать стало бы проще, если бы можно было сказать, что прогрессивные jpeg всегда весят меньше, так что их и нужно всегда использовать. Стоян нам в этом помогает. Он говорит: «Еще одно наблюдение по поводу правила 10Кб: в тех случаях, когда вес последовательного jpeg меньше, он меньше с небольшой разницей. А когда меньше прогрессивный, то он обычно меньше намного. Так что говорить, что нужно всегда использовать прогрессивный и станет лучше - это нормально».

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

Причиной того, что последовательные jpeg наиболее распространены в сети, является, без сомнения, то, что инструменты оптимизации изображений создают их по умолчанию. Однако, все просмотренные мною - Photoshop, Fireworks, ImageMagick, jpegtran - имеют возможность сохранения и в прогрессивном варианте. Таким образом, чтобы отдавать прогрессивные jpeg, нужно сознательно модифицировать свой процесс оптимизации изображений.

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

Как узнать, что ваши jpeg прогрессивные? Вот несколько способов идентификации типа jpeg:

1. ImageMagick - из командной строки запустите: identify -verbose mystery.jpg | grep Interlace На выходе будет или “Interlace: JPEG”, или “Interlace: None.”
2. Photoshop - Откройте файл. Выберите File -> Save for Web & Devices. Если это прогрессивный jpeg, то флажок Progressive будет отмечен.
3. Любой браузер - Последовательные jpeg будут загружаться сверху вниз, а прогрессивные будут вести себя по-другому. Если файл загружается слишком быстро, может понадобиться ограничение пропускной способности канала. Я использую ipfw под Mac’ом.

Проверка реальностью №3

Согласно этому FAQ по сжатию jpeg , каждый прогрессивный проход отрисовки нагружает ЦПУ примерно на столько же, на сколько отрисовка целого последовательного jpeg. Это неважно для настольных ПК, но возможно имеет значение для мобильных устройств.

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

Как видно в таблице, мобильный Safari не отрисовывает прогрессивные jpeg прогрессивно и вероятно потому, что они нагружают ЦПУ. Прогрессивый jpeg не является новым форматом изображений. Следовательно, осознанно и без причин не поддерживать прогрессивный jpeg - не вариант для браузеров, даже для мобильных. Будем надеяться, что скоро мобильные браузеры станут справляться с прогрессивным рендерингом, но причины текущего отсутствия поддержки имеют смысл. Очень обидно, потому что как раз на мобильных устройствах прирост скорости и экономия в размерах файлов, которые предоставляет прогрессивный jpeg, пришлись бы очень кстати. Выше было упомянуто, что он как бы является решением для адаптивных изображений на данный момент. На самом деле он мог бы быть таковым, но время еще не пришло.

Глядя в будущее

Месяц назад, Google запрыгнул на борт со своим сервисом Mod_Pagespeed , сделав convert_jpeg_to_progressive основным фильтром . SPDY тоже не отстает, переводя jpeg более 10Кб в прогрессивные по умолчанию , согласно практическому правилу Стояна. Браузеры, поддерживающие инкрементальное отображение, от этого станут казаться намного быстрее. Как видно из таблицы выше, включающей Google Chrome, такие действия Google имеют смысл. Я не стану говорить, что если уж «не-причиняй-зла-делай-веб-быстрее» Гугл выбрал progressive jpeg как best practice, то и мы должны тем более. Но это лишнее подтверждение. И самое главное, это показывает, что прогрессивный jpeg - формат, который был в своего рода морозилке на протяжении десятилетия - начинает свое возвращение.

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

Теги: Добавить метки

Нарезной батон. Подходит к борщу на ужин

В Школе редакторов есть преподаватель - Николай Товеровский. Жена часто просит его купить хлеб к ужину . На этом примере он объясняет разницу между “делать” и “сделать”.

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

Метод прогрессивного джипега - это способ делать и сделать одновременно. Его автор, Артемий Лебедев, описал суть метода одной картинкой:

Картинка из параграфа 167 Ководства студии Артемия Лебедева

По Лебедеву , надо стремиться к тому, чтобы в любой момент времени задание было готово на 100%. Вопрос лишь в степени детализации. Если есть время и возможность - добивайся совершенства сколько тебе влезет. Не хватает ресурсов на доработку - не беда, задание уже выполнено, то есть сделано.

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

Я страдала, но не прекращала попытки. На моё счастье, началась учёба в Школе редакторов. Первое же практическое задание дало возможность попрактиковаться в методе прогрессивного джипега.

Задание из курса “Управление и результаты”. Надо нарисовать двух осьминожек. Ножки осьминожек - мои навыки. У одной осьминожки ножек немного и они коротенькие - это я сегодня. У второй ножек больше и они длиннее - это я через год.

Для вдохновения нам дали две картинки:

У осьминожки дизайнера короткие ножки-умения

Другое дело - осьминожка артдиректора. Даже взгляд изменился

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

Чтобы прекратить панику и успокоиться, посмотрела мультик. Если есть 10 минут, гляньте, не пожалеете.

Потом пошла советоваться с дочерьми. Они у меня богини фотошопа и всё такое. Старшая посоветовала не париться, нарисовать на бумаге красками, потом сфотать да и всё. Младшая сказала: “Напиши, что надо, сколько щупалец, какой длины, я тебе нарисую”. Но я решила, что уже большая и должна делать свои уроки сама.

Первая стадия, 20%

Пошла в Гугл-документы и создала таблицу. Выписала в столбец все навыки, которые у меня есть, добавила к ним те, что хочу развить к концу года, придумала шкалу роста, раскрасила ячейки в разные цвета и получила осьминожку без головы. Потратила 30 минут.

Задание выполнено. Но степень проработки оставляет желать лучшего

Обрадовалась, загрузила в школьную папку “Результаты заданий” и съела кусок торта в награду.

Вторая стадия, 60%

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

Это всё ещё таблица, но согласитесь, она похожа на осьминожку

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

Скриншот ещё больше похож на осьминожку

Третья стадия, 97%

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

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

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

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

Итак, изображение в Фотошоп готово к сохранению в формате отличном от формата Фотошоп, то есть оптимизации. Если во вкладке «Файл» верхнего меню мы выберем опцию «Сохранить», то, допустим это наше творение, сохранится в формате PSD, то есть файл будет «фотошоповским». Но выбрав другую опцию, которая присутствует в подавляющем большинстве компьютерных программ и именуется «Сохранить как», то в этом случае у нас появляется возможность выбора, - каким типом файла быть нашему творению за пределами Фотошоп:

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

Это окошко откроется перед нами с уже установленными самим Фотошоп настройками. Мы можем, ничего не предпринимая, с ними согласиться нажатием кнопки «Ок». И при таких наших действиях мы можем «спать спокойно» (юмор), процедура оптимизации прошла успешно. А можем в процессе оптимизации и поучаствовать. Давайте увеличим масштаб видимости до 200%, закрыв предварительно открытое окошко регулировки уровня сжатия:

(Расположение кнопки выбора масштаба для версий CS4, CS5).

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

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

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

Для того чтобы видеть как меняется объём файла (изображения) нам нужно, щелчком левой кнопки мыши, поставить галочку в пустом квадратике рядом с надписью «Просмотр». После чего, всё теми же щелчками мыши, выбирать поочерёдно то одну то другую разновидность формата (Базовый стандартный, Базовый оптимизированный, Прогрессивный), дополнительно изменяя и количество шагов (3,4,5):

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

Наши действия по выбору формата оптимизации (сжатия) могут быть дополнены изменением и других параметров изображения:

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

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

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

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

Например, мы сжали (оптимизировали) изображение и его объём в Фотошоп таков:

Оптимизированный файл JPG (изображение) я сохраню на рабочем столе компьютера. При наведении курсора на значок файла ОС Windows покажет несколько другое значение.

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

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

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

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

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

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

Но при размещении фотографий высокого качества в интернете, могут появиться определённые трудности.

Общая картина с приличными по скорости интернет-каналами заставляет желать лучшего. А уж высокоскоростная передача данных стационарного (оптика, ADSL и т.д.) и мобильного (UMTS, WiMax, LTE) типов доступна далеко не везде.

Вот ведь ирония: сейчас компания Yota разворачивает в ряде регионов сети 4G, на основе LTE Advanced. В то время, как предшественник - 3G, представлен скорее фрагментарно, ограничиваясь мегаполисами и связывающими их крупными транспортными артериями.

Внушительный процент всех существующих интернет-каналов (радио и проводных) представлен низкоскоростными каналами.

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

Вывод на экран полноразмерного снимка при медленном интернете может достигать минут. Можно ли что-нибудь сделать? Пожалуй, что да.

Progressive JPEG - эффективное использование PJPEG

Речь здесь пойдёт не о каналах и провайдерах и не о тех случаях, когда постятся фотки с мобильника в Контакт. Но если загружаем снимки на 16 Мп в Panoramio, то достаточно пары кликов, чтобы существенно улучшить и скорость загрузки фото, и комфорт для зрителей.

Всё это при том же самом размере файлов и кадров.

Как правило, основная масса фото отправляется на сервер в формате JPEG после предварительной обработки - цвето и яркостная коррекция, обрезка и прочее.

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

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

И так – до победного конца. Но часто пользователь понятия не имеет о том, что находится на загружаемом фото и нужно ли оно ему.

Однако, приходится ждать, пока достаточный для понимания сути снимка объём загрузится.

Избежать такого неудобства для пользователя несложно: технология JPEG имеет ещё один метод построения снимка – прогрессивный метод или Progressive JPEG .

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

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

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

Так, последовательно друг за другом грузятся все группы (в стандарте они называются СКАНЫ):

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

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

OptiPic allows your website to demonstrate better technologies and display jpeg faster thanks to progressive jpeg technology.

The technology of progressive jpeg allows you to keep the original quality of the picture, but the speed of loading such a file is greatly higher than of loading photos with other technical data. Let us consider this issue in more detail and more closely, and also talk about those aspects that require closer attention.

Progressive JPEG means faster loading of JPEG

Web optimized photos are in JPEG format. It has a certain classification and is represented by two following categories:

• Sequential (baseline) – provides a regular boot image in one layer. Images are loaded from top to bottom with full resolution;
• Progressive – includes a series of successive layers with gradually improving quality.

Progressive jpg first simply marks the contours of the future photo, and then loads the image into layers - from the layer with the worst quality to the last final layer with the maximum quality.

The advantages of this format are obvious and undeniable. Such a photo appears on the screen much faster, and its volume can be quite impressive. And this speed has a positive impact on the overall download speed of the web page as a whole.

It is enough to recall one simple fact for a better understanding. Even if you use low speed connection, a file in progressive jpg format with a size of 80 KB will be displayed much faster than a similar image of a sequential jpeg, which is reduced in size and has only 5 KB. Isn’t it impressive? Oh, yes it is!

During the first pass, the progressive jpeg has a lower resolution. However, the file includes the amount of data that are similar to a smaller image. And when displaying an object on a mobile device, the vast majority of users will not even notice the low resolution.

Despite all the advantages of progressive jpeg , its popularity today is significantly less than of the one. Over 90% of all images in the Web have a consistent display format.

But the situation is gradually changing in the opposite direction. The first steps in this direction are made by Google, which introduces new services for working with progressive jpeg and its subsequent promotion. Moreover browsers by the most different manufacturers gradually give preference to this format of display of photographs. Technology, which has been in a kind of isolation for the past few years, is now becoming more and more popular and in demand.

Now progressive jpeg has a wide range of advantages and benefits that are unquestioned. This format will confidently take its own place in future and in all its aspects is much better than outdated analogues of previous years.