Hallo,
nachdem ich nun den grundsätzlichen Aufbau meiner website Ahnenforschung Paap / Startseite
fertig habe, möchte ich weitere Inhalte ergänzen, bei denen vermehrt auch Fotos bzw. scans dazu gehören (wie z.B. Ahnenforschung Paap / FamilienGeschichte / Familie Hassenklöver).
Da ich weiß, dass meine Zielgruppe nicht immer mit der neuesten Technik und bestem know-how bezüglich des Computers ausgerüstet ist und auch nicht überall DSL und flatrate zur Verfügung stehen, möchte ich die Ladezeiten der Seiten möglichst kurz halten.
Nun habe ich gelesen, man könnte die Bilder auch über CSS als Hintergrundbild in ein div verpacken, dadurch würde die Anzahl der http-requests verringert und die Ladegeschwindigkeit erhöht werden. Was ist davon zu halten?

Über Tipps würde ich mich freuen.
Gruß
Sabine

Was du meinst sind CSS Sprites: Verpacke alle deine Bilder in ein einziges großes Bild und positioniere es mit background-position. Siehe:

A List Apart: Articles: CSS Sprites: Image Slicing’s Kiss of Death

Das ganze ist durchaus empfehlenswert, da - wie du schon gesagt hast - die Zahl der HTTP-Anfragen je nach Anwendung deutlich reduziert werden kann. Nachteile entstehen natürlich in einer Situation, bei der CSS zwar ausgeschaltet ist, aber Bilder dennoch dargestellt werden sollen. Ich wage aber zu behaupten, dass so eine Situation in der Realität kaum vorkommt.

Inhaltsrelevante Daten (und auch Bilder) gehören ins Markup. Von daher finde ich die CSS-Methode eher schlecht. Ich weiß nicht, wie Screenreader Bilder wiedergeben (Alt- und Title-Attribut) aber ich glaube nicht, dass es sonderlich vorteilhaft ist.

Ich bin der Meinung, man sollte nicht am falschen Ende sparen. Vor einigen Jahren, als die Internetanbindungen um Weiten geringer waren, gestaltete man Seiten mit Tabellen und zerschnippelte "Hintergrundbilder" und legte sie in die Zellen der Tabelle. Da hat es auch niemanden gestört.

Mein Tipp: Speichere JPGs z.B. interlaced und lege sie als <img> ins Markup. Somit sieht der User schonmal etwas, wärend die Seite läd. Deine Serveranfragen bleiben zwar oben aber das sehe ich nicht als Argument, um alle Bilder ins CSS zu packen.

für mich gehören nur reine gestaltungselemente ins css. alle anderen bilder sind content und gehören somit ins markup.

__________________
Webdesign Portfolio Webdesign aus Berlin: Webdesign Portfolio Berlin
Referenzen Webdesign Berlin

Das Beispiel hat lediglich 11 HTTP Requests.
Hier wäre eine Performance-Optimierung eher bei einer Verkleinerung, Farbreduktion und weiteren Komprimierung der Bilder zu sehen. z.B. smush.it!

Guck dir im Firebug-Netzwerkmonitor an, wie die Dateien geladen werden.

Die CSS-Sprites bringen dann einen Vorteil, wenn man etwa zig verschiedene Icons, die überall auf einer Site benutzt werden, in ein Sprite packt, was bei jedem Seitenaufruf nur noch einmal aus dem Browsercache gezogen wird. Bei dir ist das nicht gegeben: du willst auf jeder Seite verschiedene Bilder zeigen, die zudem eine inhaltliche Aussage haben, nicht eine rein schmückende Funktion haben.

__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

Hallo,
dann werde ich mich mal ausgiebig mit den verschiedenen Grafikformaten und Möglichkeiten der Komprimierung beschäftigen.
Danke für die links und Hinweise.

Gruß von Sabine