Fotos, Tutorial

Bilder im Internet – optimale Größe und richtiges Format

Bilder im Internet

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 Sie Fehler auf Ihrer Website vermeiden, zeige ich Ihnen im folgenden Beitrag.

Wählen Sie 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, kennen Sie bestimmt von Ihrer Digitalkamera. Das wird als Standardformat für Fotos verwendet. Für Websites benötigen Sie noch ein zweites Format, 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

Die Transparenz wird vom Internetexplorer erst ab Version 7 unterstützt. Wer mit IE6 und älter surft, bekommt keine korrekte Darstellung der Bilder.

Wählen Sie 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 Sie eine Website oder ein Blog mit vielen Fotos haben. Nehmen Sie Fotos direkt aus der Kamera, ohne Sie vorher zu komprimieren, kommen Sie sehr schnell auf einige MB (Megabyte).

Der Besucher Ihrer Website wartet 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. Haben Sie schon Fotos per E-Mail verschickt? Das kann schon dauern, bis die MB’s alle durch sind.

Damit Sie den Zusammenhang besser verstehen, muss ich noch etwas ausholen. Das Wort Pixel kennen Sie bereits von Ihrer 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 Sie einen Flyer oder Anzeige mit einem Foto zum Drucken geben, werden von Ihnen Fotos mit 300 dpi verlangt. In der Druckerwelt ist die Bezeichnung dpi (dot per inch) Standard. Wenn Sie einen Laserdrucker oder Tintenstrahldrucker haben, reicht für die Fotos eine Auflösung von 150 dpi und bei Monitoren eine Auflösung von 72  oder 96 dpi.

Medium Auflösung in dpi
Druck 300
Laser- / Tintendrucker 150
Monitor 72 oder 96

Wie Sie Bilder für Web bearbeiten

Um einen unnötigen Ballast zu vermeiden, müssen wir die Fotos verkleinern. Zuerst verkleinern Sie die Bildgröße und dann komprimieren Sie die Datei.  Anzumerken ist, dass die Fotos bei der Komprimierung im jpg Format einen Qualitätsverlust haben. Wenn Sie kein Fotograf sind und Ihre Werke präsentieren möchten, ist das weiter nicht schlimm. Je nach der gewünschten Bildgröße entscheiden Sie, welche Qualität für Ihr Bild ausreichend ist. Für die Bearbeitung der Fotos benötigen Sie ein Bildbearbeitungsprogramm.

Am einfachsten und schnellsten geht das mit Photoshop. Unter Datei wählen Sie für Web und Geräte speichern. Dann geben Sie die gewünschte Bildgröße in Pixeln an und wählen zwischen jpg und png Format aus. In der Vorschau sehen Sie 4 Vorschläge unterschiedlicher Qualität. Bei jedem Bild ist die Größe in KB und die Ladezeit angegeben. Wählen Sie eines aus und speichern es unter einem anderen Namen ab. Das Originalbild bleibt Ihnen 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.

Sie arbeiten mit Gimp? Legen Sie die Größe des Bildes fest und gehen Sie auf Datei und Datei exportieren. Stellen Sie den gewünschten Dateityp, jpg oder png, ein. Bei jpg wählen Sie noch die Qualität. Speichern Sie 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 Sie ein Foto mit einem anderen Seitenverhältnis haben, als die gewünschte Größe auf der Webseite, müssen Sie das Foto entsprechend zuschneiden. Machen Sie eine Kopie des Originalbildes, wählen Sie zuschneiden und geben die gewünschte Größe in Pixeln ein. Wählen Sie einen Ausschnitt, der Ihnen am besten gefällt. Speichern Sie das Bild, wie oben beschrieben ab.

Haben Sie viele Bilder, die Sie auf einmal komprimieren müssen, wird das mit Photoshop etwas zeitaufwendig. Dafür gibt es diverse Tools, die eine Stapelverarbeitung ermöglichen.

Nicht vergessen…

Haben Sie auf Ihrer Website nur eigene Fotos? Sobald Sie Bilder Dritter verwenden, müssen Sie die Urheber- und Nutzungsrechte beachten. Informieren Sie sich, wo Sie diese Angabe machen müssen. Bei den Stock Photo Anbietern finden Sie das in den AGBs. Fotografen und andere Quellen fragen Sie am besten direkt an. Ich empfehle Ihnen, auch eigene Bilder im Impressum anzugeben. Schließlich sind das Ihre Bilderrechte. Das können Sie direkt unter dem Bild, am Ende des Beitrags oder im Impressum angeben.

 Fotos: © Kristina Marino
Kategorie: Fotos, Tutorial

von

Kristina hat mehrere Blogs mit WordPress aufgebaut und viele Erfahrungen als Blogger gesammelt. In diesem Blog gibt sie Tipps für erfolgreiches Bloggen mit WordPress. Hat dir der Beitrag gefallen? Dann verpasse keinen Artikel und abonniere den Newsletter