Michael Hocke

information - technology - designer

Verkleinern Sie Bilder [z.B aus Ihrer Digitalkamera] auf Bildschirmgöße, bevor Sie diese auf Ihre Webseite hochladen, um eine optimale Anzeige zu gewährleisten, Bandbreite und Webspace zu sparen! Unschön und verwirrend wirken Bilder, die vom Browser verkleinert oder verzerrt angezeigt werden.

Adobe Photoshop bietet die Möglichkeit, Bilder schnell und einfach für die Darstellung auf Webseiten zu optimieren. Machen Sie Gebrauch davon - investieren Sie etwas mehr Arbeit für professionelle Ergebnisse!

Gerade bei Thumbnail-Bildchen (verkleinerte Vorschaubilder mit Link auf das große Foto) macht es wenig Sinn, ihr Foto einfach zu verkleinern.

So erhalten Sie nur eine zusammengeschobene Übersicht, in dem Details nicht mehr erkennbar sind. Vielmehr sollte das Vorschaubild das wesentliche Detail (z.B. Leute vor einer Landschaftskulisse) zeigen.

Für Thumbnails ist eine Kombination aus Ausschnitt und Verkleinerung sinnvoll.

Das Photoshop-eigene "Freistellungswerkzeug" ist hier hilfreich:

1. Finden Sie heraus, welche Größe das Bild/Foto auf Ihrer Webseite hat: Im Browser Ihrer Wahl klicken Sie mit der rechten Maustaste auf das Bild, welches Sie austauschen (bzw. für einen neuen Artikel verwenden) möchten. Wählen Sie aus dem Internet-Explorer-Kontextmenü den Eintrag "Eigenschaften". Dort finden Sie unter "Größen" (andere Browser: "Grafikeigenschaften") die genaue Bildgröße in Pixeln - Breite mal Höhe.
2. Öffnen Sie Photoshop und laden Sie das große Bild. Bearbeiten Sie Helligkeit und Kontrast nach Ihren Wünschen.
3. Sind Sie zufrieden mit dem Ergebnis, wählen Sie das "Freistellungswerkzeug" aus der Wekzeugleiste mit einem Klick darauf oder verwenden Sie zum Aufruf die Taste "C". Mit diesem Tool können Sie einen Bildausschnitt festlegen und diesen gleichzeitig auf eine gewünschte Größe bringen.
4. Bestimmen Sie die Zielgröße des Bildausschnitts: Tragen Sie die Werte für Breite und Höhe in die Felder der Werkzeugeigenschaften "Freistellungshöhe" und "Freistellungsbreite" (in unserem Beispiel: 260 mal 208 Pixel) ein. Diese Werkzeugleiste befindet sich oben, direkt unter "Datei, Eigenschaften ...".
5. Wählen Sie den Bildausschnitt: Klicken Sie mit gedrückter linker Maustaste ins Bild und ziehen mit gedrückter linker Maustaste bis Endpunkt ihres Ausschnitts. Sie sehen, dass das Breite-Höhe-Verhältnis der "Bildausschnitt-Vorschau" ihren Voreinstellungen entspricht. Sind Sie zufrieden mit dem Ausschnitt, lassen Sie die Maustaste los. Bereiche um Ihren "Bildausschnitt" werden abgedunkelt dargestellt. Die Ausschnitt-Position und Größe können Sie noch per Maus oder Cursortasten ändern, wie auch die Ausschnitt-Größe per "Anfasser" (das sind die vier Symbole an den Ecken).
6. schneiden Sie das Bild zu mit: rechte Maustaste » Eintrag: Freistellen oder Doppelklick linke Maustaste.
7. Schärfen Sie das Bild. Verkleinerte Bilder haben oft die Eigenschaft, unscharf zu sein. Verstärken Sie die Konturen ein wenig, indem Sie etwas Schärfe hinzufügen. Menü Filter » Scharfzeichnungsfilter » Unscharf maskieren. Für ein Bild der Größe 260 mal 208 Pixel sind die Werte Stärke:18, Radius: 1.7, Schwellenwert:1 ein Vorschlag.
8. Speichern Sie das Bild mit: Datei » für Web speichern. Wählen Sie jpg, png oder gif (je nachdem, wie viele Farben/Qualität ihr Endbild haben soll)
9. Benutzen Sie den Webeditor Ihrer Wahl, um das Bild in Ihre html/php/asp Webseite einzubinden und achten Sie darauf, dass Sie die Werte für Breite und Höhe (bzw. deren Verhältnis) nicht verändern.
10. Laden Sie Bild und html-Seite per FTP-Klient auf ihren Account und kontrollieren Sie das Ergebnis durch den Aufruf der Seite im Browser.