Beim Surfen im Internet finde ich immer wieder Websites, in denen die Bilder nicht richtig dargestellt werden. Noch öfters passiert es, dass die Website die Bilder zu lange lädt. Wenn ich die Info unbedingt brauche, hole ich mir in der Zwischenzeit einen Kaffee. Meistens klicke ich aber weiter, weil ich genauso ungeduldig bin, wie andere Websurfer auch. Eigentlich schade.
Bilder im Internet – optimale Größe und richtiges Format sind sehr wichtig und funktionieren anders als beim Drucken. Wie du Fehler auf deiner Website vermeiden kannst, zeige ich dir im folgenden Beitrag.
Wähle das richtige Bildformat
Für moderne Websites und Blogs verwendet man heute die Formate JPG und PNG. Für einige Anwendungen wird noch das GIF gebraucht. Als Sonderformat gibt es noch das ico (Windows Icon), das wir für den Favicon benötigen.
Das Format JPG, oder auch JPEG, kennst du bestimmt von der Digitalkamera. JPG wird als Standardformat für Fotos verwendet. Für Websites wird noch ein zweites Format benötigt, das sich für Grafiken, Logos oder Transparenz eignet. Hier hat sich das Format PNG durchgesetzt. Man unterscheidet zwischen PNG8 und PNG24. Früher verwendete man das Format GIF, heute wird es durch PNG8 abgelöst. Einzige Besonderheit des GIF Formats ist, dass er animierte Grafiken kann.
| JPG | GIF | PNG8 | PNG24 | |
|---|---|---|---|---|
| Farben | 16,7 Mio | 256 | 256 | 16,7 Mio |
| Transparenz | nein | teilweise | ja | ja |
| Verlustfrei | nein | ja | ja | ja |
| Farbverläufe | radial | nein | nein | ja |
| Farbflächen | nein | nein | ja | ja |
| Animation | nein | ja | nein | nein |
| Verwendung | Fotos | Animation | Grafiken, Icons, transparente Bilder | Grafiken, Icons, transparente Bilder |
Die Transparenz wird von allen aktuellen Browsern unterstützt. Bei alten Browser-Versionen surft bekommt möglicherweise keine korrekte Darstellung der Bilder.
Wähle die richtige Bildgröße
Das Ziel ist, gute Bilder und Grafiken bei geringer Dateigröße zu erhalten. Die Größe spielt eine große Rolle beim Laden der Website, vor allem dann, wenn die Website oder das Blog viele Fotos enthält. Nimmt man Fotos direkt aus der Kamera, ohne sie vorher zu komprimieren, kommt man sehr schnell auf einige MB (Megabyte).
Die Besucher deiner Website warten nicht gerne. Wenn sich die Website zu lange aufbaut, ist er weg, bevor die Seite vollständig geladen ist. Die Ladezeit lässt sich nicht pauschal angeben, da der „Transportweg“ sehr unterschiedlich ist. Nicht jeder hat bereits ein schnelles DSL zur Verfügung. Wie bei Fotos in einer E-Mail kann es schon dauern, bis die MB’s alle geladen sind.
Damit du den Zusammenhang besser verstehst, muss ich noch etwas ausholen. Das Wort Pixel kennst du bereits von deiner Digitalkamera. Ein Pixel (px) ist die Anzahl von Bildpunkten auf der Strecke von 1 inch = 2,54 cm. Bei einem Monitor mit 100% Ansicht (Zoom) entspricht ein Bildpixel einem Monitorpixel.
Je nach Qualität kann ein Foto zwischen 1 MB und 5 MB haben. Meine Fotos, mittlerer Qualität, mit ca. 1 MB haben 2560 x 1920 Pixel. Ein typischer Monitor von 20″ hat 1680 x 1050 Pixel. Das heißt, so ein großes Foto brauchen wir gar nicht. Was ist zu tun?
Ein kleiner Ausflug in die Technik. Wenn du einen Flyer oder Anzeige mit einem Foto zum Drucken gibst, werden Fotos mit 300 dpi verlangt. In der Druckerwelt ist die Bezeichnung dpi (dot per inch) Standard. Wenn du einen Laserdrucker oder Tintenstrahldrucker hast, reicht für die Fotos eine Auflösung von 150 dpi und bei Monitoren eine Auflösung von 72dpi oder 96 dpi.
| Medium | Auflösung in dpi |
|---|---|
| Druck | 300 |
| Laser- / Tintendrucker | 150 |
| Monitor | 72 oder 96 |
Wie du Bilder für Web bearbeitest
Um einen unnötigen Ballast zu vermeiden, müssen wir die Fotos verkleinern. Zuerst verkleinerst du die Bildgröße und dann komprimierest du die Datei. Anzumerken ist, dass die Fotos bei der Komprimierung im JPG Format einen Qualitätsverlust haben. Wenn du kein Fotograf bist und deine Werke präsentieren möchtest, ist das weiter nicht schlimm. Je nach der gewünschten Bildgröße entscheidest du, welche Qualität für das Bild ausreichend ist. Für die Bearbeitung der Fotos benötigst du ein Bildbearbeitungsprogramm.
Am einfachsten und schnellsten geht das mit Photoshop. Unter Datei wählest du für Web und Geräte speichern. Dann gibst du die gewünschte Bildgröße in Pixeln an und wählst zwischen JPG und PNG Format aus. In der Vorschau siehst du 4 Vorschläge unterschiedlicher Qualität. Bei jedem Bild ist die Größe in KB und die Ladezeit angegeben. Wähle eines aus und speichere es unter einem anderen Namen ab. Das Originalbild bleibt erhalten.
Für diesen Beitrag benötige ich ein Bild mit 200 x 150 Pixeln. Für mein Foto mit der roten Tulpe habe ich JPG in mittlerer Qualität gewählt und erhalte ein Bild mit 11,1 KB. Ohne Bearbeitung hat das Bild eine Größe von 642 KB. (Die Zahlen beziehen sich auf das vorherige Theme. Das aktuelle Titelbild ist 840×630 px und 41 KB groß.)
Du arbeitest mit Gimp? Lege die Größe des Bildes mit Bild skalieren in Pixeln fest und gehe auf Datei und Datei exportieren. Stellen Sie den gewünschten Dateityp JPG oder PNG ein. Bei JPG kannst du die Qualität bestimmen. Speichere das Bild unter einem anderen Namen ab.
Noch eins: Ich sehe viele Bilder im Internet, die verzerrt sind. Wie bei einem Fernseher, bei dem das Seitenverhältnis nicht richtig eingestellt ist. Wenn du ein Foto mit einem anderen Seitenverhältnis hast als die gewünschte Größe auf der Webseite, musst du das Foto entsprechend zuschneiden. Mache immer eine Kopie des Originalbildes, wähle zuschneiden und gib die gewünschte Größe in Pixeln ein. Wähle einen Ausschnitt, der dir am besten gefällt. Speichere das Bild, wie oben beschrieben ab.
Hast du viele Bilder, die du auf einmal komprimieren musst? Das ist mit Photoshop oder Gimp, recht zeitaufwendig. Für diese Aktion gibt es diverse online-Tools, die eine Stapelverarbeitung ermöglichen.
Nicht vergessen…
Hast du auf deiner Website nur eigene Fotos? Sobald du Bilder Dritter verwendest, musst du die Urheber- und Nutzungsrechte beachten. Informiere dich, wo du diese Angabe machen musst. Bei den Stock Photo Anbietern findest du das in den AGB. Fotografen und andere Quellen sprichst du am besten direkt an. Ich empfehle dir, auch eigene Bilder zu kennzeichnen. Schließlich sind das deine eigenen Bilderrechte. Das kannst du direkt unter dem Bild am Ende des Beitrags oder im Impressum angeben.
Fotos: © Kristina Marino
