Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML and displaying of <img/> element

I am trying to understand whether or not the web allow for viewing of progressive JPEG or not.

Assume we have a server where (see progressive jpegs):

$ 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

now if we place the following HTML document:

$ 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>

I am trying to understand whether or not (according to img element), a user agent is required to download the whole 2048x1080 image, while rendering region is only 256x128.

Or on the contrary a User Agent, is allowed to take into account the rendering region: 256x128, and therefore deduce it can only process a portion of the progressive JPEG. Knowing that there is no point in having the full resolution since it will not add any details to the image (well technically a quality layer should impact even at low resolution, this is just for simplification).

Typically, I'd like to know within an application such as google maps, if a User Agent can abort (suspend?) retrieval of currently displayed images, since User decide to zoom in some more based only on partial result from decompressing a progressive JPEG (the whole JPEG is not yet on User side).


Update: It turns out that web is trying a different approach here with the loading attribute in HTML:

<img src="example.jpg" loading="lazy" alt="example" />
like image 250
malat Avatar asked Mar 28 '13 09:03

malat


1 Answers

The idea of using a progressive JPEG in a website has less to do with saving bandwidth and more to do with showing something to the end user earlier. The browser still downloads the full image no matter what, but progressive JPEGs allow the user to see something happening earlier.

The W3 page on JPEG says this:

Progressive JPEG is a means of reordering the information so that, after only a small part has been downloaded, a hazy view of the entire image is presented rather than a crisp view of just a small part.

Because the inclusion of an IMG tag generally means that you want the browser to download that asset, it's not going to abort it partway through simply because it's determined it's downloaded "enough". The browser also doesn't know what you intend to do with the image later - maybe you'll zoom it later on, or maybe it'll need to show it later at a different size. Partially downloading once means that the browser might have to download again later.

And the Wikipedia article on JPEG points out:

However, progressive JPEGs are not as widely supported,[citation needed] and even some software which does support them (such as versions of Internet Explorer before Windows 7)[12] only displays the image after it has been completely downloaded.

So even if some browsers did abort connections for these after having downloaded "enough", not enough browsers provide support for me to consider even using them in the first place.

like image 170
Robert Avatar answered Sep 22 '22 05:09

Robert