14 Sep Web Design Content Images
[ hide ]
Web Design and Images
When designing your layout, you will foresee space for images and your style-sheet will then define how the images should be shown.
For example, the layout could define a thumbnail of a particular size at the beginning of each post, and the style-sheet will then define whether there is a frame around the image, or a background and so on.
When adding images to content, we need to be aware that the image size (in kb) will impact on the loading time of the page. The bigger the image the slower the site. Image resizing is therefore an important issue.
We can re-size images in different ways
- The dimensions expressed in horizontal and vertical measures (480px x 320px)
The number of pixels per square inch (dpi)
The image format (gif, jpg, png, bit rate)
By re-sizing just the dimensions, we keep the image quality or the pixels per inch. If however we decrease the pixel rate (resolution) and if on top we choose a file format with limited color display such as gif, then we definitely change the quality.
Most often we use a combination of the 3 above referred to ways to re-size images.
What we strive for are images which talk. Be it a thumbnail or a big image, it must talk! The thumbnail is particularly delicate as it’s often what we see first: either the thumbnail triggers a click or makes us curious to know more, or … it does not. Just re-sizing big images to thumb size most often does not the trick as the effect of the picture may be completely gone on small size.
In such a case it may be smarter to create the thumbnail from an extract of the original image file, in original quality and size: basically you can just cut out an interesting part of the original image for the purpose of thumb nailing.
Maja the Example
Bianca Gubalke is testing her new Digital Camera. She met Maja the Bee and took a picture.
The image comes in with 300 dpi on a size of roughly 4000px x 5000px.
Editing the picture in Photoshop or GIMP is easy:
Bianca re-sizes the image to 480 wide keeping the proportion, she adds a mirror at the bottom and saves it for web display to her blog. When re-sizing she does not notice that her Photoshop re-sizes not just the dimensions but saving for Web purposes it also creates an output at 72 dpi, strips loads of pixels.
That’s why her very precise shot becomes flat, soft, lacking structure, texture and dynamic:
This very same picture as a screen-shot becomes almost unidentifiable:
Maja the Alternative
As an alternative let’s try to go to the other extreme, whereby we just grab a 480 pixels wide selection from the original big image focusing on Maja:
WOW! Now this image talks and more: can you smell and taste the honey? This image communicates 1000 times better but it is 10 times heavier than the same format above under Maja the Example.
A thumbnail would look like this:
Or how about this?
Quality has it’s price, here we pay with loading time.
But the truth is probably somewhere in between the two versions and all will depend on the purpose of the image and the target audience.
For an artist or photographer, it is however important to load top quality; the solution then is to load less images per page but to load the best quality.
Click the Image:
More about this Topic
|Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics.|
This page is wiki editable click here to edit this page.