Einfache und nützliche Tipps für den "Selbstvollender" - Teil 3

Aufbereitung und Nachbearbeitung von Bildern für Websites

Die für die Darstellung auf Websites einsetzbaren Bitmaps (Pixel-Grafiken) sind im Gegensatz zu den Vektor-Grafiken nicht frei skalierbar. Möchte der Webdesigner die Abmessungen eines Großformat-Bildes ohne Qualitätsverlust verkleinern, dann muss das Bild mit einer speziellen Grafiksoftware neu "berechnet" werden.

Als Grafiksoftware, die für derartige Zwecke vollkommen ausreichend ist, wurde (stellvertretend für viele andere sehr gute und kostenlose Programme) das geniale Tool "IrfanView" von Irfan Skiljan ausgewählt. Irfanview in der aktuellen Version können Sie z.B. hier kostenlos herunterladen.

Typisches Problem: Eine mit einer Digital-Kamera aufgenommene Originalgrafik wird als Bild, das nur bei den width- und height-Attributen des image-Tags verkleinert wurde, in eine Webseite "gequetscht" und dadurch verzerrt oder unscharf präsentiert.

Lösung: Mit IrfanView lässt sich eine übergroße Original-Grafik nahezu ohne Qualitätsverlust auf für die Präsentation im Internet geeignete Bildmaße unter gleichzeitiger Verringerung der Dateigröße verkleinern.

1. Das übergroße Bild - im Beispiel eine jpg-Datei der Größe 640x485 Pixel - über den Befehl "Datei" öffnen .

2. Über Menü-Befehl "Bild" die Größe ändern .

3. Gewünschte Größe eingeben, Häkchen bei "Proportional" setzen (als Bildschirmauflösung kann man B. 72 DPI bzw. maximal 96 DPI eingeben) und auf "OK" klicken .

4. Die verkleinerte Grafik ggfs. über den Menü-Befehl "Schärfen" (s. Bild oben) Nachschärfen und über den Menü-Befehl "Datei, Speichern unter" unter einem neuen Namen als jpg-Datei in das gewünschte Verzeichnis abspeichern.

5. Bei Bedarf kann die verkleinerte Grafik nach Aufziehen eines passenden Rahmens mit der Maus über den Menü-Befehl "Bearbeiten, Freistellen" (s. Bild unten) zugeschnitten werden, wobei nicht mehr benötigte Bereiche um das Zentrum des Bildes entfernt werden.

Das Bild unten resultiert durch Freistellen des zentralen Bereichs im Bild oben.

Fortsetzung => Teil 5: Erstellung der Thumbnails für Bildergalerien

zurück zu Teil 2 | zurück zu Teil 1