HTML и отображение элемента <img/>

Я пытаюсь понять, позволяют ли в Интернете просматривать прогрессивный JPEG или нет.

Предположим, у нас есть сервер, где (см. Прогрессивные JPEG):

$ identify /var/www/test.jpg
/var/www/test.jpg JPEG 2048x1080 2048x1080+0+0 8-bit DirectClass 129KB 0.020u 0:00.019
$ identify -verbose /var/www/test.jpg | grep Inter
  Interlace: JPEG

Теперь, если мы разместим следующий HTML-документ:

$ cat /var/www/test.html
<!DOCTYPE html>
<html>
<head><title>jpg test</title></head>
<body>
<p><img src="test.jpg" width="256" height="128"></p>
</body>
</html>

Я пытаюсь понять, требуется ли (согласно элементу img) пользовательский агент для загрузки всего изображения 2048x1080, в то время как область рендеринга составляет только 256x128.

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

Как правило, я хотел бы знать в приложении, таком как Google Maps, может ли пользовательский агент прервать (приостановить?) Получение отображаемых в данный момент изображений, поскольку пользователь решает увеличить еще немного, основываясь только на частичном результате распаковки прогрессивного JPEG (весь JPEG еще не на стороне пользователя).

Обновление: Оказывается, что веб пытается здесь другой подход с атрибутом loading в HTML:

<img src="example.jpg" loading="lazy" alt="example" />

Ответ 1

Только что открыли связанные предложения по адресу:

и рамки:

https://developers.google.com/speed/pagespeed/module/filter-image-optimize#JpegRecompressionQualityForSmallScreens

Ответ 2

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

Страница W3 в формате JPEG говорит следующее:

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

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

И статья Википедии в формате JPEG указывает:

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

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

Ответ 3

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

Хотя это звучит как приятная функция, для существующих веб-сайтов это будет проблематично в следующих распространенных случаях:

Галерея изображений с использованием больших прогрессивных изображений в виде эскизов + preload (т.е. Galleria делает это)
ЛЮБОЙ сайт, который полагается на события onload для изображения (в какой момент ваше полуреализованное изображение считается "загруженным", если оно может прервать/приостановить)?

Только по этим причинам было бы плохой идеей, если бы не добавить в spec как атрибут (например, устаревший атрибут lowsrc или, возможно, какой-то атрибут allowpartial, где вы явно просите об этом). Как кто-то, кто следил за обсуждениями WHATWG, я могу сказать вам, что почти наверняка будет отвергнуто прямо по той простой причине, что это добавит сложности для решения проблемы. Если бы эта функция действительно требовалась, это потребовало бы много лет назад, прежде чем широкополосная связь стала почти универсальной. В этот момент игры он по сути избыточен с умным использованием Javascript и/или миниатюр.

Ответ 4

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

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