Zum Hauptinhalt springen

Studierendenprojekte

Rendering von Progressive-JPEGs

Bei der Erstellung von modernen Webseiten spielen Bilder eine tragende Rolle. Ein großer Teil der Inhalte wird visuell dargestellt, ohne textuelle Beschreibung. Dies führt zu größerem Datentraffic und damit verbundenen längeren Ladezeiten auf der Seite des Clients. Aber auch die Betreiber von Webseiten sind in ihrem Handeln eingeschränkt. Meist müssen mehrere Bilder in verschiedenen Auflösungen und Größen für verschiedene Endgeräte bereitgestellt werden.

Dafür werden Bilder im JPEG-Format verwendet, welcher durch den JPEG Standard spetifiziert und definiert wird. Das herkömmlichste Format eines JPEG-Bildes ist der Basline Modus. Er stellt JPEGs beim Laden einer Webseite sequentiell von oben nach unten dar, dies kann bei langsamen Internetverbindungen als unangenehm empfunden werden, da es bis zum Ende des Ladeprozesses dauert, bis das Bild vollständig angezeigt werden kann.

Um dies zu Umgehen, wurde der Progressive-Modus des JPEG-Formates verwendet. Ein Progressive JPEG wird, im Gegensatz zum Baseline-Format, sofort als Thumbnail in niedriger Qualität dargestellt. Bei fortschreitendem Ladeprozess werden immer mehr Bildinformationen nachgeladen und das Bild wird "schärfer". Der Unterschied liegt hieirbei in der Kodierung des Progressive-Modus, da er in mehreren Scandurchläufen kodiert und dekodiert wird. Diese Eigenschaft konnte genutzt werden, um ein Bild am Server zu speichern und es für verschiedene Endgeräte (Desktop, Browser, Smartphone) zu verwenden, ohne es dabei in verschiedene Auflösungen abspeichern zu müssen. Zusätzlich benötigen Progressive JPEGs weniger Speicherplatz als ihr Baseline Counterpart. Allerdings arbeitet er Kodierungsalgorithmus des Progressive-Modus langsamer als der des Basline-Modus und benötigt mehr RAM.

Somit war es möglich eine Applikation zu erstellen, welche Progressive JPEGs auf Anfrage eines Clients, mithilfe dessen Browserfensterbreite als Übergabeparameter, auf jedem Gerät darstellt. Hierfür wird das Bild am Server skaliert, uma an die Größe des Endgerätes angepasstzu werden. Zusätzlich wurde ein Grenzwert festgelegt, ab dem die nicht mehr benötigten und zu diesem Zeitpunkt nur noch redundanten Informationen beim Senden des  Bildes abgeschnitten werden, sodass am Endgerät das BIld nur in der benötigten Größe und mit der maximal für dieses Endgerät ausreichenden Qualität angezeigt werden.

Facts:
Typ:
 Bachelorprojekt
Studiengang: Bachelor Informationstechnik & System-Management

Katze