Joined
·
15,058 Posts
Image 'real estate' size and the file size and how they relate to screen definition and download times.
Image Real Estate size: The physical measurements of its height and width, usually expressed in pixels.
Screen Definition: that is expressed in the maximum amount to dots/pixels that the screen has NOT the size in inches. In this blog, I refer to dot matrix rather than CRT monitors.
There is a very real trend for monitors to be able to display HDTV specifications, ideally 1920 × 1080. That said, web designers are still advised to design websites that will fit neatly inside a monitor with a maximum resolution of 1024 pixels wide because of many surfers still are limited to that size.
Why keep image sizes small?
There are two prime reasons for doing so.
1) If an image is primarily intended for viewing on a monitor over the Internet or by email, then the file size in kilobytes becomes an important factor because of download times. We must remember that there is still a very significant amount of dial-up accounts - not everyone has the luxury or benefit of wideband connections.
2) Most people have an aversion for horizontal scrolling. Any image larger than 1024 px wide increases the chances that folk will have to horizontally scroll.
Often an image can be reduced in real estate size and still convey the message in that image. For example, the following 1200x800 still conveys the essence of the photo when reduced by half to 600x400px or even 300x200px.
![]()
photo 1: 1200x800 pixels. Normally an image over 1024 px should not be posted here.
This one is at 1200 for size comparison.
Please click on the bar above the image to see it at full size
![]()
Photo 2: 600x400 pixels only half the dimensions but 4 times smaller in file size.
![]()
Photo 3: 300x200 pixels. It still conveys the message in the photo.
It is a quarter of Photo 1 but is 16 times smaller in file size and will download 16 times quicker!
Even though they were reduced by 50% & 25% respectively, you may not realise the dramatic change in the file size. A 50% reduction in image size reduces the file size by 4 times and a reduction of 25% reduces the file size a whopping 16 times!
Translating this in to download times, let's assume an image takes 16 seconds to download, just by halving its image size will allow it to download in 4 seconds. Reducing it by a quarter, it will only take 1 second to download.
The following images graphically demonstrate the 'square law' involved.
![]()
Fig 1: a single 1200x800 has sixteen 300x200 blocks or four 600x400 blocks
![]()
Fig 2: 600x400 has 4 300x200 blocks
![]()
Aspect Ratio: The ratio between the height and the width of the image. For example, the standard of 16:9 aspect ratio means 16 parts wide to 9 parts high. That could be 16 x 9 pixels, 160 x 90 pixels or 1600 x 900 pixels (or inches, mm, cm, feet, yards or metres.) They all maintain the 16:9 aspect ratio.
With all the above noted, I believe that here in the Photographer's Corner 800 to 1024 is fine. Personally, I use 600 pixels as a maximum size in emails. preferabbly 450 px wide.
Some common aspect rations used for imaging, based on 1024 pixels as the maximum width.
16:9 aspect ratio... 1024x576
3:2 aspect ratio... 1024x682
8:5 aspect ratio... 1024x640
The Golden ratio... 1024x633
EDIT: Further to a post in another thread, the following is applicable here too:
GOLDEN RATIO:
The golden ratio of a rectangle is A/B=1.618
EG 1:1.618 Or if you really want to be absolute 1:1.61803399
As applied to more common photo/graphic sizes applicable to Internet, I have calculated the following list that complies to the Golden (aspect) Ratio:
In Pixels, the first column gives a common dimension. The second column gives the corresponding dimension to create an oblong to the Golden (aspect) Ratio. (To the nearest pixel)
320x198
500x309
640x396
800x494
1024x633
1280x791
1920x1187
2048x1266
Googling "Golden Ratio" will bring up a mind blowing dissertations on GR
Image Real Estate size: The physical measurements of its height and width, usually expressed in pixels.
Screen Definition: that is expressed in the maximum amount to dots/pixels that the screen has NOT the size in inches. In this blog, I refer to dot matrix rather than CRT monitors.
There is a very real trend for monitors to be able to display HDTV specifications, ideally 1920 × 1080. That said, web designers are still advised to design websites that will fit neatly inside a monitor with a maximum resolution of 1024 pixels wide because of many surfers still are limited to that size.
Why keep image sizes small?
There are two prime reasons for doing so.
1) If an image is primarily intended for viewing on a monitor over the Internet or by email, then the file size in kilobytes becomes an important factor because of download times. We must remember that there is still a very significant amount of dial-up accounts - not everyone has the luxury or benefit of wideband connections.
2) Most people have an aversion for horizontal scrolling. Any image larger than 1024 px wide increases the chances that folk will have to horizontally scroll.
Often an image can be reduced in real estate size and still convey the message in that image. For example, the following 1200x800 still conveys the essence of the photo when reduced by half to 600x400px or even 300x200px.
photo 1: 1200x800 pixels. Normally an image over 1024 px should not be posted here.
This one is at 1200 for size comparison.
Please click on the bar above the image to see it at full size
Photo 2: 600x400 pixels only half the dimensions but 4 times smaller in file size.
Photo 3: 300x200 pixels. It still conveys the message in the photo.
It is a quarter of Photo 1 but is 16 times smaller in file size and will download 16 times quicker!
Even though they were reduced by 50% & 25% respectively, you may not realise the dramatic change in the file size. A 50% reduction in image size reduces the file size by 4 times and a reduction of 25% reduces the file size a whopping 16 times!
Translating this in to download times, let's assume an image takes 16 seconds to download, just by halving its image size will allow it to download in 4 seconds. Reducing it by a quarter, it will only take 1 second to download.
The following images graphically demonstrate the 'square law' involved.
Fig 1: a single 1200x800 has sixteen 300x200 blocks or four 600x400 blocks
Fig 2: 600x400 has 4 300x200 blocks
Aspect Ratio: The ratio between the height and the width of the image. For example, the standard of 16:9 aspect ratio means 16 parts wide to 9 parts high. That could be 16 x 9 pixels, 160 x 90 pixels or 1600 x 900 pixels (or inches, mm, cm, feet, yards or metres.) They all maintain the 16:9 aspect ratio.
With all the above noted, I believe that here in the Photographer's Corner 800 to 1024 is fine. Personally, I use 600 pixels as a maximum size in emails. preferabbly 450 px wide.
Some common aspect rations used for imaging, based on 1024 pixels as the maximum width.
16:9 aspect ratio... 1024x576
3:2 aspect ratio... 1024x682
8:5 aspect ratio... 1024x640
The Golden ratio... 1024x633
EDIT: Further to a post in another thread, the following is applicable here too:
GOLDEN RATIO:
The golden ratio of a rectangle is A/B=1.618
EG 1:1.618 Or if you really want to be absolute 1:1.61803399
As applied to more common photo/graphic sizes applicable to Internet, I have calculated the following list that complies to the Golden (aspect) Ratio:
In Pixels, the first column gives a common dimension. The second column gives the corresponding dimension to create an oblong to the Golden (aspect) Ratio. (To the nearest pixel)
320x198
500x309
640x396
800x494
1024x633
1280x791
1920x1187
2048x1266
Googling "Golden Ratio" will bring up a mind blowing dissertations on GR
