Bilder fürs Web optimieren -Empfehlungen und Tipps

In diesem Bericht möchte ich mich dem Thema Optimierung der Bilder fürs Web widmen. Zur klaren Abgrenzung ist es erforderlich zwischen zwei Bildern, welche zwar die gleiche Szene darstellen, zu unterscheiden. Ich verwende deshalb zwei unterschiedliche Begriffe, um Verwechslungen zu vermeiden:

Original-Bilder sind Bilder direkt aus der „Kamera“
und
Web-Bilder sind Bilder welche für das Web optimiert sind

Bilder sind ein wesentlicher Bestandteil der Webseiten. Da die Ladezeit ein wesentlicher Rankingfaktor für die Suchmaschinen ist, gilt es auf optimierte Bilder zu achten. Auch auf Webseiten gilt häufig der alte Spruch: Ein Bild sagt mehr als tausend Worte, deshalb werden sie gerade auf Webseiten reichlich eingesetzt, verursachen aber die größten Datenmengen. Neben einer guten Motivauswahl, kommt es daher darauf an das richtige Bildformat zu wählen und die Bilder zu komprimieren. Je kleiner die Bilddateien sind, desto kleiner ist die Datenmenge, umso schneller lädt die Seite. Das Nutzungserlebnis deiner Besucher wird gesteigert und das Google Ranking belohnt die Mühe.

Original-Bilder

Original-Bilder werden je nach Kameratyp und Einstellung in unterschiedlichen Formaten erstellt. Bei hochwertigen Kameras geht der Trend zum Format 3:2, dies entspricht den Sensorformaten und dem alten Negativ Filmformat 24 x 36. Kleinere Kompaktkameras mit kleinem Sensor tendieren mehr zum Format 4:3. Mobile (Handys, Smartphone) verwenden meist das Format 16:9. Für alle gilt aber, dass eine hohe Auflösung heutzutage selbstverständlich ist. 6000 x 4000 px (bei 3:2) ist heute eine normale Größe.

Es wäre nun leichtes das Original-Bild der Kamera im Web zu verwenden.  Die damit verbundene Dateigröße von über 10 MB würde jedoch zu langen Ladezeiten beim Aufruf der Webseite führen. Von Google werden solche großen Bilddateien abgestraft, also ein Grund sich Gedanken zu machen. Für das Web werden Bilder mit kleiner Datenmenge benötigt damit die Ladezeit, d.h. die Zeit bis deine Webseite auf dem Bildschirm angezeigt wird so klein wie möglich ist

Empfehlung: Bildgröße für Web-Bilder max 1600 x 900 px

Meine Empfehlung basiert darauf, dass ich meine Bilder überwiegend im Format 16:9 oder 3:2 erstelle. Zusätzlich gilt es eine Größe zu verwenden welche auf allen Geräten Handy, Tablet und Desktop gut dargestellt werden kann. Die Größe 1600 x 900 px ist dazu meine Empfehlung. Dies basiert auf dem Format des Displays. Die Standard-Auflösung für HD-Ready beträgt 1280 x 720 Pixel, bei Full HD beträgt die Auflösung 1920 x 1080 Pixel, dies entspricht dem Format 16:9.
Da auch Smartphones und Tablets heute mindestens 1280 x 720 px beherrschen und hochwertige Smartphones meist Full HD 1.920 x 1.080 px unterstützen müssen wir uns an Full HD orientieren.

Meine Empfehlung 1600 x 900 entspricht zwar nicht dem Wert von Full HD, stellt aber einen guten Kompromiss dar. Den Unterschied zu dem vollen Wert 1920×1080  wird keiner erkennen, wir erhalten aber eine kleinere Datenmenge. Tante Google wird es danken.

Vorteile der Web-Bilder

• Die Ladegeschwindigkeit deiner Seite wird verbessern.
• Kombiniert mit einem guten SEO Plugin, ich empfehle dazu Yoast SEO, verbessert dies die SEO. Die Webseite wird in den Suchmaschinenergebnissen einen höheren Rang einnehmen.
• Google wird die Bilder wahrscheinlich schneller für die Google-Bildsuche durchsuchen und indizieren.
• Die Erstellung von Backups wird schneller ablaufen.
  Kleinere Bilddateigrößen verbrauchen weniger Bandbreite. Netzwerke und Browser werden dies zu schätzen wissen.
  Benötigt weniger Speicherplatz auf deinem Server (abhängig davon, wie viele Miniaturansichten Du optimierst).
• Die Speicherkapazität des Servers wird nicht unnötig belastet
• Beim Upload, speziell von mehreren Bildern gleichzeitig entstehen keine zu große Datenmengen, welche den Upload blockieren können
•  

Ich reduziere deshalb bereits vor dem Upload die Bildgröße und die JPD Kompression des Web-Bildes auf maximal 1600 x 900 px mit einem Kompressionsfaktor von 70 %. Selbst einfachste Fotosoftware stellt dazu Funktionen zur Verfügung. Ich verwende dazu die Fotosoftware von ACDSee, es geht aber auch mit Freeware.

Beispiel-Bild mit und ohne JPG Kompression

Das Original-Bild hatte 5,5 MB
Bitte teste selber wie das Bild auf dem Bildschirm wirkt! 😉

Bildkompression zur optimalen Erstellung eines Web-Bild

Die Bildkompression beruht darauf, die ursprünglichen Daten entweder in eine vollständig rekonstruierbare Form zu überführen, die weniger Speicherplatz benötigt oder Daten zu entfernen, deren Verlust kaum wahrnehmbar ist.

Um die Datenmenge der Bilder optimal zu reduzieren, setzte ich deshalb zusätzlich ein Plugin zur Bildkompression ein. Da solche Plugins meist auch eine Option zur Reduzierung der Bildgröße während des Upload-Vorgangs besitzen, erspart man sich den Arbeitsschritt der Größenreduktion am PC. Wer solche Plugins verwendet sollte bei seiner Plugin Auswahl auf dieses Feature achten. Hier zwei empfehlenswerte Plugins:

• Compress JPEG & PNG images -Optimiere deine JPEG- und PNG-Dateien automatisch mit TinyPNG.
• EWWW Image Optimizer -Reduziert Dateigrößen für Bilder innerhalb WordPress

Galeriedarstellung von zwei Bildern im Format 3:2

Bilder in diesem Format werden nach der Größenänderung in der Bildgröße 1350×900 px angezeigt. Die Höhe ist der Begrenzungswert.

Meine Beschreibung habe ich auf das am häufigsten, im Web, verwendete Dateiformat beschränkt. JPG manchmal auch JPEG geschrieben, wurde speziell zum Speichern von Fotografien entwickelt. Das JPG-Format eignet sich vor allem für Bilder mit fotorealistischen Motiven, die in guter Qualität, aber recht geringem Datenvolumen abgespeichert werden sollen.

Weitere Dateiformate für Web-Bilder sind PNG, GIF und SVG

• Das PNG-Format ist eine Alternative zum JPG. Die Komprimierung des PNGs ist jedoch nicht so verlustreich wie beim JPG, weshalb die Datenmenge größer ist.
• Das GIF-Format kann Bilder nur mit maximal 256 Farben darstellen. Es kommt daher vor allem bei Motiven wie z.B. Logos, Icons, Illustrationen oder Navigationsbilder zum Einsatz.
• Das SVG-Format ist ein Vektorformat und kommt zurzeit nur sehr selten zum Einsatz.