Image size on the web

This discussion between Rod Bird and Andrew Findlay illustrates the effect of resizing images in different ways. The main thing to learn from it is that the website will normally display your images so that one screen pixel equals one image pixel. The "image size" in inches or millimetres has no effect at all.

Discussion

Slough Town FC vs Marlow, 28 Dec 2002 (taken on Kodax TMax 3200 and then scanned on a Minolta Dimage Scan Dual Mk 1 neg scanner. (Just to see how quick a big B&W image will load).

Interesting - that image is 160kB, but many of the same resolution are a lot smaller. In this case it is the grain that is causing most of the file size.

Hmm, not sure about that. An imaging application doesn't know what the image is of. Unless you mean that Photoshop can't compress it when saving as a JPEG because of the unevenness of the greys etc - you might have a point there.

Anyway here's another go....

Another moment of tension at Slough Town FC:

All that one has proven (to me!) is that the image displayed on the web page is dependent purely on the number of pixels in the imported file - not on the dimensions in Photoshop when I saved it. I think that means that the JPEG doesn't carry the image dimensions - instead the application that opens it decides the size from the number of pixels. In the example below, the image is 394 pixels wide and on my display when displayed by maidenhead.cc it's 3.94 cm wide. In the little image at the bottom, I kept the image diomensions the same in photoshop but reduced the resolution 50 ppi - and the image is smaller as expected. My conclusion? Wiki displays 100 pixels per inch on my monitor. Well at least that's easy to understand.

And another (100 pixels per inch and 3.94 ins wide in Photoshop):

50 pixels/inch and 3.04 inches wide in photoshop:

-- RodBird

In fact the JPEG files can carry resolution/size data but the Web does not use it. Here is all the info from the smallest pic above:

   ifd 0
      0x0112  Orientation                    top - left
      0x011a  x-Resolution                   50/1
      0x011b  y-Resolution                   50/1
      0x0128  Resolution Unit                Inch
      0x0131  Software                       Adobe Photoshop 7.0
      0x0132  Date and Time                  2004:10:29 21:57:54
   ifd 1
      0x0103  Compression                    JPEG compression
      0x011a  x-Resolution                   72/1
      0x011b  y-Resolution                   72/1
      0x0128  Resolution Unit                Inch
   ifd EXIF
      0xa001  Color Space                    Uncalibrated
      0xa002  PixelXDimension                197
      0xa003  PixelYDimension                132
   ifd GPS
   ifd Interoperability
   thumbnail
      4681 bytes data

All web pages display images at one pixel per screen pixel unless the page containing the image explicitly sets a different size. Even then, the size is almost always specified in screen pixels. If you look at the Raw Text (see left menubar) of this page, you will find that each image has been given a size: the small one above says this:

img src="/pub/Main/ImagesOnWeb/stfcvmarlow28dec04.jpg" alt="stfcvmarlow28dec04.jpg"  width="197" height="132"

It would display at that size even if the width and height were not specified, but the browser can do the page layout faster if it is given the information in the page as then it does not have to download the image to find out how big it is.

You can play around with the sizes of course. Here is that same small file with different width and height specs:

• Original (197x132):

• 394*264:

• 30*20 .... OK this is getting a bit small, I admit:

-- AndrewFindlay