Wer eine responsive Webseite betreut bzw. baut, hat sicher schon öfters festgestellt, dass die Bildoptimierung immer ein leidiges Thema ist und etwas Aufmerksamkeit benötigt. Vor allem bei Bilder, die über die gesamte Breite der Webseite gehen.
Bilddarstellung auf dem Mobilgerät
Die kleinste Auflösung in der Breite für Mobilgeräte sind 320px. Das heißt, ein Bild das größer ist als dieser Wert, müsste für optimale Ergebnisse eigentlich heruntergerechnet werden, auf diese maximale Breite. Man darf jedoch nicht vergessen, dass moderne Mobilgeräte eine höhere "Pixeldensity" haben als Monitore. D.h. bei einem Handy, das eine Pixeldensity von 3 hat, ist die tatsächliche Darstellung bei 320px eigentlich 960px. Ein Bild das kleiner ist, wird dadurch unscharf dargestellt. Dies ist vor allem bei Logos bzw. Icons auffällig.
Die einfachste Lösung per CSS
Man gibt Bildern in der Webseite eine maximale Breite von 100% und setzt die Höhe auf automatisch. Dadurch kann man sicherstellen, dass das Bild bei kleineren Bildschirmbreiten korrekt im Browser skaliert wird.
img{ max-width: 100%; height: auto; }
SVG und Icon-Fonts
Der Vorteil von SVG und Icon-Fonts ist, dass keine Auflösung in Pixel verwendet wird. Es handelt sich um Vektorgrafiken, die skaliert werden können, ohne Bildqualität zu verlieren. Die Darstellung ist immer scharf. Diese Methode eignet sich natürlich nur für Icons bzw. Grafiken und kann natürlich nicht bei Fotos von realen Gegenständen verwendet werden. Ein Vorteil von Icon-Fonts ist außerdem die geringe Anzahl an Serveranfragen. Es wird nur ein Schriftsatz im "Paket" heruntergeladen und nicht einzelne Serveranfragen für jedes Bild(bzw. Icon) geschickt. Das erhöht den Seitenaufbau.
Die Integration einer Icon-Font ist technisch eher für Programmierer ausgelegt. Ein guter Startpunkt ist Icomoon. Hier werden komplette Pakete von bekannten Icon-Fonts als Schrift bereitgestellt und können direkt in die Webseite eingebaut werden.
Serverseitige Bildberechnung
Bei dieser Technik werden die Bilder vom Server "aufbereitet" und in einer optimierten Größe für den Besucher wiedergegeben. Man baut das Bild wie gewohnt in die Webseite ein und ein PHP-Script erzeugt in einem Cache verschiedene Größen des Bildes um Bandbreite für den Besucher zu sparen. Dies ist vor allem nützlich, wenn große Bilder (über die gesamte Bildschirmbreite) verwendet werden.
Ein Beispiel für ein serverseitiges Script ist PHP-Adaptive-Images.
Sie benötigen Hilfe bei der Bildoptimierung?
Gerne unterstützen wir Sie beim optimieren der Bilder auf Ihrer Webseite. Nutzen Sie einfach unser Kontaktformular, das Forum oder die Kommentarfunktion.