«Прогрессивный» JPEG: почему многие веб-сайты избегают рендеринга JPEG таким образом? За и против?


39

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

Почему больше веб-сайтов не используют прогрессивный JPEG? Какие недостатки? Это просто нехватка поддержки инструмента, или эти файлы чем-то уступают традиционным рендерингам изображений JPEG сверху вниз?


2
Что случилось с чересстрочными гифками тоже?

7
Они были великим создателем неизвестности в фильмах примерно 1990-х годов, ожидая загрузки изображения, о, это немного менее блекло, хорошо, мы почти можем видеть лицо убийцы ... БАМ [переход к драматическому боевику]
Марк Хендерсон,

1
Мне нравится алгоритм бесконечного увеличения, используемый в Blade Runner.
Крис В. Ри

3
@ Крис, это ничто по сравнению с программным обеспечением в Red Dwarf .
Питер Тейлор

@PeterTaylor Это потрясающе :-)
Крис В. Ри

Ответы:


14

Прогрессивный JPEG имеет поддержку scattershot с самого начала. На странице Википедии в формате JPEG говорится:

Однако прогрессивные JPEGs не так широко, [править] и даже некоторые программное обеспечение , которое их поддерживает (например, версии Internet Explorer до Windows 7) [12] только отображает изображение после его полной загрузки.

NB. Первое утверждение не имеет источников, а источник второго не обязательно говорит, что это поддерживается только в Windows 7.

Я не помню, когда я в первый раз избегал использования Progressive JPEG, но самая последняя проблема заключалась в том, что анализаторы изображений во Flash (которые могут загружать PNG, GIF и JPEG) также не могут загружать Progressive JPEG ( Обновленная ссылка в интернет-архиве ) .


Но использование Flash - зло! ;-)
Марко Демайо

15

Я обычно сохраняю изображения как прогрессивные.

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

Изображения в прогрессивном формате JPEG обычно меньше по размеру, чем то же изображение без прогрессивного .

Например, изображение JPG 8K (максимальное качество) может легко превратиться в 6K (все еще максимальное качество), если используется прогрессивная развертка и без потери пикселя четкости.

Более того, в таких графических редакторах, как Photoshop, сохранение изображения в формате JPG не требует ничего (это просто флажок в окне, которое появляется при использовании команды «Сохранить как»), поэтому я обычно делаю это.


7
Действительно, yuiblog.com/blog/2008/12/05/imageopt-4 обнаружил, что 94% JPEG размером более 10K сжимаются лучше (меньше) в прогрессивном режиме (хотя для небольших файлов это отличается, так как 75% JPEG меньше 10K сжимают лучше без прогрессивного режима). Поэтому, как правило, рекомендуется сохранять большие JPEG-файлы как прогрессивные.
Джон Меллор

1
Я согласен с Джоном: если вы снизите качество с максимального до очень высокого (80-90%) или ниже, вы увидите, что прогрессивный больше не приводит к меньшему размеру.
Joelpittet

1
Вы не можете точно знать, что изображения 6K и 8K имеют одинаковое качество. Это максимальная настройка, и сокращение будет невидимым. Я подозреваю, что меньший файл будет больше с потерями. Нет никакого способа, которым прогрессивный алгоритм мог бы быть на 25% более эффективным. Во всяком случае, он должен быть менее эффективным, поскольку добавляет слой разделения к коррелированным сжатым данным.
Зденек

6

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

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

То же самое касается чересстрочных GIF-файлов, так как кто-то добавил их в комментарии.

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


1
Я думаю, что на самом деле большое значение здесь имеет мобильный телефон - я предполагаю, что новый смартфон его поддерживает; и это сделает работу в Интернете по 3G или более медленной скорости намного лучше - если вы видите изображения, которые не имеют отношения к загрузке, вы можете уйти, прежде чем тратить больше времени или денег
Baumr

Мобильный браузер может иметь настройку для отображения только первого или второго прохода прогрессивного JPEG по умолчанию. Это сэкономит на данных и обеспечит более быстрый просмотр.
Вс

Баумр: Нет, стоимость процессора слишком высока; мой телефон фактически даже частично не рисует обычное изображение, он ждет полной загрузки, прежде чем даже отобразить.
Зденек

sunk818: Хотя теоретически это возможно, это будет хакерский взлом. Вам нужно будет проанализировать JPEG в TCP-части стека и досрочно прервать передачу ... Ужасно. И это нарушит конвейерную обработку тоже. И большинство библиотек JPEG отказываются работать с таким файлом, так что вам также придется использовать хак для доморощенного! Просто нет.
Зденек

3

Google использует прогрессивную загрузку своих изображений в images.google.com. Сначала они растягивают большой палец, чтобы просмотреть размеры, а затем загружают исходное изображение. Я думаю, что это хорошая практика. Так же, как прогрессивный JPEG


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

2

Прогрессивный рендеринг (gif / jpeg) был для старых добрых времен интернета, когда серверы работали медленно, а передача данных на последней миле осуществлялась при сканировании через POTS. Никто больше не тратит время на это.

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

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


3
Вы пренебрегаете мобильными 3G-соединениями - они могут быть медленными; это будет зависеть от того, посетят ли эти люди ваш сайт, но в целом рынок и его использование действительно растут
Baumr

1
Прогрессивный JPEG также хорош для островных стран, где полоса пропускания ограничена, а задержка высока.
Вс

Но все же не следует избегать прогрессивного рендеринга.
Бхавеш Гангани

Да, в настоящее время регион мира меньше, чем если вы используете 2G или 3G. Только что пользователь из Barundi загрузил страницу со скоростью 3-8 секунд по всему миру с проводного рабочего стола и завершил работу за 115 секунд по мобильной связи 2G. Это все еще может быть медленный мир на мобильном телефоне.
ClearCrescendo

60% подключений Chrome - 2G - Chrome Dev Summit 2016.
Томас МакКейб,

1

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


0

Многие библиотеки не предлагают его вообще или нет по умолчанию. Но это не причина. Я управляю веб-сайтом, предлагающим изображения, и ненавижу прогрессивные JPEG. Зачем? Потому что алгоритм, используемый в них, хуже моего! Я использую ту же технику, что и Google, плюс на самом деле я накладываю средний эскиз поверх маленького. Таким образом, пользователь получает практически полное качество мгновенно на любом соединении, независимо от того, насколько велик был оригинал. Прогрессивные файлы становятся очень блочными, разрушая этот эффект.

Наложение миниатюр это способ сделать это.


0

Прогрессивный JPEG работает в Chrome, Firefox и IE 9+. Я думаю, что это охватывает большинство браузеров, используемых сегодня для использования в Интернете.

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.