Web Design Content Images

September 14, 2009

Content Images

Loading images and namely photos with your content is a good idea, provided the quality is right. I am talking not only about the Image Quality, but also about the Web Design Quality.

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.

Images talk

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

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:

Maja 1

This very same picture as a screen-shot becomes almost unidentifiable:

Maja 1 Thumbnail

The only advantage I can see in the above images is that they are small and load fast; however we sacrifice the communication value.

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:

Maja Original Macro

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:

Maja Alternative Thumbnail 1

Or how about this?

Maja Alternative Thumbnail 2

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: