Image processing for the Internet

Almost everyone has a digital camera or a mobile phone that has the feature.

So you can make wonderful pictures and display them on the internet - eg on our server bergedorf.de. From time to time, you have to notice that the pictures taken are either so dull or fuzzy and noticeably slow down the page.
Not that I want to ask someone something, you can determine everything better. For all others I have written the small course "Image processing for the Internet". Sit back and let yourself be entertained somewhat.

The problem:
Small modern digital cameras or mobile phones generate images in the size of several megabytes. You are now the proud owner of a 2-5 megapixel camera. This is firstonce not bad, because the more megapixels the better the picture - actually. In fact, if it comes to the quality of the photographic work, the quality also depends on the lens used, the signal to noise ratio, the maximum contrast ratio and the like.

So: More megapixels does not automatically mean better quality - or the other way around:
Even small images can be displayed perfectly.

The secret lies in the subsequent image processing such as GIMP.
Let us look once this snapshot from Barcelona to:

The image looks not very appealing. It is "flat" and a little over-exposed. The contrast range - the difference between the darkest and lightest portions - is low and it is something added to the light. In addition, the poster interfere in the foreground. It brings this impressive 2.25 Mb on the scale. For slower internet connections alone the loading of the image takes several seconds. If you have it, a whole picture gallery, can quickly take several minutes.

 

This is better:
First we look at the variation of tone. As we see a gap.
This tells us that the image is not at all the possible color space uses: Therefore, it seems dull.

After correction of the color values, it is still a bit too pale because it was photographed against the sun.
So we move the gamma a little. Now there is even more color in the image - voila.

 

 

 

 

Second, we look at the size. We set the zoom factor to 100% to see the image at the size as it is displayed on the screen. Now we see only a small section.
The picture is so much bigger than it is represented in reality. Our web designer has loaded the image in its original size on the server and then decreases the display again. That the image is so big but hits quite well - so we can get a sample without taking the poster in the foreground. We then bring the image to a size that is suitable for the Internet.
 

A size of 600x400 pixels takes about one half of the screen.

Beautiful facade in Barcelona. Taken on holiday in Spain in 2010This image has a size of 130x173 pixels and 18Kb. It has therefore only 0.0008% of the size of our original image and loads it 125000 times faster.
To be prepared for later use, where you could take the picture slightly bigger size of 400x300 pixels should be sufficient.
We scale the image in 2-3 steps to the desired size. Between each step, we sharpen the image a little by little.
This we now invite high with the final scaling is the issue size to the server.

Wouldn´t it be to consider to give the image a meaningful name on this occasion?
Pictures with names such as "IMG_2345600_1.jpg", "IMG_2345600_2.jpg", etc. can be used for image management programs that handles large numbers of images. If you do not work with such programs,t you will very soon lose track.

So it makes sense to use the name, enabling you to recognize the images of "natural". Attention should be paid to certain conventions.
A name like "Beautiful facade in Barcelona.jpg" is not among them, since it contains problematic characters. In your native Mac or Windows PC that may not stand out to you. But at least if you transfer the images to a different system - and Internet servers usually run on Unix or Linux - problems will occure.

The name of the image
"Beautiful facade in Barcelona.jpg" will become unexpectedly
"Beautiful% 20facade% 20in% 20Barcelona.jpg"

We really would like a name
"beautiful-facade-in-barcelona.jpg"
Lowercase letters without accents and replace spaces with minus "-".

To the name of an image there belongs a title, a description and alternate text as well.
This allows you to illustrate the content of the image to other closer. Here, spaces and special characters can occur.

  • The title appears when you "drive" your mouse over the image.
  • A description is read by some browsers.
  • The alternate text is read by all other browser and also used by screen readers and search engines.

In our example image, the three entries could equally be: "Beautiful facade in Barcelona - Taken on holiday in Spain in 2010." Try it once more with the images above.

If you stick to these conventions

- Right image size, good contrast ratio, real name, title, description and alternate text -

you will be rewarded with good presentation and good results in the search engines.