Lea SchäferhundIn den vergangenen Tagen habe ich diverse Versuche mit 3 unterschiedlichen Einbindungsarten von Bildern auf Webseiten gemacht.

Das Szenario war die Darstellung von 3 identischen Bildern, in meinem Fall unsere weiße Schäferhündin Lea, auf einer Webseite, welche jedoch unterschiedliche Bildmaße haben sollen.

 

Dabei habe ich folgende Szenarien festgelegt:

  1. 3 unterschiedliche JPG Bilder mit den exakten Maßen, wie sie dargestellt werden sollen
  2. 1 JPG Bild, welches für alle 3 dargestellten Bilder verfügbar ist, hierbei 2x vom Browser skaliert wird
  3. 1 JPG Bild, welches alle 3 Bilder in einem horizontal angelegt beinhaltet. Per CSS wird an der entsprechenden Stelle der Homepage das Hintergrundbild verschoben

 

Es wurde für jedes Szenario eine HTML Datei erstellt, welche auch aus der folgenden Tabelle verlinkt sind. Die Tests könnt Ihr jederzeit eigenständig reproduzieren. Natürlich werden die Werte je nach eurer Internetverbindung mehr oder weniger abweichen.

 

Variante 1 2 3
 

3 unterschiedliche JPG Bilder
HTML Darstellung der originalen Größen

1 größtes JPG Bild
Original Darstellung des größten Bildes
2 weitere vom Browser skaliert
1 JPG Bild beinhaltet alle 3 Bilder
Alle Bilder als Hintergrundbild in Ebenen per CSS verschoben
 Dateigrößen

Bild 1000px = 962KB
Bild 500px = 287KB
Bild 250px = 88KB

Bild 1000px = 962KB Gemischtest Bild = 1,3MB
 Test URL http://mytec-blog.de/articles/38/ladezeit-1.html http://mytec-blog.de/articles/38/ladezeit-2.html http://mytec-blog.de/articles/38/ladezeit-3.html 


Der erste Test wurde mit einer sehr geringen Smartphone Edge Verbindung durchgeführt und ist vermutlich am aussagekräftigsten.

Smartphone Edge Verbindung mit leerem Cache
Test 1 [s] 6,27 3,46 4,20
Test 2 [s] 5,31 2,33 6,01
Test 3 [s] 2,59 2,20 3,37
Test 4 [s] 3,19 2,41 2,76
Test 5 [s] 4,65 2,09 2,96
Mittel [s] 4,41 2,50 3,86
Smartphone Edge Verbindung mit gecachten Bildern
Test 1 [s] 2,96 1,25 0,86
Test 2 [s] 2,29 0,62 3,64
Test 3 [s] 0,79 2,76 0,74
Test 4 [s] 0,85 0,59 0,80
Test 5 [s] 1,62 0,66 0,61
Mittel [s] 1,70 1,18 1,33


Im zweiten Test war ich an einer 25MBit VDSL Leitung, welche natürlich deutlich schneller war, jedoch grundsätzlich die Ergebnisse des ersten Tests belegten.

VDSL Verbindung mit leerem Cache
Test 1 [s] 0,68 0,53 0,60
Test 2 [s] 0,6 0,52 0,61
Test 3 [s] 0,56 0,53 0,58
Test 4 [s] 0,56 0,50 0,61
Test 5 [s] 0,55 0,52 0,58
Mittel [s] 0,59 0,52 0,60
VDSL Verbindung mit gecachten Bildern
Test 1 [s] 0,18 0,13 0,11
Test 2 [s] 0,23 0,12 0,14
Test 3 [s] 0,16 0,10 0,13
Test 4 [s] 0,17 0,09 0,12
Test 5 [s] 0,15 0,09 0,11
Mittel [s] 0,18 0,11 0,12


Zusammenfassend kann somit folgende Aussage aufgestellt werden.
In diesem Fall war Variante 2 die optimalste Variante. Der Server erhielt lediglich eine Anfrage eines Bildes. Das Gesamtvolumen ist bei dieser Variante von allen 3 auch am geringsten.
An zweiter Stelle kam die Variante 3. Vom Ladevolumen ist sie zwar beinahe identisch der Variante 1, jedoch erhält auch hier der Server lediglich eine Bildanfrage.


Ich hoffe ich konnte mit dem Test dem ein oder anderen im WWW der sich eventuell die gleiche Frage stellt beantworten.

 

Kommentar schreiben
Ich habe den Datenschutz gelesen. Ich stimme zu, dass meine Angaben und Daten zur elektronisch erhoben und gespeichert werden. Alternativ kann ich als Namen auch ein Pseudonym eintragen. Hinweis: Sie können Ihre Einwilligung jederzeit für die Zukunft per E-Mail an widerrufen.

JooWI Online

JooWI Online Warenwirtschaft

JooWI ist eine auf Joomla basierende Warenwirtschafts Anwendung.
Weitere Infos auf der Projekthomepage.

Bestellen Sie noch heute die 30 Tage GRATIS Ultimate Version!

Follow Me

Web: medialekt.de

Mail: