 Imgages in HTML-Dokumenten
Eingebundene Images möchte man für das Web möglichst optimal aufbereiten. Das heißt sich auf einen Kompromiss zwischen Schnelligkeit (Ladezeit) und Qualität einlassen zu müssen. Abhängig vom Thema ist das natürlich unterschiedlich.
Bei einer Grafik die aus nur wenigen Farben besteht (Clipart) können sie die Dateigröße häufig reduzieren, wenn sie als GIF-Datei abgespeichert wird. Das trifft vor allem dann zu, wenn große Bereiche des Bildes einfarbig sind.
- Cliparts immer als GIF-Images speichern
- Fotos in der Regel als JPG-Dateien
- Völlig ungeeignet sind BMP-Dateien
 Bildformate
Ladezeit verringern
Eine große Anzahl von Bildern innerhalb einer Seite verlängert die Ladezeit enorm. Ignoranz und die Schutzbehauptung 'heute hat jeder DSL' ist keine Ausrede für einen guten Webmaster. Es ist sehr störend 50 großformatige Bilder laden zu müssen (die man nicht unbedingt alle sehen möchte) um eigentlich einen Sportbericht zu lesen.
Optimal wäre bei einer großen Anzahl von Fotos eine Einbindung der Images als Thumbnails (Daumennagel-große Bilder) die viel kleinere Dateigrößen haben und auf Wunsch vergrößert angezeigt werden können. Die Seite ist rasch geladen und der Seitenbesucher entscheidet selbst, auf welches Bild er gerne warten möchte.
Script: Siehe PopUp-Window in Bildgröße, Menü Bilder
Grafiken verkleinern
Ihr selbst geknipstes Foto mit einer Digitalkamera werden sie nicht ohne Bearbeitung in eine HTML-Seite einbinden. Sebst bei einem Format von 1280 x 960 würde das jede Seite sprengen. Natürlich könnten sie den Editor anlügen und falsche Größenwerte von 400 x 300 Pixel eintragen. Ihr Besucher sieht dann zwar eine um 69 % kleinere Grafik, läd aber die große Datei von mehr als 1 MB.
 Webmaster die so etwas machen kommen in die Hölle!
bevor mich jemand abmahnt: DAS IST EIN SCHERZ !
Für eine Vorschau verwende oft Thumbnails in der Größe zwischen 100 und 200 Pixel. Die Thumbnail-Grafik dient als Verweis zum Öffnen der Großansicht. Wenn sie den Rand für das kleine Bild auf 1 stellen (border="1"), erscheint die Rahmenfarbe in der Farbe für Links, die als Attribut im BODY-Tag festgelegt wurde (link , aktiv , visited). CSS-Anweisungen können andere Farbwerte Festlegen.
Fehlerverhalten Image-Randfarbe Randformatierung mit CSS
Bei der Herstellung ihrer Vorschaubilder (als Mini-Kopie des Originals) achten sie natürlich auf die Proportionen. Die Seitenverhältnisse sollten gleich sein, wenn nach der Änderung das Bild nicht verzerrt erscheinen soll!
 Der Verkleinerungswert bezieht sich natürlich auf die Seitenverhältnisse nicht auf die Fläche oder die Dateigröße!
Zur Berechnung der Seitenverhältnisse habe ich ein Script erstellt:
proportionale-gleichung
Größe der Grafiken / Fotos
Für die optimale Größe gibt es kein Universal-Rezept. Abhängig vom Thema der Seite möchte man bei einer Fotoshow seiner Werke natürlich auch Fotos in entsprechender Größe und guter Qualität darstellen. Für die meisten Anwendungen kann man allerdings Abstriche machen.
Wird ein Foto auf die halbe Größe reduziert bedeutet das:
- das Foto hat nur 1/4 der Bildfläche
- daraus resultiert oft 1/4 der Dateigröße
- und nur ca. 1/4 der Ladezeit.
Programme zur Verkleinerung / Bearbeitung von Grafiken
Einige Programme zur Bildbearbeitung bieten die Option eine Grafik für das Web optimiert zu speichern. Aber auch mit einfachen Werkzeigen erreicht man gute Resultate. Suchen sie im Netz nach geeigneten Freeware-Programmen!
|
JPEG Resampler
|
(Freeware)
|
Info 
|
| ThumbsPlus | (Freeware) | - |
| PICASA | (kostenlos) | picasa.google.de |
| ACDSee | ist hervorragend geeignet | - |
| PhotoShop | ist schon Luxus | - |
Bildansichten - Bemerkungen
| Größe |
Wegen der Ladezeiten nicht zu riesig. Maximal 400 Pixel an der längsten Kante je nach Hoch- oder Querformat.
Ich versuche bei 400 x 300 Pixel Größe 20 kB nicht zu überschreiten.
|
| Qualität |
Falls sie ein entsprechendes Programm haben (geht auch mit Freeware-Programmen)
die Bildqualität beim Speichern zwischen 40 und 60 % einstellen.
|
| Farben |
JPG´s können mit bis zu 16,7 Mio Farben dargestellt werden. Versuchen sie doch, ob die Qualität stark leidet wenn die Anzahl der Farben auf 256 reduziert wird.
Speicheren sie einmal 2 Versionen (natürlich unter anderem Namen) und vergleichen Qualität und Dateigröße.
|
| Tipps |
Stecken sie alle Fotos der Übersicht halber in einen Unterordner
Beim Abspeichern am Besten alle Dateinamen und -erweiterungen klein schreiben, dann gibt es weniger Ärger. Unix-Server machen einen Unterschied wenn z.B. das Bild 'Schiedsrichter.jpg' heißt und später 'schiedsrichter.jpg' aufgerufen wird: Bild nicht gefunden!
Beim Test auf der Festplatte funktioniert das immer, nur online nicht mehr.
Damit sie die Übersicht behalten können sie die Dateien mit aussagekräftigen Namen abspeichern.
Beispiel: sky00-100-75-255.jpg
(100 x 75 Pixel , Farbtiefe 255 Farben)
|
| Vorgehen |
beim Verkleinern der Grafiken
- eingelesenes Foto einstellen (Helligkeit, Kontrast, usw.)
Günstig ist eine etwas hellere Einstellung (ca. 8 %), wenn das Bild später verkleinert werden soll. Nach dem Verkleinern hat man dann das bessere Resultat.
- auf entsprechende Größe verkleinern
- gegebenenfalls Schärfe verändern (mit Photoshop 'unscharf maskieren')
Konturen werden betonter als das restliche Bild
- speichern
Für eine Galerie mit Bildvorschau wiederholt sich der Vorgang
- Minibild herstellen
- speichern
|
| Beispiel |
sky00-240-180-24b.jpg
240 x 180 pixel , Farbtiefe 24 bits , 10 kB , Qualität 60%
|
| Beispiel |
sky00-240-180-255.jpg
240 x 180 pixel , Farbtiefe 255 Farben , 8 kB , Qualität 40%
|
| Beispiel |
sky00-100-75-255.jpg
100 x 75 pixel , Farbtiefe 255 Farben , 2,3 kB , Qualität 40%
|
| Beispiel |
sky00-240-180-255grau.jpg
240 x 180 pixel , Farbtiefe 255 Grautöne, 7 kB , Qualität 40%
|
|
Home
ZURÜCK ;)
;)
;)
;)
