Intelligentes Cropping von Bildern für Responsive

Die Logik hinter Focal Point

Wenn man sich mal so umschaut im Bereich Responsive Websites könnte man durchaus die folgenden Eindrücke gewinnen: a) Wir machen das weil wir müssen, erkennen aber keinen Sinn darin, b) Hauptsache es passt und c) bloss nicht noch einmal drüber nachdenken. Entsprechend liebevoll sind die Umsetzungen, weil kosten darf es auch nichts. An der Stelle muss noch viel Arbeit geleistet werden, weil die Einsicht beim Kunden das eine Responsive Site kein Abfallprodukt einer bereits bestehenden Seite ist, ist nicht gegeben.

Die Logik hinter Focal Point

Gerade bei den Bildern wird einfach gestaucht und gestreckt auf Teufel komm raus. Macht das Sinn? Nein! Jedes Bild besitzt wichtige Informationen (z.B. den Geschäftsführer eines Unternehmens) und unwichtige Informationen (den neuen Porsche den er grad als Geschäftswagen bekommen hat). Was will ich also auf Mobile sehen? Richtig – den Geschäftsführer in groß. An dieser Stelle hilft einem Focal Point weiter. Was macht der kleine Helfer?

Von Prinzip her erlaubt das Skript das Setzen eines Fokus innerhalb eines Bildes. Dieser Focal Point wird dann herangezogen, wenn das Bild für andere Bildschirmauflösungen angepasst werden muss. Für diesen Fall wird das Bild nämlich weder gestraucht oder gestreckt oder ohne Sinn und Verstand gecropped, sondern es wird so intelligent zugeschnitten, dass der Focal Point immer im Vordergrund stehen bleibt. Steht der Geschäftsführer zum Beispiel rechts, der Porsche links, wird links mehr abgeschnitten als rechts.

Natürlich muss man an der Stelle der Fairness halber sagen, das es natürlich aufwendig ist diese Bibliothek zu verwenden, da ich ja vom Prinzip her für jedes Bild den Focal Point setzen muss. Es ist allerdings eine sehr sinnvolle Sache und insbesondere eine, die wiederum verdeutlicht, dass eine Responsive Webseite kein Abfallprodukt ist, die mal eben nebenher erstellt wird.

Ähnliche Beiträge

Notifier für Benutzer-Nachrichten in jQuery Jede halbwegs vernünftige Community-Software oder Internet-Anwendung braucht ein Nachrichten-System, um demjenigen angemeldeten Benutzer, der gerade a...
Cached Commons – CDN für JavaScript und CSS Neuerdings lädt man ja Javascript nicht mehr vom eigenen Server, sondern verwendet die Google Libraries API, das ist zwar ganz nett, aber der Dienst b...
jQuery URL parser Aus den verschiedensten Gründen kann es passieren, das man eine URL mittels JavaScript validieren muss - was noch relativ einfach ist. Komplizierter w...
Glimmer – der Editor für jQuery Animationen jQuery Animationen sind eine lustige Sache, lustig deshalb, weil man mehr als „Einblenden“ und „Ausblenden“ im Web nicht zu Gesicht bekommt. Soll eine...

Schreibe einen Kommentar