Einführung Thumbnails Optimierung Rahmen Komprimierung

### T h u m b n a i l s Thumbnail heißt soviel wie Daumennagel und bezeichnet ein Vorschaubild, das in etwa so groß wie ein Daumennagel sein kann und somit in der Datenmenge sehr klein ist. Es hilft, gleich mehrere Bilder auf einer Webseite vorzustellen, ohne daß der Besucher allzulange auf die Bilder warten muß. Mit Thumbnails kann man aber auch auf einzelne Bilder aufmerksam machen. Sie dienen also dazu, neugierig zu machen, dementsprechend sollte ihrer Gestaltung einige Sorgfalt gegönnt werden. Der richtige Ausschnitt Der erste Schritt, um ein Thumbnail zu erzeugen, scheint die Verkleinerung des Bildes zu sein. Bevor man das aber in Angriff nimmt, sollte man überlegen, ob man nicht vor der Verkleinerung einen treffenden Ausschnitt aus dem Bild herausschneidet. Schauen Sie sich einmal das Rohbild an, indem Sie unten auf den Link "scan1" klicken. Es erscheint ein neues Browserfenster (JavaScript muss eingeschaltet sein), das können Sie wieder schließen, wenn Sie auf die gelbe Grafik "close" klicken. scan1 Damit Sie mit dem eingescannten Bild auch arbeiten können, klicken Sie auf den folgenden Link (Sie müssen für den Download online sein) und speichern das Bild in ein Verzeichnis Ihrer Wahl. Es liegt im TIF-Format vor, ist 407 kb groß und in PhotoImpact problemlos einlesbar. Download scan1.tif Das Bild bietet sich an, um vor der eigentlichen Verkleinerung einen Ausschnitt zu machen. Aktivieren Sie, wenn nicht bereits geschehen, in der "Werkzeugpalette" den Button für "Standardmarkierwerkzeug". Dann ziehen Sie mit der Maus in dem Bild einen Ausschnitt, der wie auf dem Bild unten gewählt sein kann.

Ausschnittmarkierung für das Zuschneiden

Sie sehen, durch die Wahl eines Auschnittes können wir das Bild schon beträchtlich verkleinern. Die Vorteile liegen auf der Hand: Zum einem zeigen wir das Wesentliche eines Bildes. Zum anderen bleiben uns bei der weiteren Verkleinerung Details des Bildes erhalten. Oder anders ausgedrückt, wir können das Bild noch kleiner machen und verringern gleichzeitg die Gefahr, daß das Motiv nicht mehr erkennbar wird. Jetzt fragen Sie natürlich, wie man den gewählten Ausschnitt zuschneiden kann. Nichts einfacher als das. Im Hauptmenü finden Sie unter "Bearbeiten" den Befehl "Zuschneiden". Ein Klick darauf reicht und schon hat das Bild die ausgewählte Größe.

Das zugeschnittene Bild

Nun kommt es sicher oft vor, daß man mit dem gewählten Ausschnitt nicht zufrieden ist. Das ist kein Beinbruch, denn PhotoImpact erlaubt es glücklicherweise, die Befehle rückgängig zu machen. Schauen Sie im Haupmenü unter "Bearbeiten". Dort finden Sie den Befehl "Rückgängig: Vorheriges". Legen Sie einfach den Mauszeiger darauf. Es erscheint eine Liste der Befehle, die rückgängig gemacht werden können. Ganz oben in der Liste ist der letzte von Ihnen gewählte Befehl, nämlich "Zuschneiden". Ein Klick reicht und Sie haben Ihr Ursprungsbild zurück. Sie können den Befehl "Rückgängig" aber auch über die "Standardleiste" aktivieren. Das Bild zeigt Ihnen das dazugehörige Piktogramm. Ein Tip am Rande: Achten Sie bei der Wahl des Ausschnitts darauf, Kontraste im Bild nicht ganz wegzuschneiden. Ich habe bei der Auswahl ganz bewußt einen Teil des Himmels mit hineingenommen. Das macht aus dem Thumbnail am Ende ein ansprechenderes Bild, eben weil es kontrastreicher ist. Haben Sie sich nun für einen Ausschnitt entschieden, speichern Sie das Bild unter einem anderen Namen ab: Klicken Sie im Haupmenü auf "Datei" und dann auf den Befehl "Speichern unter". Wählen Sie einen angemessenen Namen und klicken danach auf die Schaltfläche "Speichern". Standardmässig werden die Bilder im BMP-Format abgespeichert. Das ist zwar kein Grafikformat für das Internet, aber es wird von allen Grafikprogrammen gelesen. Die Größe machts! Wir sind nun soweit, um die Größe des Thumbnails einzustellen. Verlassen Sie sich dabei aber nicht auf die erstbeste Größe. Schließlich wollen Sie mit dem Vorschaubild neugierig auf das Foto machen. Deshalb ist auch hier experimentieren mit mehreren Entwürfen angesagt. Die Aufgabe ist, drei Thumbnails in verschiedenen Größen zu erstellen. Verdoppeln Sie dafür das Bild, indem Sie auf "Bearbeiten" im Hauptmenü klicken, dann den Mauszeiger auf "Verdoppeln" legen und folgend auf "Nur Basisbild" klicken. So können Sie komfortabel beliebig oft Ihr Bild duplizieren, so daß Sie genügend Versuchsobjekte zur Verfügung haben. Die Größe eines Bildes ändern Sie folgendermaßen. Unter "Format" im Hauptmenü gibt es den Befehl "Abmessungen". Ein Klick und es erscheint folgendes Fenster:

Die Abmessungen eines Bildes einstellen.

In dem Bereich "Neues Bild" ist der Radionbutton "Frei" bereits aktiviert. Darunter steht "B/H-Verh. wahren". Das bedeutet, daß das Breite-Höhe-Verhältnis des Bildes erhalten bleibt, wenn Sie z.B. lediglich den Wert der Breite ändern (der Wert der Höhe wird dann automatisch angepaßt). In dem Kästchen daneben muß ein Häkchen sein. Darunter finden Sie dann "Einheit", dort können Sie zwischen "Prozent" und "Pixel" wählen, wenn Sie auf den nach unten zeigenden Pfeil klicken. Wählen Sie Pixel und tragen dann einfach einen neuen Wert ein! Für die unten aufgeführten drei Bilder habe ich die Breitenmaße von 140, 100 und 60 Pixel gewählt.

Die große Grafik schon zu groß für ein Thumbnail, die kleine schon nicht mehr brauchbar.

Sie sehen, die Qualität der Bilder nimmt beträchtlich ab. Das mittlere ist aber noch akzeptabel und unten sehen Sie, wie es als JPG optimiert und mit einem Schatten unterlegt, aussehen kann. Dazu in den folgenden Lektionen mehr. Zum Abschluß dieser Übung: Klicken Sie einmal auf das Thumbnail unten. Ein neues Fenster öffnet sich (JavaScript muss aktiviert sein). Das Vorschaubild ist hier auf schwarzem Hintergrund plaziert. Das soll zeigen, daß die Hintergrundfarbe einen beträchtlichen Einfluß auf die Wirkung eines Bildes hat. Es ist im Vorfeld jeder Optimierung von Bildern unbedingt notwendig, sich über die Hintergrundfarbe im Klaren zu sein. Auch dazu in den folgenden Lektionen mehr Informationen.