Bilder laden

[Klimbo]

Hallo zusammen,
vermutlich eine relativ dumme Frage, aber ich bin mir nicht sicher was sinnig ist.

Ich habe eine Seite auf der recht viele Bilder angezeigt wird.
Geschätzt dürften das im Maximun 250 - 300 Bilder sein.

Gibt es hier irgendeinen sinnvollen Weg die Bilder zu laden?
Was wäre das beste Usererlebnis?

Die Maßgabe:
– 250 - 300 Bilder
– LazyLoading nutze ich, bringt aber nichts da die alle Bilder gleichzeitig im Viewport sind
– Sprite ist keine Möglichkeit

Aktuell nutze ich die Bilder als Background und mache lazy-loading per lozad.js
Ich könnte sie aber auch über den normalen img-Tag nutzen.

Die Voraussetzung ist nicht optimal, das ist mir bewusst.
Dennoch: Was wäre hier der sinnigste Weg die Bilder zu laden?


P.S.: Code ist an dieser Stelle aus meiner Sicht unsinnig. Ist ja eher Konzeptfrage.

[kaminbausatz]

sind das Thumbnails oder wieso sind 250-300 Bilder gleichzeitig im Viewport?

[Klimbo]

Sind im Prinzip Thumbnails, ja.

Im Endeffekt wird mit dem "Programm" ein Print-Objekt (z.B. ein Magazin/Zeitung( organsierit.
Sprich: Ich bilde alle Seiten eines Projektes ab – Und das macht eben nur Sinn wenn ich alle Seiten des Print-Objekts auf einmal sehe.


Edit: Die Bilder die ich dann lade, sind also verhältnismäßig klein.
Aktuell hab ich da etwas zwischen 15 und 60 KB.
Würde sicher noch etwas kleiner gehen.

Die Maße machts einfach ...

[protestix]

Lade die Bilder einfach per image-Tag. Die heutigen Browser schaffen durchschnittlich 8 requests gleichzeitig. Das macht dann bei 300 Bilder 37,5 sequentielle Aufrufe. Wenn ein Bild nach 10 ms im Speicher des Browsers ist, dann ist das in weniger als 1 Sekunde erledigt. Hier ist dann hat die Verbindung und die Antwortzeit des Servers der Flaschenhals. Aber selbst wenn es 2 Sekunden dauert ist das noch zu verkraften.
Bei jpeg und 200x200 px sollte ein Wert unter 10 KByte pro Bild noch gute Ergebnisse auf der Mattscheibe bringen. Für Print nimmst du dann eine bessere Auflösung.

Lazyloading und dergleichen halte ich nur bei grossen Bildern für sinnvoll.

Die Maße machts einfach ...

Du meinst wohl Masse

[Klimbo]

Lade die Bilder einfach per image-Tag. Die heutigen Browser schaffen durchschnittlich 8 requests gleichzeitig. Das macht dann bei 300 Bilder 37,5 sequentielle Aufrufe. Wenn ein Bild nach 10 ms im Speicher des Browsers ist, dann ist das in weniger als 1 Sekunde erledigt. Hier ist dann hat die Verbindung und die Antwortzeit des Servers der Flaschenhals. Aber selbst wenn es 2 Sekunden dauert ist das noch zu verkraften.
Bei jpeg und 200x200 px sollte ein Wert unter 10 KByte pro Bild noch gute Ergebnisse auf der Mattscheibe bringen. Für Print nimmst du dann eine bessere Auflösung.

Klingt sinnig, danke

Du meinst wohl Masse

Es war aber auch wirklich warm gestern ...