Tobias Scheible Cyber Security & IT-Forensik Dozent
Bedienelement - Interface

Mehr Geschwindigkeit durch Bildoptimierung

Um eine hohe Geschwindigkeit der Website zu erzielen, müssen Abbildungen optimiert ausgeliefert werden. Dies wird mit der Verwendung des Bildformates WebP, der automatischen Anpassung der Bildgröße und der Auflösung am effizientesten erreicht.

Mittwoch, 21. August 2019
0 Kommentare

Um die Übertragungsgröße zu reduzieren, sollte das neue Bildformat WebP eingesetzt werden. WebP ist ein optimiertes Bildformat mit einer besseren Komprimierung als JPEG. Im Zusammenspiel mit an die Auflösung angepassten Fotos kann die Geschwindigkeit der Website einfach verbessert werden. Für diesen Blog nutzte ich die Technik, um eine möglichst kurze Ladezeit der Website zu erzielen.

WebP mit Fallback

Alle modernen Webbrowser unterstützten das WebP-Bildformat, allerdings gibt es immer noch ein paar ältere Browser, die nicht damit zurechtkommen. Daher wird häufig ein Fallback für diese Webbrowser verwendet, deshalb müssen die Abbildungen immer als WebP- und JPEG-Datei vorliegen.

WebP Dateiformat
Vergleich der Dateigrößen JPEG und WebP
WebP und JPEG Vergleich Vergleich der Dateigrößen JPEG und WebP
JavaScript

Die erste Methode wird per JavaScript realisiert. Der Vorteil ist die schlanke Schreibweise, allerdings muss dafür JavaScript aktiviert sein. Hier wird die Callback-Funktion onerror verwendet, welche ausgelöst wird, wenn das Bild nicht geladen werden kann. Dann wird src-Attribut mit der JPEG-Datei ausgetauscht.

Alt
Picture-Element

Bei der zweiten Methode wird das picture-Element verwendet. Hier werden mehrere Zeilen benötigt, dafür allerdings kein JavaScript. Die Abbildungen werden als Kinderelemente mit source eingebunden. Die URL wird mit dem Attribut srcset deklariert und das Attribut type gibt an, um welche Art von Bildformat es sich handelt. Der Webbrowser arbeitet dabei die Liste von oben nach unten ab und verwendet den ersten Eintrag mit einem kompatiblen Dateityp. In diesem Fall wird von modernen Webbrowsern das Bild als WebP geladen, alle anderen verwenden die JPEG-Datei. Da das picture-Element und die source-Elemente von älteren Webbrowsern wie dem Internet Explorer nicht unterstützt werden, sollte immer noch als Fallback ein traditioneller IMG-Tag angegeben werden. Hier kann auch das Alt-Attribut angegeben werden, welches von den Webbrowsern auch für die anderen Abbildungen verwendet wird.


  
   
  Alt

Abhängig nach Auflösung

Media Queries

Die source-Elemente können mit dem Attribut media erweitert werden, um den Webbrowser anzuweisen, unterschiedliche Bilder in Abhängigkeit der Auflösung zu laden. Dies spart Bandbreite, da bei kleineren Bildschirmen und auf mobilen Endgeräten die entsprechend kleineren Abbildungen geladen werden können.

Beispiel

Das nachfolgende Beispiel zeigt, wie zwei Varianten – eine für unter 1000 Pixel Breite und eine für über 1000 Pixel Breite – eingebunden werden. Zusätzlich erfolgt wieder die doppelte Angabe für die Formate WebP und JPEG.


  
  
  
  
  Alt

Fazit Bildoptimierung

Ich nutze die zweite Methode mit dem picture-Element hier in meinem Blog für die Header-Fotos und für die weiteren Artikel unten auf der Seite. Diese Methode sorgt für mehr Quelltext durch die zusätzlichen Angaben, allerdings kann sich damit die Geschwindigkeit der Website zielgerichtet verbessern lassen. Das WebP-Bildformat mit der besseren Komprimierung reduziert die Größe der Abbildung erheblich und die angepassten Auflösungen beschleunigen den Seitenaufruf deutlich. Vor allem mobile Endgeräte profitieren davon. Große Seiten können damit viele Ressourcen sparen und so ihre Server entlasten.

Über Tobias Scheible

Tobias Scheible

Hallo, mein Name ist Tobias Scheible. Ich bin begeisterter Informatiker und Sicherheitsforscher mit den Schwerpunkten Cyber Security und IT-Forensik. Mein Wissen teile ich gerne anhand von Fachartikeln hier in meinem Blog. Als Referent halte ich Vorträge und Workshops für Verbände und Unternehmen u. a. auch offene Veranstaltungen für den VDI und die IHK.

Kommentare

Es wurde noch kein Kommentar abgegeben.

Schreibe einen Kommentar!

Hilfe zum Kommentieren

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen oder eine Gefährdung anderer Besucher darstellen, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

Ihre E-Mailadresse wird nicht veröffentlicht. Mit dem Absenden anerkennen Sie die Datenschutzerklärung des Blogs.