Seien Sie dabei!

Als Dienstleister im Markt für Internetanwendungen egal ob browserbasiert oder für das mobile Internet ist die edition-software GmbH eine gute Adresse wenn es um zuverlässige Anwendungen mit einem ausgezeichneten Preis-Leistungsverhältnis geht. Überzeugen Sie sich, sprechen Sie uns gerne an.

Ihre edition-software

Thumbnails mit ImageMagick

Bei der Gestaltung von Internetportalen kommt es immer wieder vor, dass Listen von Artikeln mit kleinen Vorschaubildern ausgestattet werden sollen. Diese werden auch als Thumbnails bezeichnet. Ihre Erzeugung wird häufig ImageMagick überlassen. Aus optischen Gründen sollten in den Teaserlisten die Vorschaubilder in einem fixen Format sein, das unabhängig von der ursprünglichen Größe des Bildes ist. Wir müssen in der Regel also die Originalbilder verkleinern und zurechtschneiden. Dabei muss in allen Fällen das sogenannte Kantenverhältnis, also die aspect ratio des Originalbildes gewahrt werden. Das Kantenverhältnis wird durch Division der Breite durch Höhe des Bildes bestimmt. Für gängige Kombinationen haben sich feste Begriffe eingebürgert z.B. 3:2 (analoge Negativfilme); 4:3 (viele Digitalkameras) oder 16:9 (viele Bildschirme).

Als Beispiel verwenden wir ein Bild des Observatoriums der Uni Halle (original.jpg) vor der Sanierung. Es hat eine Originalgröße von 400x613 Pixeln. Das Kantenverhältnis beträgt 0,6524.

Einpassen in den Viewport

Eine einfache Möglichkeit ist die Einpassung eines Bildes in eine vorgegeben Rahmen (Viewport). Dabei stellen wir sicher, das das Bild optimal in den zur Verfügung stehenden Ausschnitt passt, es wird also gegegebenfalls verkleinert dargestellt. Wenn das Kantenverhältnis des Bildes kleiner als das Kantenverhältnis des Viewports ist, ist das Bild praktisch hochkantiger als der zur Verfügung stehende Rahmen. In diesem Fall soll also die Höhe des Bildes optimal auf die Höhe des Rahmens angepasst werden, die Breite des zur Verfügung stehenden Rahmens wird also nicht vollständig ausgenutzt. Einen Viewport von 200x100 Pixeln (Kantenverhältnis von 2) vorausgesetzt, können wir also folgendes Thumbnail erzeugen:

convert -scale "200x100>" original.jpg thumb1.jpg

Das entstandene Bild ist also 100 Pixel hoch und hat eine Breite von 65 Pixeln (Höhe von 100 Pixeln multipliziert mit dem Kantenverhältnis des Bildes). Es entsteht im Rahmen rechts und links eine ungenutzte Fläche. Das "größer als" Zeichen beim scale Attribut liefert das gewünschte Verhalten:

thumb1.jpg

Ausfüllen des Viewports

Wenn es uns darauf ankommt, das wir den zur Verfügung stehenden Rahmen optimal ausnutzen wollen, d.h. das Bild so anpassen wollen, dass kein Leerraum entsteht müssen wir es beschneiden (cropping). Der zugehörige Befehl lautet dann:

convert -scale "200x100^" -gravity Center \
   -crop 200x100+0+0 original.jpg thumb2.jpg

Bei diesem Befehl fordern wir zunächst eine Mindestgröße des Thumbnails von 200x100 Pixeln (ausgedrückt durch das Dach beim scale Attribut), um es dann gleich im nächsten Option wieder zu beschneiden. Die Optionen beim crop Argument sind Breite, Höhe und optionale Verschiebung der linken oberen Ecke des Bildes. Um einen gleichmäßige Verschnitt zu erhalten geben wir als Gravitätszentrum "Center" an.

thumb2.jpg

Auffüllen des Leeraums

HTML Designer wissen, dass der Umgang mit Bildern unbekannter Größe innerhalb von HTML Seiten nicht problemfrei möglich ist. Wegen des Kantenverhältnisses kann oft nur eine der beiden möglichen Dimensionen (width, height) des Bildes im img Tag angegeben werden, um Verzerrungen zu vermeiden. Hier kann es aber zu Problemen kommen, wenn die originalen Bilder kleiner sind als der im HTML vorgesehene Viewport. Zudem verbessern sich die notwendigen Zeiten zum Aufbau der HTML Seite auf dem Client wenn wirklich beide Dimensionen angegeben werden. Daher ist es wünschenswert, wenn man mit einer fixen Größe der Thumbnails rechnen kann. Auch in diesem Fall finden wir Hilfe bei ImageMagick, die Idee besteht darin, auf ein neutrales Hintergrundbild mit der fixen Größe des Viewports das Originalbild optimal zu montieren.

convert -size 200x100 xc:lightblue \
   jpeg:-|composite -resize "200x100"\
   -gravity Center original.jpg - thumb3.jpg

Im Beispiel dient hier ein hellblauer Hintergrund nur der Illustration der Idee. Wir verwenden den Befehl composite der die Bildmontage ermöglicht. Das Hintergrundbild erzeugen wir in diesem Fall dynamisch, man kann aber auch ein fixes statisches Bild benutzen.

thumb3.jpg

Technologie

02/29/2012 - 18:43
02/29/2012 - 17:43
01/19/2012 - 11:45
04/06/2011 - 08:58
12/21/2010 - 23:28
11/26/2010 - 15:54
11/14/2010 - 10:42