Andreas Hecht 24. August 2016

Bilder für Websites: Gängige Fehler und ihre Lösungen

Bilder für Websites: Gängige Fehler und ihre Lösungen

Heute, im Jahr 2016, sind alle modernen Websites reich an Medien, besonders Bilder werden zum Teil sogar großformatig genutzt. Durchschnittlich haben Bilder einen Anteil am Ladevolumen von mehr als 60 Prozent. Das sollte ein ausreichender Grund sein, sich mit der Optimierung von Fotos und Grafiken auseinanderzusetzen und die gängigsten Fehler aufzudecken.

Bilder für Websites: Gängige Fehler und ihre Lösungen

Viele Fehler im Umgang mit Bildern werden bereits von Designern und Entwicklern gemacht. Doch auch die User gehen völlig sorglos und zumeist ohne das nötige Fachwissen an die Nutzung von Fotos für das Web heran.

Doch die undurchdachte Nutzung von Bildmedien kann große Nachteile bei der Ladegeschwindigkeit einer Website nach sich ziehen. Werfen wir einen eingehenden Blick auf einen ganz normalen Blog, wird das Problem deutlich:

Bildanteile eines normalen Blogs

Zur Veranschaulichung habe ich meinen persönlichen Blog einmal gemessen. Hier zeigt sich, dass die Bildanteile an der dem Browser übermittelten Dateigröße meiner Website 76,8 Prozent ausmachen. Zudem verursachen die Grafiken 20 HTTP-Anfragen.

Die Bilder haben 76,8% Anteil an der Dateigröße und verursachen 20 Abfragen.

Die Bilder haben 76,8% Anteil an der Dateigröße und verursachen 20 Abfragen.

Grund genug, einen eingehenden Blick auf die häufigsten Fehler im Umgang mit Bildern zu werfen und die passenden Lösungen anzubieten.

1 – Grafiknutzung für Dinge, die mit CSS erledigt werden könnten

Vor CSS3 gab es durchaus eine Zeit, in der Grafiken für die verschiedenen Layout-Zwecke genutzt worden sind. Grafiken wurden damals für Hintergründe genutzt, für Schatten und für Symbole. Auch für Verläufe nutzte man früher Grafiken. All diese Anforderungen waren vor CSS3 nicht anders zu lösen. Jedoch gibt es immer noch zu viele Designer und Entwickler, die kein reines CSS nutzen, sondern Grafiken und Icons den Job machen lassen.

Die Lösung

Heute jedoch wird CSS3 von allen gängigen Browsern unterstützt. Es besteht keine Veranlassung mehr, Grafiken für irgendeinen Job zu nutzen. Wirklich alle denkbaren Anwendungsbereiche können heute mit reinem CSS und Iconfonts gelöst werden. Das bringt große Vorteile in der Ladegeschwindigkeit und hilft Bandbreite zu sparen.

2 – Es wird das falsche Grafikformat verwendet

Ein wirklich extrem häufig anzutreffender Fehler, wenn es darum geht, Bilder für das Web zu verwenden. Zusammenfassend kann man sagen, dass die drei gängigsten Grafik-Formate für das Internet JPG, PNG und GIF sind. Hier liegt die Schwierigkeit, denn es kann nicht jedes Format für jeden Einsatzbereich verwendet werden.

Korrekt betrachtet hat jedes Format seine Vor- und Nachteile. Grundsätzlich geht es darum, für einen bestimmten Einsatzbereich das richtige Format zu finden, denn nur dann ist es sichergestellt, dass die Website auch schnell lädt und die Bilder immer noch in guter Qualität angezeigt werden.

Die Lösung

Fotos sollten stets als JPG-Format vorliegen und genutzt werden. Dies dient der Ladezeit und einer ansprechenden Qualität. Das richtige Format für Logos, Diagramme, unterstützende Grafiken, Grafiken mit Schattenwurf und ähnlichem ist das PNG-Format. Hier müsste noch geprüft werden, ob immer der Einsatz eines PNG24 nötig ist oder ob ein PNG8 nicht ausreichend ist. Auch hierbei kann Dateigröße gespart werden.

GIFs haben ebenfalls immer noch ihre Berechtigung. Sie werden heute dazu verwendet, kurze Videos darzustellen. Dabei wird nicht bedacht, dass die Dateigröße ein richtiger Hammer ist. Eine Konvertierung in ein modernes MP4-Format hilft, sehr viel Dateigröße zu sparen. Wusstest du, dass ein 6,3MB GIF in MP4 konvertiert nur noch 311KB groß ist?

WebP Unterstützung aktivieren

Um richtig Bandbreite und Dateigröße zu sparen, kannst du das WebP-Format nutzen, das von Google entwickelt wurde, um das Internet zu beschleunigen. Allerdings unterstützen zur Zeit nur Chrome und Opera das Bildformat. Jedoch besteht kein Zweifel daran, dass bald andere gängige Browser folgen werden. Denn der Vorteil liegt auf der Hand, wie du an diesem Screenshot erkennen kannst:

Die Vorteile des WebP-Bildformats

In diesem Beitrag haben wir beschrieben, wie du deine Bilder als WebP ausliefern lassen kannst.

3 – Die Nutzung von nicht optimierten Bildern

Nicht optimierte Bilder sind eine der größten Geschwindigkeitsbremsen für Websites. Vielfach werden viel zu große Fotos eingesetzt, die dann vom CSS auf die passende Größe herunter gerechnet werden müssen. Wie oft habe ich schon Blogs gesehen, die in ihren Beiträgen extrem hochauflösende Bilder verwendeten. Dementsprechend sinkt die Ladezeit in nicht mehr zu akzeptierende Bereiche.

Die Lösung

Jedes Bild und jede Grafik sollte stets für das Web optimiert werden, bevor du es für deine Website nutzt. Der einfachste Weg, um ein Bild zu optimieren, ist sicherlich die »Für Web und Geräte speichern« Funktion von Adobe Photoshop. Zuvor sollte das Foto noch auf die richtige Größe zugeschnitten werden. Ein Anhaltspunkt liefern hier die Beitragsbild-Größen und die Breite des Content-Bereichs.

Wenn du WordPress nutzt, dann solltest du ein Plugin zur Optimierung von Bildern einsetzen. Das Beste ist zur Zeit Optimus HQ (19 Euro pro Jahr). Doch auch mit einem kostenlosen Plugin wie WP Smush kann man gute Ergebnisse erzielen. Beide Plugins bieten eine Funktion, mit der nachträglich alle Bilder der Mediathek optimiert werden können.

Wenn du eins dieser Plugins nutzt, dann wird jedes Bild beim Hochladen in die Mediathek automatisch optimiert werden.

4 – Die Nutzung viel zu großer Bildformate

Fast jede Website ist heute responsive. Sie passt sich jeder Bildschirmauflösung an und kann daher auf einem Smartphone ebenso gut genutzt werden, wie auf einem Desktop-Rechner. Das macht den richtigen Umgang mit Bilder nochmals schwerer.

Nun könntest du in Versuchung geraten, einfach Bilder zu verwenden, die bei der maximalen Auflösung benötigt werden. Das CSS sorgt dann für die Anpassung an kleinere Bildschirme. Dabei bleibt die Dateigröße jedoch gleich, es wird auch auf einem Smartphone ein riesiges Bild ausgeliefert, dass nur dementsprechend kleiner angezeigt wird.

Das treibt die Ladezeit auf mobilen Geräten unnötig in die Höhe.

Die Lösung

Cloudinary

Die Lösung für dieses Problem ist, unterschiedliche Miniaturen des gleichen Bildes zu erstellen und die richtige Bildgröße je nach Auflösung des Gerätes auszuliefern. WordPress geht bereits diesen Ansatz, eine wesentlich effektivere Wahl ist jedoch der Dienst Cloudinary, der gleichzeitig auch ein CDN für die Bilder bietet. Cloudinary verfügt auch über einen kostenlosen Account, der in den meisten Fällen ausreichend sein sollte. Ein WordPress-Plugin ist ebenfalls erhältlich.

5 – Keine Verwendung eines Browser-Cache für Bilder

Auch dieser Fehler ist viel gesehen, obwohl die Behebung sehr einfach ist und extrem viel ausmacht. Ohne einen Browser-Cache wird das Bildmaterial bei jedem Seitenaufruf erneut geladen. Mit Cache jedoch nur ein einziges Mal, danach werden die Bilder vom Browser aus dem Cache abgerufen, was wesentlich schneller geht.

Die Lösung

Einige Zeilen Code für die .htaccess Datei beheben das Problem sehr schnell. Alle wichtigen Dateien werden in den Cache aufgenommen.

Fazit

Im Jahr 2016 ist immer noch die wichtigste Arbeit an einer Website das Handling von Bildern und Grafiken. In diesem Bereich sitzt das größte Potenzial für eine Steigerung der Ladegeschwindigkeit einer Website. Wenn alle angesprochenen Punkte voll und ganz umgesetzt werden, ist eine erhebliche Steigerung der Performance zu erwarten. Das kann sich durchaus um mehrere Sekunden handeln, je nachdem, wie bisher mit dem Bildmaterial verfahren wurde.

via: Quelle

(dpe)

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.