In 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:
- 3 unterschiedliche JPG Bilder mit den exakten Maßen, wie sie dargestellt werden sollen
- 1 JPG Bild, welches für alle 3 dargestellten Bilder verfügbar ist, hierbei 2x vom Browser skaliert wird
- 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 |
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 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.
