Verwendung von Bilddateigrößen

[Ralf H.]

Wie geht ihr mit großen Bildern um beim Upload auf den Server?

Ich habe bisher immer große Bilder vor dem Upload auf den Server auf 688px Breite (ca. 100 KB) verkleinert .
688px passt genau in den mittleren Contetbereich meiner Page, sofern diese im Browser nicht skaliert wird.
Durch die dafür notwendige kleine Dateigröße von ca. 100 KB stelle ich mir vor, den Ladevorgang für User schnell und datenspeichernd zu gestallten.

Wenn ich für mehr Details größere Bilder benötige, verlinke ich die 688px Bilder auf breitere 1280px (ca. 200 KB) Bilder, wie z.B. auf dieser Unterseite.

Denke ich bezgl. Datenreduzierung durch meine Umsetzung für die User so eigentlich richtig?
Ich kann mir kaum vorstellen, dass sich viele Webmaster so viel Arbeit und Gedanken (evtl. unnütze) zur Datenreduzierung machen wie ich.

Wie handhabt ihr grosse Bilder von z.B. 4000px Breite (4 MB)?
Verkleinert ihr die Bilder, oder ladet sie z.B. aus der Digicam oder vom Smartphone direkt auf den Server?

lg,
Ralf

[frase]

Denke ich bezgl. Datenreduzierung durch meine Umsetzung für die User so eigentlich richtig?
Ich kann mir kaum vorstellen, dass sich viele Webmaster so viel Arbeit und Gedanken (evtl. unnütze) zur Datenreduzierung machen wie ich.

Da denkst du völlig richtig! Datenreduzierung kann nicht falsch sein.
Und wahrscheinlich beachten das auch die meisten Admins - bis auf wenige Ausnahmen.
Ob es in deinem konkreten Fall sinnvoll ist, die Bildbreite auf genau 688px zu stellen, bleibt fraglich. Wenn du mal dein Template wechselst/änderst, musst du evtl. alle Bilder neu machen. (Ein Fehler ist das aber nicht.)

Wenn ich für mehr Details größere Bilder benötige, verlinke ich die 688px Bilder auf breitere 1280px (ca. 200 KB) Bilder, wie z.B. auf dieser Unterseite.

Wie bereits hier erwähnt, erledigt die Foldergallery die Erstellung der kleineren Bilder automatisch für dich. Dabei wird ein "srcset" erstellt, wobei dem Browser je nach Viewport die passende Bildgröße angeboten wird. Die "großen" Bilder können durchaus auch mehr als 200 kB haben - da geht Detailtreue und Qualität vor.

Wie handhabt ihr grosse Bilder von z.B. 4000px Breite (4 MB)?
Verkleinert ihr die Bilder, oder ladet sie z.B. aus der Digicam oder vom Smartphone direkt auf den Server?

Direkt aus der Kamera - das mache ich meistens nicht. Da sind dann alle Metadaten drin (EXIF), die auch noch Platz beanspruchen und u.U. auch noch Datenschutz-relevant sind. Außerdem kommen die Bilder praktisch nie "webgerecht" aus der Kamera - die müssen fast immer nachbearbeitet werden.
Wenn du bestimmte Details zeigen möchtest (Reparaturstellen), dann können 4000px Breite (oder mehr) auch mal gerechtfertigt sein - wer sich interesssiert, wird die "groß"Ansicht wählen - wer nicht, der lädt nur die kleinere Version. Beim Erstaufruf der Seite wird immer nur die "kleine" Version geladen - also alles gut.

[Ralf H.]

Denke ich bezgl. Datenreduzierung durch meine Umsetzung für die User so eigentlich richtig?
Ich kann mir kaum vorstellen, dass sich viele Webmaster so viel Arbeit und Gedanken (evtl. unnütze) zur Datenreduzierung machen wie ich.

Da denkst du völlig richtig! Datenreduzierung kann nicht falsch sein.
Und wahrscheinlich beachten das auch die meisten Admins - bis auf wenige Ausnahmen.

Danke für die Info. Hatte ich nicht erwartet.

Direkt aus der Kamera - das mache ich meistens nicht. Da sind dann alle Metadaten drin (EXIF), die auch noch Platz beanspruchen und u.U. auch noch Datenschutz-relevant sind. Außerdem kommen die Bilder praktisch nie "webgerecht" aus der Kamera - die müssen fast immer nachbearbeitet werden.

Direkt aus der Cam meinte ich natürlich nur abgekürzt.
Ich bearbeite natürlich auch jedes Foto und entferne ebenfalls die Exifdaten (Datenschutz und Speicherreduzierung).

[cmb]

Wenn man es richtig gut lösen will, dann Stichwort "<picture> Element". Damit kann man unterschiedliche Bildformate verfügbar machen, und der Browser sucht sich ein möglichst passendes aus. Denn neuere Formate wie WebP oder gar AVIF/HEIF sind in der Lage, bessere Komprimierung bei gleicher Qualität zu bieten.

Wie groß die Bilder sein sollen, dafür kann man sicher keine allgemeinen Angaben machen. Eine oft sinnvolle Möglichkeit ist aber zunächst nur Thumbnails auszuliefern, und erst bei Bedarf das Vollformat.

Und progressive Komprimierung ist gut für die Darstellung großer Bilder.

Alles in allem ein recht komplexes Thema, das z.B. in https://images.guide/ ganz gut abgehandelt wird, denke ich.