Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 10. Januar 2013

Focal Point: Intelligentes Beschneiden von Bildern in responsivem Webdesign

Responsives Webdesign zielt dar­auf, dass eine Website dank unter­schied­li­cher Layouts auf ver­schie­den gro­ßen Displays ordent­lich dar­ge­stellt wird. Bilder wer­den dabei in der Regel auf eine bestimm­te Breite her­un­ter­ska­liert. Gerade bei detail­rei­chen Darstellungen kann es dann schon mal vor­kom­men, dass ein Bild schlecht erkenn­bar erscheint. Das CSS-Framework Focal Point sorgt für ein intel­li­gen­tes Beschneiden von Bildern ab bestimm­ten Größen, damit nur ein Ausschnitt des Bildes – der aber dafür grö­ßer – ange­zeigt wird.


Beispiel für die Festlegung des Focal Point

Da sich der inhalt­li­che Mittelpunkt eines Bildes nicht immer in der tat­säch­li­chen Bildmitte befin­det, kann es pas­sie­ren, dass nach dem Beschneiden eines Bildes ein wich­ti­ger Bildbestandteil außer­halb des Bildes liegt. Mit Focal Point wird ein Bereich defi­niert, der den inhalt­li­chen Fokus eines Bildes dar­stellt und beim Beschneiden des Bildes auf jeden Fall erhal­ten blei­ben soll.

Focal Point festlegen

Das Prinzip von Focal Point ist ein­fach: Jedes Bild wird in Raster von zwölf mal zwölf Einheiten unter­teilt. Per CSS defi­niert man nun eine Einheit des Rasters als inhalt­li­chen Mittelpunkt, den Focal Point. Ist bei­spiels­wei­se auf einem Bild eine Person abge­bil­det, lässt sich der Kopf die­ser Person als Focal Point defi­nie­ren. Selbst wenn sich die­se Person am Bildrand befin­det, fällt sie der Bildbeschneidung nicht zum Opfer.

Um den Focal Point fest­zu­le­gen, weist man dem Bild zwei Klassen zu, wel­che die hori­zon­ta­le und ver­ti­ka­le Position des Focal Point inner­halb des Rasters ange­ben. Gezählt wird von der Rastermitte. Es gibt daher je sechs Klassen, die nach oben, unten, rechts und links zäh­len.

<div class="focal-point left-3 up-2">
 <div>
   <img src="bild.jpg" width="400" height="300" alt="" />
 </div>
</div>

Im Beispiel wird der Focal Point drei Rastereinheiten nach links und zwei nach oben fest­ge­legt. Die Angabe der Klasse „focal-point“ ist eben­so obli­ga­to­risch, wie der zusätz­li­che DIV-Container um das Bild.

Standardmäßig beschnei­det das Framework ein Bild, sobald das Browserfenster klei­ner als 767 Pixel ist. Dieser Wert kann in der über­sicht­li­chen Stylesheet-Datei aber leicht ange­passt wer­den.

Funktionsweise von Focal Point

Die Funktionsweise ist leicht erklärt: Über die unter­schied­li­chen CSS-Klassen wird das Bild über nega­ti­ve margin-Werte beschnit­ten. Als Einheit wird em ver­wen­det. Die bes­ten Ergebnisse wer­den erzielt, wenn das Bild ein Seitenverhältnis von 4:3 im Querformat hat. Für hoch­for­ma­ti­ge Bilder im Verhältnis 3:4 soll­te die zusätz­li­che Klasse portrait ver­ge­ben wer­den.

Fazit: Focal Point ver­folgt einen inter­es­san­ten Ansatz für eine bes­se­re Darstellung von Bildern bei klei­nen Auflösungen. Das Framework besteht zudem nur aus einer ein­zel­nen, dabei sehr über­sicht­li­chen CSS-Datei und ist daher schnell ange­wen­det.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

2 Kommentare

  1. Das gan­ze Bild übers (Funk-)Netz zu über­tra­gen, wenn doch nur ein Ausschnitt davon ange­zeigt wer­den soll, kann nicht der Weißheit letz­ter Schluss sein.

    Man kommt nicht dar­an vor­bei, ver­schie­den gro­ße Bilder (mit ver­schie­de­nen Ausschnitten) zu erstel­len und das jeweils pas­sen­de aus­zu­lie­fern.

    • Ja das stimmt und es gibt, so wie es aktu­el­la aus­sieht, bald einen Kompromiss beim w3c, wie mit src­set und pic­tu­re umge­gan­gen wird.

      Aber bis dahin muss man ein wenig Aufwand betrei­ben, um ver­schie­de­ne Auflösungen je nach Bildschirmgröße an den Empfänger zu schi­cken. So gese­hen ist das zwar von der Performance kein Renner, aber man zumin­dest die Optik bzw den Fokus auf klei­nen Bildschirmen ver­bes­sern.

Schreibe einen Kommentar zu Gunnar Bittersmann Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.