Design

Focal Point: Intelligentes Beschneiden von Bildern in responsivem Webdesign

10. Januar 2013
von

Responsives Webdesign zielt darauf, dass eine Website dank unterschiedlicher Layouts auf verschieden großen Displays ordentlich dargestellt wird. Bilder werden dabei in der Regel auf eine bestimmte Breite herunterskaliert. Gerade bei detailreichen Darstellungen kann es dann schon mal vorkommen, dass ein Bild schlecht erkennbar erscheint. Das CSS-Framework Focal Point sorgt für ein intelligentes Beschneiden von Bildern ab bestimmten Größen, damit nur ein Ausschnitt des Bildes – der aber dafür größer – angezeigt wird.


Beispiel für die Festlegung des Focal Point

Da sich der inhaltliche Mittelpunkt eines Bildes nicht immer in der tatsächlichen Bildmitte befindet, kann es passieren, dass nach dem Beschneiden eines Bildes ein wichtiger Bildbestandteil außerhalb des Bildes liegt. Mit Focal Point wird ein Bereich definiert, der den inhaltlichen Fokus eines Bildes darstellt und beim Beschneiden des Bildes auf jeden Fall erhalten bleiben soll.

Focal Point festlegen

Das Prinzip von Focal Point ist einfach: Jedes Bild wird in Raster von zwölf mal zwölf Einheiten unterteilt. Per CSS definiert man nun eine Einheit des Rasters als inhaltlichen Mittelpunkt, den Focal Point. Ist beispielsweise auf einem Bild eine Person abgebildet, lässt sich der Kopf dieser Person als Focal Point definieren. Selbst wenn sich diese Person am Bildrand befindet, fällt sie der Bildbeschneidung nicht zum Opfer.

Um den Focal Point festzulegen, weist man dem Bild zwei Klassen zu, welche die horizontale und vertikale Position des Focal Point innerhalb des Rasters angeben. Gezählt wird von der Rastermitte. Es gibt daher je sechs Klassen, die nach oben, unten, rechts und links zählen.

1
2
3
4
5
<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 festgelegt. Die Angabe der Klasse „focal-point“ ist ebenso obligatorisch, wie der zusätzliche DIV-Container um das Bild.

Standardmäßig beschneidet das Framework ein Bild, sobald das Browserfenster kleiner als 767 Pixel ist. Dieser Wert kann in der übersichtlichen Stylesheet-Datei aber leicht angepasst werden.

Funktionsweise von Focal Point

Die Funktionsweise ist leicht erklärt: Über die unterschiedlichen CSS-Klassen wird das Bild über negative margin-Werte beschnitten. Als Einheit wird em verwendet. Die besten Ergebnisse werden erzielt, wenn das Bild ein Seitenverhältnis von 4:3 im Querformat hat. Für hochformatige Bilder im Verhältnis 3:4 sollte die zusätzliche Klasse portrait vergeben werden.

Fazit: Focal Point verfolgt einen interessanten Ansatz für eine bessere Darstellung von Bildern bei kleinen Auflösungen. Das Framework besteht zudem nur aus einer einzelnen, dabei sehr übersichtlichen CSS-Datei und ist daher schnell angewendet.

(dpe)

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.

Tags: , , ,

2 Kommentare zu „Focal Point: Intelligentes Beschneiden von Bildern in responsivem Webdesign
  1. Gunnar Bittersmann am 11. Januar 2013 um 12:49

    Das ganze Bild übers (Funk-)Netz zu übertragen, wenn doch nur ein Ausschnitt davon angezeigt werden soll, kann nicht der Weißheit letzter Schluss sein.

    Man kommt nicht daran vorbei, verschieden große Bilder (mit verschiedenen Ausschnitten) zu erstellen und das jeweils passende auszuliefern.

    • Tom am 14. Januar 2013 um 22:21

      Ja das stimmt und es gibt, so wie es aktuella aussieht, bald einen Kompromiss beim w3c, wie mit srcset und picture umgegangen wird.

      Aber bis dahin muss man ein wenig Aufwand betreiben, um verschiedene Auflösungen je nach Bildschirmgröße an den Empfänger zu schicken. So gesehen ist das zwar von der Performance kein Renner, aber man zumindest die Optik bzw den Fokus auf kleinen Bildschirmen verbessern.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!