Focal Rect | PW6 Hilfezentrum

Das Focal Rect Modul dient zur automatischen Berechnung von Bildausschnitten. Bilder, die auf der Website verwendet werden, sollten idealerweise auf jedem Endgerät optimal angezeigt werden, egal, ob z.B. im Hoch- oder im Querformat. Das Focal Rect Modul bietet die Möglichkeit, den relevanten Bildausschnitte zu kennzeichnen, so dass dann geeignete Formate automatisch erzeugt werden können. Dies reduziert den redaktionellen Aufwand natürlich ganz erheblich, denn ansonsten müssten einzelne Bilder für alle möglichen Formate vorbereitet und hochgeladen werden.

Geeignetes Bildmaterial

Damit das Focal Rect Modul perfekt arbeiten kann, ist es erforderlich, geeignetes Bildmaterial in der Medienbibliothek anzulegen.

Bilder werden am besten in ihrem Originalzustand, also so groß wie möglich hochgeladen. Die Versionen der Bilder, die schließlich auf der Webseite dargestellt werden, werden von dem Modul selbst berechnet. Hier ist zu bedenken, dass moderne Desktop-Bildschirme Breiten von weit über 2000 Pixeln haben und bei Retina Displays die Auflösung doppelt so groß ist. Insbesondere wenn ein Bild über die komplette Breite des Bildschirms gehen soll, sollte das Bildmaterial entsprechend groß sein. Diese Dinge gelten bereits allgemein. Im Zusammenhang mit dem Focal Rect Modul verschärft sich das Problem, da das Focal Rect aufgrund der Seitenverhältnisse ggf. einen kleineren Ausschnitt des Bildes erzeugen muss und dieser muss ja dann ggf. auch noch in genügender Qualität vorliegen.

Ist das Bildmaterial für den Bildstil nicht groß genug, wird das Bild nachher einfach vom Webbrowser auf die Zielgröße gezogen - unter entsprechendem Verlust der Bildqualität.

Bilder sollten in der höchsten vorliegenden Orginalauflösung hochgeladen werden. 💡

Wichtig ist außerdem, dass das Hauptmotiv des Bildes nicht zu nah am Rand sitzt. Das ist wichtig, damit dem Focal Rect Modul auch noch etwas Bildmaterial "drumherum" zur Verfügung steht, um das jeweils erforderliche Zielformat erzeugen zu können.

Das Hauptmotiv des Bildes sollte möglichst etwas Abstand von den Bildrändern besitzen. 💡

Anwendung

Wir haben hier ein Bild, dessen Hauptmotiv (Ballons) nicht zu nah am Rand sitzt.

Dieses Bild legen wir nun in der Medienbibliothek an.

Über dem Bild sehen wir nun zwei Rahmen (grün und rot) liegen.

Die Bedeutung der Rechtecke

🟥 Rotes Rechteck (Crop Rect): "Try to crop"
Empfehlung an das Modul, die außerhalb der roten Linie liegenden Bereiche möglichst abzuscheiden.

🟩 Grünes Rechteck (Focal Rect): "Try not to crop"

Empfehlung an das Modul, die innerhalb der grünen Linie liegenden Bereiche möglichst nie abzuschneiden.

💡 Wichtig: Die beiden Rahmen sind nur Empfehlungen, die dem Focal Rect Modul sagen, welche Bereiche man für entbehrlich hält und welche möglichst zu sehen sein sollten.

Das Focal Rect Modul versucht also alles außerhalb des roten Rahmens abzuschneiden und alles innerhalb des grünen Rahmens möglichst zu erhalten. Je nach Zielformat und zur Verfügung stehendem Platz und zur Verfügung stehender Bildauflösung gelingt das aber nicht immer. Berücksichtigt man die oben genannten Kriterien bei der Auswahl des Originalbildmaterials erhöht man aber die Wahrscheinlichkeit, dass es gelingt.

Diese Rahmen können nun mit der Maus bewegt und skaliert werden. Standardmäßig sind der rote Rahmen an der Außenkante des Bildes und der grüne Rahmen mittig darin gesetzt. Dies ist aber nur der voreingestellte Standard. Damit sinnvolle Bildausschnitte generiert werden, müssen diese Rahmen entsprechend vom Redakteur angepasst werden.

Wenn wie in diesem Beispiel das Seitenverhältnis von 3:2 auf 3:1 verändert wird, können wie man sieht auch Teile des Bildes, die innerhalb des Focal Rects liegen, nicht in dem endgültigen Bild enthalten sein (siehe folgendes Bild). Hier fehlt zum Beispiel der Leuchtturm in der unteren rechten Ecke des Bildes. Crop- und Focal Rect sind - wie schon erläutert - nur eine Empfehlung. Das Modul muss hier in diesem Beispiel auch Inhalte innerhalb des grünen Rahmens entfernen, da es keine andere Möglichkeit hat, das erforderliche Seitenverhältnis aus dem vorhandenen Bildmaterial zu generieren.

Das Focal Rect sollte idealerweise das Hauptmotiv des Bildes umfassen (so eng wie möglich - aber ohne das Hauptmotiv abzuschneiden), damit die Bildstile von dem Modul am besten berechnet werden können:

In diesem Beispiel ist der Leuchtturm in der rechten unteren Ecke nicht mehr durch das Focal Rect geschützt und kann dementsprechend ohnehin abgeschnitten werden.

Auch in der Mobilansicht wird nun das Motiv vollständig angezeigt.

Praxisbeispiele für unterschiedliche Focal Rect-Bereiche

Wir verwenden hier ein Bild, in dem das Hauptmotiv (Eiffelturm und Skyline) zentral angeordnet ist. Schauen wir uns zunächst an, wie das Bild in Desktop und mobil ausgegeben wird, wenn das Focal Rect einfach nahezu den kompletten Bereich erfasst:


Das Bild wird auf Desktop skaliert. Alle zentralen Elemente sind gut sichtbar. Lediglich am oberen und am unteren Rand wird das Bild beschnitten, da unser Ausgangsbild ein anderes Seitenverhältnis hat.	Das Bild wird für die Mobildarstellung skaliert. Hier hat das Bild nun ein völlig anderes Format als unser Ausgangsbild. Der Ausschnitt erfolgt aus dem Zentrum des Bildes, da nichts anderes definiert wurde.

Wir sehen nun, dass der Eiffelturm in der Mobilversion abgeschnitten wird. Um das zu korrigieren, definieren wir mit dem grünen Rahmen den Bildausschnitt, den wir auf jeden Fall immer angezeigt haben möchten:


Hier ändert sich kaum etwas an der Ansicht. Der Fokus liegt etwas mehr auf dem Eiffelturm, die Ränder werden etwas mehr beschnitten.	Hier ist der Eiffelturm, der als "immer sichtbar" definiert wurde, nun vollständig zu sehen.