Zur Machart Studios Website
Back to top

Bildoptimierung: JPEG für das Web

Als Erweiterung und Vertiefung zum Thema Bildoptimierung für’s Web, soll es in diesem Beitrag speziell um das Bildformat JPEG gehen und wie man Bilder basierend auf das Kompressionsverfahren von JPEG fürs Web optimieren kann.

Das 8 Pixel Raster

Bevor es aber losgeht, möchte ich einige Worte zum notwendigenTheorieteil loswerden. Wie jedes Bildformat hat auch das JPEG Format verschiedene, verlustbehaftete und verlustfreie Komprimierungs- und Kodierungsmethoden. Die Komprimierung erfolgt in sechs Verarbeitungsschritten, von denen in diesem Beitrag nur einer von Bedeutung ist. JPEG Bilder werden in einer Serie von 8×8 Pixel Blöcken eingeteilt, die besonders gut sichtbar werden, wenn ein Bild mit zu geringer Qualität abgespeichert wird. Hier ein Beispiel, bei dem die komprimierten 8×8 Pixel Blöcke in der Vergrößerung gut erkennbar sind.

Bildoptimierung von JPEG: Es gibt verlustbehaftete und verlustfreie Komprimierungs- und Kodierungsmethoden.

Für die Bildoptimierung kann man sich dieses Wissen wie folgt zu Nutze machen

Bildoptimierung von Bildateien - JPEG für das Web

Die beiden schwarzen Quadrate auf blauem Grund sind 8×8 Pixel groß. Und obwohl die Qualität bei beiden mit 10% sehr niedrig ist, sieht das Quadrat links oben sauber und scharf aus, während das rechts unten verpixelt ist. Warum ist das so? Die Antwort sieht man sich am besten unter dem 8×8 Pixel Raster an.

Das 8x8 Pixel-Raster

Beim Abspeichern in das JPG-Format, wird das Bild in eine Serie von 8×8 Pixel-Blöcke unterteilt, die unabhängig von einander in diskrete Kosinustransformationen codiert werden. Da das zweite Quadrat nicht dem Raster entspricht, werden (vereinfacht ausgedrückt) bei der Kompression in jedem Block Durchschnittswerte zwischen Schwarz und Blau berechnet. Um also die Bildung solcher Artefakte möglichst zu verhindern, sollte man beim Anlegen der Bilder darauf achten, dass sie sich am 8×8 Pixel-Raster orientieren. Praktisch angewendet sieht das so aus (eignet sich besonders bei rechteckigen Objekten/Motiven):

Optimierung von Bildateien
Bildoptimierung ohne Verpixelung - So geht das bei JPEG

Der erste Button ist willkürlich platziert worden. Vor dem Abspeichern des zweiten Buttons wurde er am 8×8 Raster ausgerichtet. Die Qualitätseinstellungen sind die gleichen (60%). Bei genauerem Hinsehen kann man erkennen, dass der zweite Button deutlich weniger Artefakte aufweist als der erste Button. Darüber hinaus kann man mit dieser Methode (je nach Motiv) gut 1 KB Datenvolumen einsparen.

Bildoptimierung bei JPEG-Dateien

pixelstats trackingpixel

Von Diana Lazaru

Diana prägt die kreative Ausrichtung von Machart Studios vor allem im Bereich Illustration. Sie ist unser Chamäleon, das seinen Stil den Anforderungen der Kunden stets mit verblüffender Leichtigkeit anpasst. Diana liebt Farben und ist mit einem Blatt Papier und einem Stift in der Hand überglücklich. Nach ihrem Studium der Kunstgeschichte und einem sechsmonatigen Auslandsstudium in Bologna arbeitete sie freiberuflich als Illustratorin und Zeichnerin der Fix und Foxi-Comics für New Ground Publishing. Außerdem war sie Viertplatzierte beim bundesweiten Comicstars-Talentwettbewerb.

Schreibe einen Kommentar

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

Machart Studios Werbeagentur