Der Bildquetscher
Kommentare

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.

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 Dateigröß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 Aufnahme. Fortgeschrittene Encoder fügen unter Umständen sogar ganze Thumbnails ins Bild ein. Das Entfernen der Metadaten reduziert das Datentransfervolumen – mit jpgtran lässt sich dieser Prozess automatisieren.

Zu guter Letzt kann es oft sinnvoll sein, JPG-Dateien im Progressive-Format auszuliefern. Neben dem „dynamischen Aufbauen“ während des Ladens gibt es hier die Möglichkeit, kleine Verbesserungen in Sachen Transfervolumen zu erhalten. Eine von Stoyan Stefanov durchgeführte Analyse von 10 000 Dateien ergab, dass das Umstellen auf Progressive eine Einsparung von rund 3 Prozent bringt. Einige Files wurden um bis zu 10 Prozent kleiner, leider vergrößerten sich einige Files. Weitere Informationen zu den diversen Bildformaten finden Sie unter anderem in einem Vortrag des Chief Product Architect von Akamai. Dieser steht hier zum Download bereit. Hier finden Sie eine detaillierte Zusammenfassung über die Möglichkeiten zur Kompression von PNGs.

Reduktion der Farbmenge

GIFs enthalten von Haus aus nur 256 Farben. PNG kennt sowohl „vollfarbige“ als auch palettierte Bilder: Das Reduzieren der Farbtiefe erlaubt das Anwenden eines effizienteren Verpackungsalgorithmus.

Sowohl PNG als auch GIF sind für das Anzeigen von Bildern mit vergleichsweise wenigen Farben optimiert: Fotos und andere komplexe Abbildungen sind als JPG sowieso besser aufgehoben. Aus diesem Grund spricht nichts dagegen, alle .png-Dateien probeweise auf 8-Bit-Farbtiefe zu beschränken: Wenn sich die Nutzer nicht beschweren, so ist alles in bester Ordnung.

Aufmacherbild: Man in Picture von Shutterstock / Urheberrecht: Djomas

[ header = Seite 2: Hauseigene Formate ]

Hauseigene Formate

Die Idee des „hauseigenen Formats“ sollte nicht vernachlässigt werden. Das Konzept stammt aus der Demoscene: Um immer mehr Inhalte in die nur 4 oder 64 KB großen Dateien packen zu können, mussten neue Kompressionsformate gefunden werden.

Im Laufe der Zeit kamen die Scener auf die Idee, dass sie die vom Künstler erbrachte Arbeit doch auch am Client erledigen könnten. Je nach Aufbau des proprietären Protokolls entstanden stellenweise signifikante Ersparnisse – ein Blick auf pouet.net genügt, um sich von der Effizienz zu überzeugen.

Beim Realisieren von klassischen Client-Server-Applikationen ist es unter Umständen reizvoll, Bilddaten im Rohformat zu übertragen und erst am Client zusammenzubauen. Ein gutes Beispiel dafür ist das in Abbildung 3 gezeigte Bild, das drei Funktionskurven anzeigt.

Abb. 3: TouchCalc für Windows Phone zeigt am Server gerenderte Diagramme an

Anstatt die Bilder als PNG oder als GIF zu übertragen, wurde die Zeichenaufgabe zwischen Client und Server aufgeteilt. Der Server sendet dem Client eine Liste von Koordinaten, die daraufhin am Telefon zum fertigen Diagramm zusammengestellt werden. Bei effizientem Protokollaufbau ist es durch derartige Optimierungen möglich, ein PNG und Co. überlegenes Ergebnis zu erreichen.

Neben dem Bandbreitenvorteil ergibt sich auch eine Erleichterung der Serverlast. Das performanceintensive Rendern des Diagramms erfolgt hier am Client, wodurch der Prozessor des Hosts entlastet wird.

Sprites bündeln

HTTP ist ein zustandsloses Protokoll. Das bedeutet, dass das Herunterladen eines Bilds eine Gruppe von Interaktionen zwischen Server und Client auslöst: Je mehr Bilder die Webseite enthält, desto mehr HTTP-Requests fallen an. Im Mobilbereich gilt, dass Latenzen von 400 Millisekunden bei 2,5-G-Verbindungen durchaus „im Rahmen“ liegen – das Herunterladen von vielen kleinen Symbolen nimmt Zeit in Anspruch.

Spieleprogrammierer haben ein ähnliches Problem: Das Austauschen der gerade aktiven Textur in der Grafikkarte ist sehr langsam. Ein SpriteSheet ist eine gigantische Bilddatei, die die von mehreren Elementen benötigten „kleinen“ Texturen in ein File zusammenfasst. Zur Laufzeit wandert dieses Bild in den Grafikspeicher, die GPU wählt die für das jeweilige Element relevanten Teile aus (Abb. 4).

Abb. 4: Dieses SpriteSheet enthält eine Gruppe von Symbolen und ein Logo (Quelle: Yahoo)

Die background-position-Eigenschaft erlaubt Ihnen, ein ähnliches Verfahren in ihren Webseiten einzusetzen. Mit diesem Attribut versehene Bilder zeigen nur einen Teil des ihnen übergebenen Quellbilds an. Der Browser muss dann nur eine einzige Bilddatei herunterladen, die sich mit einer einzigen Gruppe von HTTP-Requests beschaffen lässt. Im Style Sheet sieht das so aus:

.ein-icon {
  background-image: url(spritesheet.png);
  background-position: -101px -101px;
  width: 10px;
  height: 10px;
}

CSS-Sprites sind mittlerweile etabliert. Hier finden Sie einen Generator, der die von Ihnen hochgeladenen Bilder in eine gigantische Textur packt. Neben dem PNG bekommen Sie die fertigen background-position-Werte zurück – das manuelle Ermitteln der Koordinaten entfällt.

Lagere mich …

Wenn Ihre Webseite unter zu hoher Prozessorauslastung des Servers leidet, so empfiehlt sich die Auslagerung der Bilder auf eine externe Instanz. Das muss nicht unbedingt ein kommerzielles Content Delivery Network sein – es genügt oft, einen älteren Server mit einer extrem abgespeckten (kein Perl/PHP/etc.) Instanz eines HTTP-Diensts als Bildquelle einzusetzen. Leider ist die Auslagerung der Bilder mit einem gravierenden Nachteil behaftet: Wenn Ihre Bilder nicht mehr in der Domain Ihres Unternehmens liegen, so werden sie von diversen Suchmaschinen nicht zu Ihrer Domain gerechnet. Das führt zu einer Reduktion des Page Ranks.

…auf Subdomains aus

Um nicht als DDOS-Angriff geblockt zu werden, bauen Browser normalerweise nur eine gewisse Anzahl von parallelen Verbindungen zum Server auf. Wenn Ihre Webseite viele kleine Bilder enthält, ist diese Vorgehensweise suboptimal. Eine als Domain Sharding bezeichnete Vorgehensweise teilt Ihre Domain in eine Gruppe von Unterdomänen auf. Das bedeutet, dass ein Teil der Bilder von dem URL 1.tamoggemon.com kommen – der zweite Teil wird von 2.tamoggemon.com angeliefert. Der Browser empfindet diese beiden Domänen als voneinander unabhängig, und baut deshalb zwei Verbindungsgruppen auf. Die dadurch erreichbaren Geschwindigkeitssteigerungen sind beeindruckend: Manche Webseiten nutzen bis zu zehn (!) Shards.

Cache mich!

Zu guter Letzt noch eine kleine Bauernregel: Das Nichtsenden einer Bilddatei ist immer schneller als das Senden. Das Setzen des Cacheheaders erlaubt dem Browser (und/oder den im Netzwerk befindlichen Proxies) das Vorhalten von in Ihrer Webseite enthaltenen Bildern – bei der nächsten Anfrage müssen die Daten nicht mehr von Ihrem Server übertragen werden.

Fazit

Die alljährlich stattfindende Velocity-Konferenz gilt als Treffen der Avantgarde in Sachen Web. Es gibt kaum eine Ausgabe des Kongresses, auf der nicht zumindest ein Vortrag zum Thema Bildoptimierung auf der Agenda stand. Wer die Performance seiner Webseite optimieren möchte, muss sich über kurz oder lang mit Bilddateien befassen. Die hier vorgestellten Methoden ermöglichen Ihnen eine Reduktion des Datenvolumens um mehr als 20 Prozent. Im Laufe der nächsten Jahre dürfte das von Google propagierte WebP-Format immer höhere Verbreitung erreichen. Es verspricht eine Rediktion von rund 30 Prozent des Datenvolumens – leider ist die Dekodierung um 30 Prozent langsamer, außerdem ist das Format noch nicht sonderlich weit verbreitet.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -