Bilder-Handling (Komprimierung)

Funktionalitäten des Bilder-Handlings im PORTAL

• Responsive Ausspielung von Bildern

• Anlegen von mehreren Auflösungsvarianten beim Bildupload

• Verwendung eines Platzhalters mit passendem Bildseitenverhältnis für das Nachladen von Bildern

Inhaltsverzeichnis

Responsive Ausspielung von Bildern

Auflösung

Nachdem ein Bild hochgeladen und gespeichert / veröffentlicht wurde, werden einmalig mehrere Auflösungsvarianten angelegt. In allen Varianten – mit Ausnahme von NATIVE – werden sowohl die Metadaten (z. B. EXIF, IPTC) entfernt und das Chroma-Sampling dem menschlichen Sehvermögen angepasst. Beides resultiert in deutlich kleineren Dateien. Es erscheint zuerst ein niedrig auflösendes Bild, welches nach und nach schärfer wird. Dies ist für das menschliche Auge deutlich angenehmer, als der ansonsten übliche zeilenweise Aufbau des Bildes. Die Bildorientierung wird mithilfe von ImageMagick ausgelesen und angepasst. Dies resultiert in einer korrekten Interpretation der Bildrotation.

Lazy-Loading

Die Auslieferung der Bilder erfolgt mittels Lazy-Loading. Eine JavaScript-Logik überprüft dabei, ob sich das Bild im sichtbaren Bereich der Webseite befindet und lädt die Bilder, auf die das zutrifft. Es ist zu beachten, dass die Variante NATIVE  nicht zur Auslieferung verwendet wird.

Es werden beim Aufruf keine Bilder hoch- bzw. runtergerechnet oder komprimiert, da die Auflösungsvarianten, wie oben schon beschrieben, bereits beim erstmaligen Hochladen initial angelegt wurden. Eine Skalierung auf die Zeichenfläche findet einzig im Browser statt.

Bildgrößen

Folgende Bildgrößen sind verfügbar:

Skalierung

Aufgrund der responsiven Ausspielung von Bildern werden Bilder zunächst immer auf die gesamte definierte Breite aufgespannt. Anschließend wird das für die Position verwendete/definierte Seitenverhältnis errechnet.

Um einen Cumulative Layout Shift (CLS) zu vermeiden, der entstehen würde, wenn das Bild einfach nachgeladen würde, wird ein Platzhalter mit dem passenden Bildseitenverhältnis aufgespannt.

Hierfür wurden für alle unterstützten Bildseitenverhältnisse (siehe unten) passende Platzhalter hinterlegt, aus welchen dann das jeweils passende genutzt wird.

Innerhalb des Platzhalters wird dann das Bild aufgezogen, sodass es keine Ränder (oben/unten/links/rechts) gibt. Sofern ein Bildschwerpunkt gesetzt ist, wird auch dieser dafür berücksichtigt.

Die verwendeten Seitenverhältnisse sollen den üblichen Use-Cases entsprechen (z. B. Bildverhältnis einer handelsüblichen Kamera: 3:2).

Open

^{Vergleich: Platzhalter im Verhältnis 1:1 im Vergleich zu einem Platzhalter mit passendem Bildseitenverhältnis.}

Unterstützte Bildseitenverhältnisse

• 3:2

• 3:1

• 2:1

• 1:1

• 1:2

• 2:3

• 16:9

Ablage von hochgeladenen Bildern

Beim Upload von Bildern werden verschiedene Auflösungsvarianten generiert (siehe oben Auflösung) und entsprechend abgelegt. Bildkommentare (z. B. EXIF, IPTC) werden bei den Varianten entfernt. In der Originalbild-Variante NATIVE bleiben alle Infos erhalten. Diese Variante wird üblicherweise nicht digital angezeigt, sondern zur Verwendung in Print bzw. bei der Funktion “Original herunterladen” bereitgestellt. Die EXIF-Daten zur Bildrotation werden interpretiert und angepasst. Dies resultiert in einer korrekten Interpretation der Bildrotation. Die Variante NATIVE wird nicht zur Auslieferung verwendet.

Verwandte Seiten

^{Nur für PEIQ-Mitarbeiter:innen}
https://peiq.atlassian.net/wiki/x/Z4CsB