Photo and Web Site
|
This "photo and web site" page aims to tell you what to care of when you design a web page
or simply when you write a page containing photos that will be published on the web.
The most important thing to keep in mind when writing a web page
is that the page should load in a reasonably short time for the page's visitor.
Even if the web surfer uses a slow connection via a standard phone modem.
|
Photo and web site considerations based on modem speed
Traditional modems are able to transfer data at a rate of 56 kbit per second.
At this speed, a file of 7 kBytes needs approximately 1 second to be transfered.
A file of 70 kBytes, 10 seconds. A file of 700 kBytes, 100 seconds or 1 minute and 40 seconds.
If the connection is a little slow,
this happens often, 2 minutes may not yet be enough.
Why did I stop at a file of 700 kBytes ?
Because 700 kBytes is approximately the file size of a photo made by a digital camera when it is saved in the Jpeg image format.
With higher resolutions coming up regularly, the file size will even grow and images of more than 1 MegaByte are found often now.
Photo and web site considerations with auction sellers
The auction ad story:
 |
Harry, an on-line auction seller writes a nice page to sell an item and wants to embellish it with 3 hot photos.
Photo and web site size considerations? What's that ?
He doesn't care about file sizes and uploads his 3 photos just as they have been taken.
3 photos of more or less 700 kBytes each.
Together 2.1 MegaBytes.
The unfortunate visitor of his auction ad uses a modem connection to the internet.
He will have to wait at least 5 loooong minutes, yes 300 seconds, before the page appears completely on his screen.
Do you think he will wait ?
Nope, he won't.
He will just click back and go elsewhere.
Web surfers are impatient, aren't you ?
Another point of view: what is your screen resolution ? How much pixels wide and tall is your screen ?
Many will say 1024 x 768 pixels.
Harry's photos are 1712 pixels wide and 1368 pixels high !
How will be the look of a web "page" containing 3 photos,
where each photo is much wider and taller than your full screen and needs nearly 4 times the surface of your screen ?
Terrible isn't it ?
|
|
If you know Harry, tell him to read this page to get in with photo and web site page size considerations. Thank you ;-)
Photo and web site sizes
 |
Photo and web site page sizes are values you must really care of when you build a page.
The added sizes of both, photo and web site page should be below 100 kBytes if ever possible.
May be 200 or 300 kBytes in exceptional cases...
|
|
-Eh! Photo AND web site page size together, so small ?
Yes, seriously, photo and web site page size together, so small !
- Aren't you joking ?
No, because the bigger the added size of photo and web site page,
the higher the probability that your visitor will click back, go elsewhere and will never read your page.
The good news, Jpeg, resize it, compress it
|
You will never need to illustrate your page with a photo of 1712 x 1368 pixels.
Resizing and compressing are the key.
For normal illustration needs of a page, a photo of 300 to 500 pixels wide is largely enough, mostly.
Well compressed but still nice to watch it, it may give a file of 20 to 60 kBytes, depending on the image's content.
Definitely forget it, to put a 700 kBytes photo into a web page!
|
|
Example:
image size = 400 x 427 pixels
|
| file format |
file size |
| bmp file |
500 kbytes |
| jpeg file, compressed |
27 kbytes |
Resize your photo and web site visitors will like it!
Resizing your images is a must when building a web page.
Unfortunately, many people think it is complicated and fear to do it.
It isn't!
You can do it with quite any photo editor.
Open the image.
Menu Image (mostly), sub-menu Resize or Resample (better)
Type in the desired width in pixels, the height will mostly be determined automaticaly to keep the proportions of the photo.
Save the resulting image under a
new name.
Done!
For more information, read the
page about resizing photos.
Compress your photo and web site visitors will like it!
|
Or do you prefer
"Crunch your photo and web site visitors will like it!" or
"Shrink your photo and web site visitors will like it!"
|
|
Compressing your images is the second must when building a web page.
The Jpeg image format has been defined especially for that.
And here too, it is easier than many believe.
1. Just do it with quite any photo editor.
With most photo editors, the file save dialog has an option button.
(the file save dialog comes up when you click the menu file and then save as)
Click on this option button to choose the compression factor.
2. For best results, smaller files of better visual quality,
I recommend to use the
Advanced Jpeg Compressor.
I use it whenever I think about "photo and web page" optimizations.
For my web sites or for the photos I publish at on-line auctions, I use it often.
Especially when I have photos with large red areas, I could not miss it.
It is also a wonderful time saver when you have a bunch of photos to compress. It does it as a batch process.
For more information and examples, read the
page about jpeg compression.
The No-No's
You can write HTML code that will display a photo on a smaller area than the image file would normally need.
The image will not be displayed at 1 to 1 scale but may be 1/2 scale or whatever.
Don't use this possibility. Except if you have very good reasons to do it.
|
To display the photo above at half size, we could write following HTML code:
<img src="/image-files/D3136176.jpg"
width="200" height="213">
and use the 400 x 427 pixel image.
The image will display on an area of 200 x 213 pixels, BUT the image of 400 x 427 pixels and 27 kB will be sent to the surfer.
If we resize the image to 200 x 213 pixels and compress it, the surfer must only wait for a 7kB file instead of a 27 kB file.
If the image will display on 200 x 213 pixels, it is not necessary to send an image of 400 x 427 pixels to the surfer.
In other words, do not let the surfer wait for more data than he needs!
|
|
I did it, what are my reasons ?
The photo is displayed 1 to 1 more above on the page.
If I put also a resized file on the page, you will wait for 27 kB + 7 kB.
This way you wait only for 27 kB. :-)
Large images like Wallpapers
To those who publish wallpapers,
I recommend to put a reasonable amount of thumbnails on your page
and to always mention the file size of each full size image where the thumbnail links to.
Resize your images to small thumbnails for the thumbnails page.
Do not use the full size images with a small width and height in the HTML code of the thumbnail page.
I have seen more than one doing so :-(
The surfer would wait forever that the page appears!
Remember:
Photo and web site page sizes are values you must really care of when you build a page.
