News:

Bilder im Responsive Design

 
Mittwoch, 04.11.2015

Responsive Design, Adaptive Design - Zauberwörter, wenn es um neue Website-Gestaltung geht. Wir möchten uns hier nicht anmaßen, Ihnen diese Begriffe erklären zu wollen. Denn bei uns geht es um Bilder auf Websites von Unternehmen. Und bislang wurden Bilder im Web relativ statisch - sprich: in einer von Ihnen bestimmten Größe gezeigt und man konnte sich auf eine benötigte Pixel-Größe "verlassen". OK, mittlerweile arbeiten wir nicht mehr mit Monitoren, die 900 Pixel breit sind und klassische Seitenverhältnisse wie 2/3 oder 3/4 gelten längst nicht mehr: Smartphone-Bildschirme sind eher doppelt so hoch wie breit, manche Monitore auf dem Desktop zeigen über 2.500 Pixel in der Breite und wir hörten von Bildern, die bis zu 4.000 Pixeln groß gezeigt werden sollten. Und da setzt ja das Responsive Design an und bietet dem Browser verschiedene Größen / Dateien desselben Bildes an, je nach Darstellungsart.

Was uns hier beschäftigt, sind halt die Lizenzen und die Preise. Wie gehen die Bildagenturen mit Lizenzen für Websites im Responsive Design um? Lizenzpflichtige Agenturen berechnen teilweise den Anteil des Bildes an der Gesamtgröße der Seite - und da sind Pixel egal. Ganzseitig, 1/2 Seite etc sind da entscheidend und Sie bekommen die volle Originaldatei. Teuer aber groß.

Bei den Microstocks und den Lizenzfreien kaufen Sie die Bildgröße. Bei Microstocks ist der Unterschied zwischen 1 Euro für ein Mini-Bild und 10 Euro für eine große Originaldatei nicht wirklich wichtig - und zum Beispiel istock(photo) verkauft seine Bilder zu einem Festpreis, egal wie groß. Fotolia, dreamstime und andere werden von vielen Kunden mittlerweile ja nicht mehr in der simplen Standard-Lizenz eingekauft, weil diese Lizenz nicht reicht. Wer seine Bilder dann mit der Erweiterten Lizenz einkauft, bekommt in der Regel eh die größten Daten.

Allerdings - und das ist wichtig: Viele Microstock-Agenturen geben eine maximale Pixelgröße im Web (oder zB bei Facebook) an:

fotolia: 2000x2000x Pixel (1000x1000 Pixel bei Social Media)
istock: 1200x800 Pixel
Stocksy: 800x600 Pixel bzw. 1920x1080 Pixel bei umgestalteten Bildern

Bei den neuen Agenturen wie Stocksy und Offset oder den klassischen lizenzfreien Agenturen wie Image Source aus London ist dann aber die Bildgröße schon preisrelevant. Hier einmal die Preis- und Größen-Staffel von Image Source:


Um einen 27-Zöller mit einem Vollbild zu beglücken, müssten also EUR 330,- investiert werden. Da zuckt so mancher. Und deshalb hier unser Tipp des Monats. Im Responsive Design kann die Website die Information auslesen, wie groß der Viewport, also der Browser ist, ob er im Vollbild- oder Fenster-Modus läuft und kann dann dem Browser sagen, welches Bild geladen werden soll - vorausgesetzt, man speichert mehrere Größen und Formate eines Motivs vorher ab. Eine Website ist also theoretisch in der Lage, die gaaanz große Datei auch nur an die gaaanz großen Browser auszuliefern. Aber diese Größe sollte auch vorliegen, wenn ein Bild groß und fein gezeigt werden soll! Mehr als 10 oder 15% sollte ein Bild nicht im Browser vergrößert werden, außer, es darf künstlich unscharf, zB als Hintergrundmotiv, geladen werden. Dann könnten Sie theoretisch auch halb oder ein Drittel so große Bilder hochladen und es sieht immer noch schön aus.

Und hier stellt sich ganz einfach die Frage, wie groß denn die "Leser" das Bild brauchen. Wenn kein einziger Browser das Bild in 2500 Pixeln abfragt, warum dann die DIN A5+-Datei für EUR 330,- kaufen? Und dann noch der Aspekt der Bandbreite: Warum muss jedes Prepaid-Handy Riesenbilder laden, wenn der Monitor eh nur 600 Pixel breit ist?

Unser Tipp also: Lassen Sie Ihr Webteam den Viewport (Browsergröße und damit die Größe der dargestellten Bilder) auslesen und beobachten.

So werden Sie sehen, welche Bilder in welcher Größe benötigt werden und können sich darauf bei zukünftigen Bildkäufen einrichten.

Und falls Sie mit Bildern arbeiten, deren Agenturen die maximale Größe vorgeben: Bei diesen Pixel-Angaben geht es um die Größe der Bilddatei. Wenn Sie ein Bild von Shutterstock in 800x600 Pixeln abspeichern aber dem Browser stecken, dass er es in 1.600x1.200 Pixel zeigen soll, ist das fein. Denn würde ein Bilderdieb das Bild dreisterweise herunterladen, bekäme er halt nur die gespeicherten 800x600 pixel.

Der neue picture Tag ist eventuell noch nicht von allen Content Management Systemen integriert worden. Fragen Sie da sicherheitshalber nach. Falls weder CMS, noch Ihre Bilddatenbank das Größenmanagement automatisch übernehmen können, dann müssen halt mehrere Größen pro Motiv angelegt werden.

Veröffentlicht am Mittwoch, 04.11.2015 13:11
Kategorien: Tipps & Tricks Bilder im Web Lizenzfrei Microstocks

Wenn Sie möchten, einmal pro Monat als Magazin per Email.

Weitere News: