© saicle/Shutterstock.com
PHP Magazin
Eine Optimierung der Bildinhalte reduziert das Transfervolumen

Der Bildquetscher

Wer seine Webseite um eine Grafik erweitert, hat mit ihr vergleichsweise wenig Probleme: Der Browser entpackt die Datei und zeigt sie am vorgegebenen Platz an. Wenn sie nicht gerade auf ein exotisches Bildformat wie WebP setzen, erscheint sie auf fast allen Endgeräten gleich.

Tam Hanna


Beim Optimieren der Seitenperformance denken die wenigsten Entwickler an Bilddateien. Das ist ein großer Fehler. Je nach internem Aufbau der Page kann das Bildmaterial bis zu 50 Prozent des Transfervolumens ausmachen. Eine im Jahr 2008 durchgeführte Analyse ergab, dass prominente Webseiten aus bis zu 50 Prozent Bildern bestehen. Mittlerweile ist dieser Anteil auf über 66 Prozent gestiegen. Abbildung 1 zeigt das Verhältnis der Contentarten auf Webseiten.

Abb. 1: Der Bildanteil ist nicht zu vernachlässigen (Quelle: http://httparchive.org/interesting.php)

Bilddateien mögen sich aus CPU-Sicht nicht auswirken. Leider ist der Prozessor heute sogar im Mobilbereich nur von vergleichsweise untergeordneter Relevanz: Spätestens wenn der Nutzer im Tunnel sitzt, ist die Bandbreite der einzige für die Geschwindigkeit entscheidende Faktor.

Ein JPEG ist kein PNG

In der Anfangszeit des HTML gab es nur zwei Bildformate: Das verlustlose GIF wurde für Logos und andere „gut komprimierbare“ Bilder verwendet, während JPG für Fotos eingesetzt wurde.

Aufgrund von Patentdisputen entstand im Laufe der Zeit das Alternativformat PNG. Es bietet eine Gruppe von fortgeschrittenen Kompressionsmethoden an, die die Größe der resultierenden Datei beeinflussen. Da PNG verlustlos arbeitet, sind die angezeigten Bilder immer identisch: Der Unterschied liegt nur in der Art der für die Dekodierung notwendigen Routinen. Aus diesem Grund gibt es mittlerweile zwei Programme, die die an sie übergebenen Eingabedateien analysieren und die optimale Kompressionsmethodenkombination ermitteln. Die Anbieter der Tools liefern sich vehemente Religionskriege: pngcrush gilt als Klassiker, OptiPNG als Herausforderer.

JPG-Dateien sind einfacher. Ihre Dateigröße wird primär durch den Qualitätsparameter beeinflusst, der die Empfindlichkeit des Faktorisierungsalgorithmus beeinflusst: Je niedriger der gesetzte Wert desto „farbärmer“ die resultierenden Bilddateien.

Im Laufe der Jahre hat sich ein Bereich von 75 bis 85 als ideal erwiesen. Der Zusammenhang zwischen Qualität und Dateigröße ist nicht linear – die in Abbildung 2 gezeigte Kurve zeigt, was Sie normalerweise erwarten dürfen.

Abb. 2: Der Zusammenhang zwischen Qualität und Da­teigröße ist nicht linear (Quelle: Wikimedia Commons)

JPGs sind auch für die Sortierung und langfristige Archivierung von Fotos vorgesehen. Aus diesem Grund gibt es die Möglichkeit, die Files mit Metadaten zu versehen: Diese enthalten Informationen der Kamera, des Autors oder die Geodaten der Auf...

PHP Magazin
Eine Optimierung der Bildinhalte reduziert das Transfervolumen

Der Bildquetscher

Wer seine Webseite um eine Grafik erweitert, hat mit ihr vergleichsweise wenig Probleme: Der Browser entpackt die Datei und zeigt sie am vorgegebenen Platz an. Wenn sie nicht gerade auf ein exotisches Bildformat wie WebP setzen, erscheint sie auf fast allen Endgeräten gleich.

Tam Hanna


Beim Optimieren der Seitenperformance denken die wenigsten Entwickler an Bilddateien. Das ist ein großer Fehler. Je nach internem Aufbau der Page kann das Bildmaterial bis zu 50 Prozent des Transfervolumens ausmachen. Eine im Jahr 2008 durchgeführte Analyse ergab, dass prominente Webseiten aus bis zu 50 Prozent Bildern bestehen. Mittlerweile ist dieser Anteil auf über 66 Prozent gestiegen. Abbildung 1 zeigt das Verhältnis der Contentarten auf Webseiten.

Abb. 1: Der Bildanteil ist nicht zu vernachlässigen (Quelle: http://httparchive.org/interesting.php)

Bilddateien mögen sich aus CPU-Sicht nicht auswirken. Leider ist der Prozessor heute sogar im Mobilbereich nur von vergleichsweise untergeordneter Relevanz: Spätestens wenn der Nutzer im Tunnel sitzt, ist die Bandbreite der einzige für die Geschwindigkeit entscheidende Faktor.

Ein JPEG ist kein PNG

In der Anfangszeit des HTML gab es nur zwei Bildformate: Das verlustlose GIF wurde für Logos und andere „gut komprimierbare“ Bilder verwendet, während JPG für Fotos eingesetzt wurde.

Aufgrund von Patentdisputen entstand im Laufe der Zeit das Alternativformat PNG. Es bietet eine Gruppe von fortgeschrittenen Kompressionsmethoden an, die die Größe der resultierenden Datei beeinflussen. Da PNG verlustlos arbeitet, sind die angezeigten Bilder immer identisch: Der Unterschied liegt nur in der Art der für die Dekodierung notwendigen Routinen. Aus diesem Grund gibt es mittlerweile zwei Programme, die die an sie übergebenen Eingabedateien analysieren und die optimale Kompressionsmethodenkombination ermitteln. Die Anbieter der Tools liefern sich vehemente Religionskriege: pngcrush gilt als Klassiker, OptiPNG als Herausforderer.

JPG-Dateien sind einfacher. Ihre Dateigröße wird primär durch den Qualitätsparameter beeinflusst, der die Empfindlichkeit des Faktorisierungsalgorithmus beeinflusst: Je niedriger der gesetzte Wert desto „farbärmer“ die resultierenden Bilddateien.

Im Laufe der Jahre hat sich ein Bereich von 75 bis 85 als ideal erwiesen. Der Zusammenhang zwischen Qualität und Dateigröße ist nicht linear – die in Abbildung 2 gezeigte Kurve zeigt, was Sie normalerweise erwarten dürfen.

Abb. 2: Der Zusammenhang zwischen Qualität und Da­teigröße ist nicht linear (Quelle: Wikimedia Commons)

JPGs sind auch für die Sortierung und langfristige Archivierung von Fotos vorgesehen. Aus diesem Grund gibt es die Möglichkeit, die Files mit Metadaten zu versehen: Diese enthalten Informationen der Kamera, des Autors oder die Geodaten der Auf...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang