Dieser Beitrag beschreibt, wie Bilder nach dem Hochladen und Speichern / Veröffentlichen im PORTAL verarbeitet, ausgespielt und abgelegt werden. Die unten beschriebenen Workflows werden erst gestartet, wenn ein Bild hochgeladen und der Inhalt als Entwurf gespeichert bzw. veröffentlicht wurde.
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:
Variante | Kantenlänge |
|---|---|
NATIVE | 100% |
T | 40px |
XS | 80px |
S | 160px |
M | 320px |
L | 640px |
XL | 1200px |
XXL | 2048px |
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).
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.
Ein Bild darf maximal 32 MB groß sein. Bilder sollten zudem mindestens eine Breite von 1024 Pixeln haben, damit diese noch hochauflösend dargestellt werden können.
Verwandte Seiten
Disclaimer
Für die vorliegende Systemübersicht/Publikation behalten wir uns alle Rechte vor. Nachdruck, Vervielfältigung und Verbreitung (auch auszugsweise) ist nur mit schriftlicher Genehmigung der PEIQ Publishing GmbH & Co. KG erlaubt. Wir behalten uns vor, die Systemübersicht/Publikation jederzeit ohne vorherige Ankündigung zu ändern und/oder zu erweitern. Die vorliegenden Angaben dienen lediglich Informationszwecken. Die PEIQ Publishing GmbH & Co. KG übernimmt keinerlei Haftung und/oder Garantie für Fehler und/oder unvollständige Angaben in der Systemübersicht/Publikation, mit Ausnahme von vorsätzlich falschen oder arglistig verschwiegenen Angaben. Da unsere Software laufend weiter entwickelt wird, handelt es sich bei den vorliegenden nur um allgemeine Angaben. Es handelt sich weder um eine Zusicherung von Mindestvertragsinhalten, noch um Beschaffenheitsgarantien im Sinne des § 443 BGB.