Was sind Progressive Images?

Progressive Bilder sind Bilddateien, welche zu Beginn des Ladeprozesses einer Seite eine niedrig-auflösende (low-res) Version bereitstellen. Erst später wird die Auflösung des Bildes nach und nach aufbereitet. Das Besondere daran? Alle Daten sind in einer einzigen Datei. Dies liegt an dem Prozess von Progressive Rendering. Je nach Bildformat (üblicherweise JPEG oder PNG) werden nach und nach die Pixelpunkte des Bildes in nachfolgenden Sequenzen immer weiter aufgelöst.

Warum ist dies für die Ladezeit wichtig?

Egal ob JPEG oder PNG, Progressive Rendering erhöht die Dateigröße. Der Nutzen dahinter ist jedoch die erhöhte User Experience. Denn während des initialen Seitenaufbaus fällt durch die low-res eine verminderte Dateigröße des Bildes an – es muss somit anfangs weniger geladen werden. Hierdurch erhöht sich der PageSpeed. Sobald der Einstieg vollzogen ist, wird die höhere Auflösung nachgeladen. Ob diese Art des Bildladens wirklich eine erhöhte User Experience gegenüber dem Sequential Rendering ist, sei hier dahingestellt.

Wie erstellst du Progressive Images?

Über Tools wie ImageMagick oder GraphiksMagick ist es möglich die eigenen Bilddateien entsprechend rendern zu lassen. Die Funktion der Progessive Bilder muss im Install Tool von v9.2 aufwärts dann noch konfiguriert werden wie folgt: $GLOBALS[‘TYPO3_CONF_VARS‘] [‘GFX‘] [‘proccesssor_interlace‘].

Die optionalen Werte sind: None, Line, Plane, Partition

Wie immer nur ein Überblick

Viel Spaß beim Ausprobieren und Optimieren! Solltet ihr eigene Hacks zu diesem Thema haben, teilt sie doch direkt der Community unter typo3.net!