Zu viele Bilder auf einer Website?
Servus,
ich mal wieder.
ich schreibe eine kleine Website für meine Verwandten die Ferienwohnungen betreiben. Das Ziel ist es, dass alle Bilder auf einer Seite erreichbar sind.
Deshalb habe ich ein paar slider angelegt die wie folgt aussehen:
und wenn man dann auf ein Bild klickt öffnet sich ein modal, in dem mehre Punkt sind und wieder ein slider.
Nun dieser aufbau führt dazu dass ich etwa 220 Bilder auf meiner Index Seite habe. Ich bekomme die Bilder maximal auf 100 kb klein gedrückt, was sie schon sehr pixelig macht, entweder verkleinere ich falsch oder ich weiß auch nicht.
Naja das führt dazu das ich an den Client natürlich zuviel Daten (>2mb) sende was zu einer viel zu hohen Ladezeit führt.
Hat jemand einen Rat was ich machen kann?
5 Antworten
Nun dieser aufbau führt dazu dass ich etwa 220 Bilder auf meiner Index Seite habe.
das ist Unsinn. Teile die Bilder in verschiedene Kategorien auf. Zum Beispiel
- Außenansichten
- Innenansichten
- Garten
- Umgebung
Der Slider auf der Startseite beinhaltet insgesamt 4 Bilder; aus jeder Kategorie das beste "Stellvertreterbild". Dann baust Du unter dem Slider 4 Thumbnails, die zu den einzelnen Kategorien führen:
<figure>
<img src="aussen-thumb.jpg" alt="Aussenansicht">
<figcaption>Das Haus von außen</figcaption>
</figure>
<figure>
<img src="innen-thumb.jpg" alt="Innenansicht">
<figcaption>Das Haus von innen</figcaption>
</figure>
...
Ist der User auf eine der Kategorie-Seiten (z. B. "Innenansichten"), findet er dort einen Slider mit 6 Bildern; das jeweils beste aus der Kategorie
- Schlafzimmer
- Wohnzimmer
- Küche
- Korridor
- Bad
- Kinderzimmer
Dann baust Du unter diesem Slider 6 Thumbnails, die zu den einzelnen Kategorien führen. So kannst Du immer detailliertere Slider oder Bildergalerien bieten, ohne dass die Ladezeit darunter leidet. Und der Interessent muss nur auf die Ladezeit der Bilder der Kategorien warten, die ihn wirklich interessieren und nicht auf die anderen 180 Bilder.
Das verkürzt die Ladezeit, was ein positives Nutzersignal ist, was ein Pluspunkt bei google ist, wodurch sich das Ranking verbessert, wodurch der Umsatz steigt.
Alex
Ja da hast du recht. Ist meine erste Seite die ich schreibe, bin aber schon am tüfflteln wie ich umstrukturiere, danke für deinen Input.
Zum einen könntest du dir Bilder verzögert laden lassen. Aber warum verwedest du nicht mehrere Seiten.
Ab man sich auf einer Seite durch mehrere Alpen klickt oder durch verschiedene Seiten ist den User doch gleich.
Macht das Handling der Seite einfacher.
Und du solltest auch an Suchmaschinen denken. Seiten die zu lange laden wer den nicht vorne bei der Suche angezeigt.
SEO ist immer wichtig bei solchen seiten.
Wenn Du dermaßen viele Bilder auf eine Seite bringst überforderst Du jeden Gast.
Die Ferienwohnungen dürften wohl eher nicht in einem Haus sein... anderenfalls dürften ein Paar repräsentative Fotos genügen.
Ergo lege für jedes Objekt eine separate Seite an, welche, meinetwegen, über einen Slider mit jeweils einem Außenfoto repräsentiert wird . Der Begleittext erscheint unter dem Slider dynamisch passend zum zentralen Bild.
Beim Klick auf die jeweilige Außenansicht verzweigt Du auf eine Seite mit einigen Infos zum Inneren des Objekts.
Das ganze schont den Trafic und die Nerven des Besuchers.
Kleine appetitlich Happen, als Besucher möchte ich nicht erschlagen werden.
Stell Dir vor Du kämst mich besuchen und ich würde, kaum das du meine Wohnung betrittst, Dir den Inhalt meines Kühlschranks vor die Füße schütten. Nicht genug damit beschreibe ich Dir die Inhaltsstoffe jedes einzelnen Nahrungsmittels und Mixe Dir auch noch alle Getränke, zu meinem "AllesSpezial" . Ganz nebenbei bekommst Du auch noch meine Familiensaga erzählt und eine Diashow zu den Sehenswürdigkeiten meines Gartens (inklusive Herkunft jedes Gartenzwergs)
Ich denke Du würdest schreiend davonlaufen
Genau das tust Du mit Deinen Vielen Bildern auf einer Seite...
- Gestalte dein Projekt sparsamer.
- Setze Prioritäten.
Immerhin kannst Du eine Seite anbieten , wo der Besucher in guter alter Kacheloptik einfach in 200 Bildern stöbern kann. (Backlinks nicht vergessen)
Hat jemand einen Rat was ich machen kann?
Bilder erst bei Bedarf nachladen. Was der Besucher nicht zu sehen wünscht, muß man ja nicht durch die Leitung jagen.
Hmm das kann ich wahrscheinlich mit Ajax machen? Habe noch nie mit Ajax gearbeitet oder wie geht das?
Zuerst einmal zwei Links:
https://www.walterlernt.ch/2017/10/14/slider-website/
https://www.contentconsultants.de/blog/webdesign-slider-sind-out-weg-damit/
Ja aber...
Stimmt. In der Tourismus-Branche gehören zahlreiche Bilder immer noch dazu.
220 Bilder laden deutlich langsamer als vier große Bilder mit demselben Inhalt.
Du könntest Slider aus "Sprite Sheets" basteln, also quasi ein "langes" Bild aus 50 hintereinander geklebten Einzelbildern, welche horizontal verschoben werden. https://wiki.selfhtml.org/wiki/CSS/Tutorials/Hintergrund/Sprites
Deshalb schreibe ich ja würde es gerne für den erst uploade wenigstens auf 2000ms schaffen und mit den Patch dann auf <= 1000ms
Ich denke ich schau mal ob ich da Ajax was machen kann und nehme mich dann ggf. dem mal an nen neues Layout zu gestalten. Muss dann nur meine Familie davon überzeugen.
200 bilder? Könntest du uns erklären wie die sich denn zusammensetzten?
Besteht die ganze oberfläche nur aus bildern?
Nun ich habe 27 image slider auf der index seite. 21 davon sind modal content. pro image slider habe ich zwischen 3 bis 12 bilder
nun wir haben auf der seite 6 Hauptpunkte. Informationen, Apartments, Zimmer, Aktivitäten im Sommer, Aktivitäten im Winter, Atktivitäten ganzjährig. Dahinter verbirgt sich immer ein pop up mit verschiedenen Punkten. Das modal kannst du in meinem Post sehen. Und zu jedem unterpunkt zeige ich bsp Bilder.
Nun es war der Wunsch das alles auf einer Seite ist. Ich sehe du hat da einen guten Punkt und ähnliche Diskussion hatte ich schon mit meinen Verwandten. Aber da die halt der Auftragsgeber sind und es sich so gewünscht haben habe ich versucht es so gut wie möglich umzusetzen. Ansich sieht man der seite die 200er+ Bilder auch nicht an.