Bilder fürs Internet vorbereiten

Bild des Benutzers Miklós Geyer

Weil wir es häufig erleben, dass auf Websiten falsche Bildgrößen verwendet werden, geht es heute noch einmal grundsätzlich darum, wie Sie Bilder richtig für eine Nutzung auf Websiten vorbereiten müssen.

Achten Sie bitte auf zwei verschiedene Einstellungen: die Bildgröße und die Auflösung.

Bildgröße: für die Nutzung im Web wird die Einheit Pixel verwendet. Ein Bild auf einer Website hat eine Breite von rund 100 bis 500 Pixel. Dies ist natürlich abhängig von der Verwendung und muss zum Layout bzw. Design der Website passen. Nur in Ausnahmefällen wird ein Bild breiter oder höher als 1000 Pixel sein.

Auflösung: Die Auflösung eines Bildes auf einer Website sollte 72 dpi sein. "dpi" ist die Abkürzung für "dots per inch", Punkte pro Zoll (1 Zoll = 25,4 mm). Dies bedeutet, dass pro 25,4 mm 72 einzelne Bildpunkte angezeigt werden. Ein Bild mit 200 Pixeln Breite und 72 dpi Auflösung  wird auf einem Monitor mit 72 Pixeln pro Zoll also 7 cm breit angezeigt werden (200 / 72 * 2,54).

In vielen Bildbearbeitungsprogrammen können Sie diese Einstellungen für ihre Bilder ändern. Hier ein Beispiel aus Photoshop:
Bildgrößen-Dialog Photoshop

Wenn Sie also Bilder auf ihrer Website verwenden möchten - z.B. die Aufnahmen von ihrer 12 Megapixel-Digitalkamera - , wandeln Sie diese bitte vorher um. Sonst kann es sein, dass ihre Website sehr langsam wird, weil viele unnötige Datenmengen übertragen werden müssen. Eine einfache und kostenlose Möglichkeit zur Umwandlung bietet die Website http://pixlr.com/editor , die wir auch schon in anderen Netzmarginalien vorgestellt haben. Pixlr ändert die Auflösung automatisch auf 72dpi, so dass Sie nur noch die Bildgröße anpassen müssen.

Hier finden Sie weitere Beiträge zur Bildbearbeitung: http://www.netzmarginalien.de/taxonomy/term/32

Kommentare

4

72 dpi ist doch wohl schon leicht veraltet oder? Fehlt nur noch, dass Sie das Dateiformat *.gif empfehlen ;-)

First of all I would like to appreciate the effort that you have put in to share tips and ideas about preparing images for internet. I agree to the fact that putting false images may reduce the attractiveness of the site. The screen shots and tips on preparing images for internet seemed impressive.

Also im Endeffekt behaupten Sie, dass wenn ich auf einer 1002px breiten Webseite 2 Bilder nebeneinander habe, beide 200px Breit, das eine aber 72dpi hat und das andere 124dpi, das das erste Bild 7cm und das zweite nur 3,5cm auf meiner Seite einnimmt?

Ich glaube nicht.

1. Hier steht das ein Bild mit 200px und 72 dpi auf dem MONITOR 7cm einnimmt, nicht auf der Website!

und 2. wenn das Bild 200px und 124 dpi hat dann sind es nicht 3,5cm sondern 14cm.

Ganz einfache Geschichte ;) was hier steht ist richtig....