Webdesign-Tutorial:
Bilder für die Homepage aufbereiten:
In diesem Tutorial geht es darum, wie man mit einfachen Mitteln, Bilder für die eigene Webseite aufbereiten kann. Selbst heutzutage sind noch viele Benutzer mit analogen Modems im Internet, nicht immer ist auch bei Breitbandnutzern die volle Bandbreite da. Auch Nutzer von WLAN, PDA und Handy haben meist eingeschränkte Übertragungsraten oder werden nach übertragenen Datenvolumen berechnet, so dass es viele Gründe gibt die eigenen Webseiten mal zu durchleuchten, wo denn der Flaschenhals steckt.
Oft sind es überdimensionierte Grafiken, falsch komprimierte Grafiken oder eine falsche Strategie des Webseiten-Betreibers, wie die Web-Dokumente aufgebaut sind oder eine Kombination von alledem.
Mit Hilfe der Freeware "Irfanview", einem sehr schnellen und kostenlosen Bildbetrachter, lässt sich eine Optimierung einzelner Grafiken sehr einfach durchführen.
Schritt 1: Öffnen des gewünschten Bildes
Wir starten Irfanview und wählen aus dem Menü "Datei >> Öffnen". Daraufhin suchen wir die Bilddatei in der Verzeichnisstruktur unseres Rechners, wählen diese aus und bestätigen mit "Öffnen". Daraufhin wird das Bild angezeigt.
Schritt 2: Ausschnitt wählen
Dieser Schritt ist optional, wenn nur ein bestimmter Ausschnitt von Interesse ist. Der Ausschnitt wird mit der Maus aufgezogen, indem wir in das Bild klicken und gleichzeitig in eine Richtung ziehen, um ein Rechteck/Rahmen aufzuspannen. Der Befehl im Menü "Bearbeiten >> Freistellen" schneidet die nicht benötigten Flächen weg.
Schritt 3: Kontrast & Helligkeit anpassen
Jetzt lassen sich noch Kontrast, Helligkeit und alle anderen Filter einstellen. Diese Techniken sollten bekannt sein und werden in diesem Tutorial nicht weiter behandelt.
Schritt 4: Bildgröße anpassen
Ein wichtiger Punkt ist die Bildgröße. Man sollte bedenken, wie groß das Bild auf einer Webseite erscheinen soll. Im Internet gibt es viele verschiedene Bildschirmauflösungen, von Handydisplays über PDAs, TV-Bildschirmen, PC-Monitoren bis zu großen Multidisplays.
Standardauflöungen (Stand Okt 2004, Quelle Webhits.de)
1024 x 768 (61,2%)
1280 x 1024 (20,5%)
800 x 600 (7,5%)
1152 x 864 (5,7%)
1600 x 1200 (2,0%)
andere (3,1%)
Angenommen unser Bild wird mitten auf eine Webseite platziert und wir berücksichtigen
800x600er Auflöungen, so sollten die Bilddimensionen natürlich kleiner
als dieser Wert sein. In Irfanview im Menü "Bild >> Größe" ändern
können wir unter "Neue Größe" die Bilddimensionen
eingeben, z.B. Breite 600. Die neue Höhe errechnet sich automatisch (Häkchen
bei "proportional").
Die Bildgröße sollten ihrem Zweck entsprechend gewählt werden.
Aber hier kann richtig viel an der Dateigröße gespart werden.
Schritt 5: Bild speichern
Fotografien sollten i.d.R. im "jpg-Format", Skizzen, Buttons und Bilder mit hohen Anteilen an gleichfarbigen Flächen im "gif-Format" abgespeichert werden.
Beim Speichern mit "Datei >> Speichern unter" wird als Dateityp "JPG
- JPEG Dateien" oder "GIF Compuserve GIF" gewählt. Neben
dem "Speichern als..."-Dialogfenster befindet sich ein Optionsfenster
(JPEG/GIF save options), in dem unter "save quality" die Komprimierung
eingestellt werden kann (gilt nur für JPG-Formate). Ein hoher Wert (90-100)
steht für niedrige Komprimierung, hohe Qualität und eine größere
Datei, ein geringerer Wert gerade umgekehrt. Ein Wert zwischen 60 und 70 sollte
für die meisten Fotos ausreichend sein. Bei Online-Shops wird oft Wert
auf ein Produktbild gelegt, dort sollte man die "save quality" etwas
höher stellen. Die für die eigenen Bedürfnisse richtigen Werte
müssen durchprobiert und anhand der Ergebnisse überprüft werden,
eine Vorschauoption gibt es leider nicht.
Keep original EXIF-Data sollte nicht angehakt werden, damit die Metadaten des
Bildes gelöscht werden (z.B. Blende und Belichtungszeit eines Fotos einer
Digitalkamera).
Den Dateiort ( = Verzeichnis = Ordner) können wir im Feld "Speichern",
sowie den Dateinamen im Feld "Dateiname" selbst bestimmen.
Tipps:
- Versuchen Sie die Bild-Dateigröße trotz guter Qualität der Bilder klein zu bekommen.
- Die Attribute width und height im img-Tag sollten den Pixelabmessungen des Bildes entsprechen.
- Die Summe aus Bilder und Text/ Quellcode einer Homepage sollten 40-50 kb nicht überschreiten.
- Bei Bildergalerien sollten Sie Thumbnails verwenden und auf die größeren Bilder verlinken. Thumbnails sind die gleichen Bilder mit wesentlich kleineren Abmessungen und damit wesentlich schneller als Vorschaubild ladbar. Oft sieht man Vorschaubilder, die die eigentlichen (großen) Bilder darstellen und nur mit dem img-Tag in HTML geschrumpft sind. Die Ladezeiten von solchen Seiten sind manchmal enorm hoch.
//©2004 by Gurkcity Webdesign - www.gurkcity.de
//Verwendung des Tutorials nur unter Angabe eines Links/ Querverweises auf www.gurkcity.de erlaubt