Bildoptimierung im Internet – Ein Leitfaden.

Ein gutes Foto ist ein Foto, auf das man länger als eine Sekunde schaut.

…sprach einst Henri Cartier-Bresson, der Superman der Fotografen, und er hat natürlich wieder recht. Fotos und Grafiken begegnen uns jeden Tag beim surfen auf Twitter, Facebook und anderen Websites. Leider sind die Bilder meistens schlecht für die Nutzung im Internet optimiert, die Menschheit leistet fleißig ihren Beitrag Bullshit im Netz zu produzieren.

Dieser Beitrag soll sich vor Allem an diejenigen unter euch richten die selbst Bilder im Internet publizieren. Doch was habe ich überhaupt davon mir die Arbeit zu machen und zum Beispiel ein Foto für das Internet aufzubereiten? „Knackscharf, check. Man kann heran zoomen… nice! Was faselt der da von Bildoptimierung?!“

Ein kleiner Einblick: Von Steinzeit und Megabytes.

Es wäre schön, wenn jeder von uns das gleiche Surferlebnis hätte, leider ist dem nicht so. Allgemein bekannt hinkt unsere Bundesregierung bei der Förderung des Breitbandausbaus etwas hinterher, der EU Vergleich gar ist erschreckend. Da kommen wir auch schon zum ersten Problem: Bandbreite. Während mittlerweile ein Großteil der Bevölkerung in Städten und Ausbaugebieten zwischen 16 und 100Mbit unterwegs sind, gibt es auf dem Land auch jetzt noch weiße Flecken bei der Internetanbindung. Ich erinnere mich an einen ehemaligen Arbeitskollegen der auf dem Land unglaubliche 1000kbit bekam. Seine E-Mails las er nachdem er sich einen Kaffee gekocht und leer getrunken hatte, Schuld waren sicher nicht die BUGS in der Leitung… Ich selbst kam kürzlich 2 Jahre in den Genuss einer „3000er“ Leitung – Eine Anbindung die mittlerweile an Steinzeit erinnert.

Weg von den Höhlenmenschen direkt zu Lektion 1:

Wir möchten Bandbreite sparen. So ermöglichen wir allen Nutzern ein angenehmes Surferlebnis, egal wie schnell deren DSL ist. Früher nutzte man im Internet hauptsächlich das Dateiformat GIF für Bilder. Mit einen so genannten Dither konnte man die Zahl der Farben reduzieren und gleichzeitig Farben simulieren. – Resultat. Naja – Krisselige, detailarme Fotos mit „Banding“ Effekten sind das Resultat, weswegen schon in den frühen 2000ern vermehrt zum JPG-Format gegriffen wurde und sich zum Standard etabliert hat. GIF sehen wir heute eigentlich nur noch auf „9GAG“ als Animationen.

 Rechts: GIF-Format

Wie groß sollte ein Foto sein, um gut auszusehen und die Leitung des Betrachters nicht zu belasten?

Meiner bescheidenen Meinung nach sollten Grafiken und Fotos im Netz, um die Ladezeiten zu beschleunigen, die Dateigröße von 500KB nicht überschreiten. Üblicherweise nutze ich z.B. für meine Fotografie Homepage 250-500KB als Zielgröße, je nach Detailgrad des Bildes, bzw. Farb/SW Tönung kann dieser Wert variieren. Ausnahmen sind möglich, sollten aber nicht die Regel werden. Für Freunde von Zahlen und Mathematik: 256KB scheint als 4. Teil von 1 Megabyte besonders angenehm zu sein. Die Nutzer, sowie der Betreiber einer Website profitieren dann von kurzen Ladezeiten, Bilder bauen sich nicht nach mehreren Sekunden auf, sondern sind auch auf langsamen Leitungen sofort sichtbar. Neben dem Betreiber, der durch die geringen Datenmengen seinen Webspace nicht sprengt, profitieren auch mobile Nutzer die mit dem Smartphone surfen, schließlich ist man dankbar, denn kleine Fotos laden selbst mit „EDGE“ Anbindung und belasten nicht unser wertvolles Datenvolumen!!!

Aber wie reduziere ich die Dateigröße auf die gewünschten Kilobytes?

Hierfür benötigt ihr ein Bildbearbeitungsprogramm wie Paint.NET, GIMP, oder die Königsklasse Photoshop. Grundlegend kann man erstmal sagen, dass JPEG für die meisten Inhalte im Netz, wie Fotos geeigent ist. Wenn ihr ein Bild als JPEG abspeichert, könnt ihr dabei den Grad der Komprimierung festlegen, dieser sollte jedoch nicht niedriger als 60% (JPEG HOCH) liegen sonst werden unangenehme JPEG Artefakte sichtbar. Bilder mit hohem Rauschanteil lassen sich übrigens schlechter Komprimieren!

Rechts: JPEG Artefakte bei 20% Kompression.

„… Oh mein Bild ist immer noch zu groß…“ – Tja pech, damit war zu rechnen. Um die Dateigröße noch weiter zu reduzieren, kann zusätzlich ein Bildausschnitt (Crop) gewählt, oder die Auflösung reduziert werden, denn sind wir mal ehrlich, kein Mensch braucht im Netz Fotos mit 24 oder mehr Megapixeln.

Um die Bildoptimierung etwas zu vereinfachen habe ich mir angewöhnt mit Standards in Bezug auf die Bildauflösung zu arbeiten. Meine Fotos haben an der längsten Kante immer 1920 Pixel, die Erklärung ist simpel: Viele User haben Zuhause einen FullHD (1920x1080px) Bildschirm, auch Smartphones nutzen teilweise diese Auflösung. Apple hat bei den Macbooks meist höhere Auflösungen, ebenso die neuen UltraHD Geräte. Mit der Verbesserung der allgemeinen Bandbreite und der Verbreitung hochauflösender Bildschirme werde auch ich die Auflösung irgendwann höher schrauben, allerdings glaube ich nicht, dass damit in den nächsten 5 Jahren zu rechnen ist (IMHO). An dieser Stelle ein paar Beispiele verschiedener maximaler Kantenlängen die ich verwende:

AWWW NO, TOO MANY NUMBERS!

800px, 1024px, 1280px, 1650px, 1920px (FHD), 2560px, 3860px (4K).

Standards für Bildschirme im 16:9 Format:

1280x720px (720p), 1920x1080px (1080p) 3860x2560px (4k)

Bei Verkleinerungen als Einstellung im Dialog „Bikubisch schärfer bei Verkleinerungen“ wählen, sofern verfügbar. Ebenso „Progressiv“ und „Farbprofil einbetten.

Ich versuche mich so oft wie möglichen an diesen Werten zu orientieren, da sie wie bereits erwähnt den technischen Möglichkeiten der meisten Betrachtungsgeräte entsprechen und allgemein angewandt werden können. Tatsächlich ist es aber besser ein Bild exakt für den verwendeten Zweck aufzubereiten – Das kann z.B. die Erstellung eines Thumbnails, oder eines Titelbildes auf einem WordPress Blog sein. Die verlangten Auflösungen für das entsprechende System sind oft dokumentiert, oder können schnell durch eine Google Suche gefunden werden.

Noch ein kleiner Tipp für fortgeschrittene: Die altbekannten 300 dpi #jehöherdestobesser als Bildauflösung für Web-Optimierte Bilder zu nehmen macht wenig Sinn: 1. Heißt es PPI (=Pixel per Inch) 2. PPI (Bildauflösung) ist eine Bezeichnung aus dem Printbereich und spielt NUR beim Drucken eine Rolle. Ob mein Foto im Web 72, oder 300ppi hat ist völlig egal, hier zählen nur die Pixel, Länge mal Breite. Um das ganze zu vereinheitlichen solltet ihr dennoch die irrtümlich oft verwendeten 72ppi benutzen. Ebenso wird im Web nur das Farbprofil sRGB benutzt. Keine Sorge die meisten Bilder liegen mit diesem Profil vor, es sei denn man stellt explizit etwas anderes ein. Die Export-Funktion von Photoshop bietet eine automatische Umwandlung in das Profil an.

Damit hätten wir nun Dateiformat, Dateigröße, Bildgröße, Komprimierung, und Bildauflösung geklärt. War’s das? – NEIN!. Transparenz Leute! Für einfache Grafiken, oder Bilder die eine Transparenz aufweisen sollen, steht im Web das Format PNG zur Verfügung. Davon gibt es 2 Varianten: PNG8, hat ähnliche Komprimierungsmethoden wie GIF/JPEG aus Erfahrung bei Fotos eher ungeeignet und PNG24 – Das Format schlechthin für Fotos mit maximaler Auflösung, z.B. zum Teilen einer Quelldatei. Unterstützt werden zusätzlich 256 Transparenzstufen das bedeutet, man kann beispielsweise einen schönen Schattenverlauf unter einem Logo darstellen.

Meine Empfehlung:

Foto: JPEG

Grafik/Logo: PNG8

Transparenz/Verlauf: PNG8/24

Dateiname:

Klein schreiben

keine Umlaute wie ä,ö,ü…

keine Sonderzeichen wie ß,‘,?…

keine Leerzeichen

Beispiel: peinliches-partyfoto.jpg

Mit einer guten Benennung steigert ihr außerdem noch die Wahrscheinlichkeit via Google-Suche gefunden zu werden, ebenso hilft es euch bei der Organisation eurer Daten!

Tipp für alle die gerne mit RAW Fotografieren: Zur lokalen Speicherung eurer bearbeiteten Fotos verwendet bitte das TIF Format mit LZW Komprimierung (Verlustfrei). Das spart euch jede menge Platz auf der Festplatte.

Jetzt seid ihr bestens für die Verwendung von Bildern im Netz gerüstet, also ran an den Upload-Button und macht das Internet zu einem besseren Ort mit weniger Traffic.

IMHO = In My Honest Opinion