Eure Meinung zu Artworks, Fotos etc. hinsichtlich Dateigröße

[LeanderAT]

Wie ist eure Meinung zu Dateigrößen hinsichtlich Artworks, Hintergrundbildern, Fotos etc.?

Früher sollten sie ja nicht ins Gewicht fallen, damit die Seite schnell lädt und man auch nicht das Datenvolumen des Handys strapaziert.
Aber 2024?

Früher war das Hintergrundbild für 1920x1080 bei mir 300kb...jetzt habe ich einfach für Desktop und 3840x2160 eine 1MB-Datei. Zu groß? Oder egal?

Die mobilen Versionen sind natürlich kleiner...aber viele haben am Handy ja ohnein 10, 20, 30, 40 GB pro Monat Datenvolumen.

Wie viel darf eine Website insgesamt an Dateigrößen haben?

 

[ghecko]

Damit eine Seite snappy ist, sollten die Bilddateien schon so klein wie möglich sein. Also für die richtige Grafik das richtige Format und die richtige Kompression auswählen. Das meiste hält der Browser beim wiederholten Besuch zwar als Cache vor, aber muss ja trotzdem nicht sein. RAM ist gerade bei Handys nicht unbegrenzt verfügbar. Und Bandbreite im Netz in DE erst recht nicht.

 

[LeanderAT]

Danke für die Antwort. Aber bei den ganzen Sachen auf YouTube und Instagram sind ganz andere Dateigrößen im Spiel?

Ich hatte Qualität 100 gewählt...früher hatte ich 80...

Für 1920x1080 hat der Hintergrund 812 kb bei 100 Qualität (Corel Photopaint), 291 kb bei Qualität 90 und 203 kb bei Qualität 80.

 

[ghecko]

Aber bei den ganzen Sachen auf YouTube und Instagram sind ganz andere Dateigrößen im Spiel?

Mag sein, aber das sind bewegte Bilder, die werden nach und nach geladen und gebuffert. Wenn sich eine Seite hingegen nicht schnell aufbaut, das nervt die Leute die darauf zugreifen. Zumal man damit auch die eigene Auslastung erhöht und weniger User bedienen kann.

Für 1920x1080 hat der Hintergrund 812 kb

Kommt auch drauf an, was es für ein Hintergrund ist. Sind es Grafiken mit wenigen Farben und keinen Farbverläufen, erreicht man zb. mit png deutlich kleinere Dateigrößen, ganz ohne Qualitätsverlust.

 

[LeanderAT]

Danke. Ich vergleiche gerade die Bilder mit unterschiedlichen Komprimierungen. Wenn man eh nicht reinzoomed in ein Bild, sieht man eigentlich keinen Unterschied, hat aber eine viel kleinere Datei.

Also wieder alle zig Bilder neu abspeichern.

 

[pseudopseudonym]

Wie ist eure Meinung zu Dateigrößen hinsichtlich Artworks, Hintergrundbildern, Fotos etc.?

...dass die Webseitenersteller endlich mal raffen sollten, dass jeder morderne Browser Formate wie WebP unterstützt und man diese nutzen sollte, statt die Nutzer riesige PNGs laden zu lassen. An anderen Stellen wären auch SVGs oft vernünftiger.

Aber 2024?

2024 ist das Netz oft noch immer unterirdisch langsam. Gerade in Deutschland.

Ergänzung (14. Januar 2024)

erreicht man zb. mit png

Nein, bitte nicht! WebP oder bei ganz einfachen Verläufen SVG. SVG sieht dann auch bei extremen Zoomstufen noch gut aus.

 

[MoonTower]

Man sollte immer das beste Verhältnis zwischen Qualität und Dateigröße wählen. Optimierung!
Ich erinnere mich an meine erste Website. Meine Bilder hatten viel Rot-Anteil und auf diese Farbe konzentriert sich das Auge besonders. Bei Rot fallen schnell viel deutlicher Komprimierungsartefakte auf. Und was tat ich: Bei Macromedia Fireworks konnte man speziell den roten Bereichen eine weniger starke Komprimierung zuordnen. Mit Handarbeit die Bildbereiche auswählen. Aber das hat sich meiner Meinung nach gelohnt. Und ja, das JPG-Format war damals schon extrem cool!

 

[F1database]

In 2022 waren es im Durchschnitt 5,3 GB pro Mobilfunk: https://de.statista.com/statistik/d...envolumen-pro-mobilfunknutzer-in-deutschland/

Mir reicht mein Vertrag mit 1GB immer noch dicke aus ...

 

[blablub1212]

Ich würde JPG bei Fotos mit vielen Farben verwenden. SVG für Farbverläufe, Icons etc.

Auf PNG würde ich in der Regel verzichten, außer du brauchst unbedingt bspw. Alpha.

Bilder solltest du in diversen Auflösungen vorhalten und je nach Browser, Viewport etc. die bestmögliche Auflösung ausliefern.

Definitiv bei Seiten mit vielen Bildern Techniken wie LazyLoading verwenden.

Und einfach mal schauen was Seiten mit viel Traffic tun ... Bei Computerbase habe ich nun ein paar Artikel mal durchgeblickt und geschaut was bei deaktiviertem Cache so geladen wird. Da sind wir meistens bei unter 2MB für alles (Bilder, Fonts, CSS, JS etc.).

wsj.com 25mb für alles
apple.com 15mb für alles
GoogleStore 7mb für alles

Nichtsdestotrotz muss man solche Optimierungen auch nicht übertreiben. Schau am besten, dass die GoogleTools (PageSpeed etc.) nicht meckern. Schau das die Seite sowohl am Desktop als auch mobil normal lädt.

Wenn du dann wirklich mal relevanten Traffic erzeugen solltest, dann hast du ggfs. auch eigenes Interesse möglichst wenig Bandbreite zu erzeugen. Denn irgendwann erfordert das ggfs. größere Hardware und teurere Hosting-Verträge.

 

[netzgestaltung]

also ich hab derzeit als regel 2100x2100 max-dimension und 750kb max-filesize vor einem Upload. Dazu online noch Bildgrößen, die kleiner sind, damit nicht immer zb in Listenvorschaubildern die große Version ausgegeben wird.

Zusätzlich gibts das neue Attribut "loading" bei Bild-Tags: <img loading="lazy" src="" alt="" />. Mit "lazy" werden Bilder erst geladen, wenn sie auch im "Viewport" sind.

PNGs nehm ich immer, wenn es Text gibt, der nicht ausfransen soll. Wenn es nur wenige Farben enthält, ist es eh meistens nicht extrem groß. Auch für manche Logo-Situationen ist es ideal.

SVG nehm ich für alles wo nur geht - Logos, Icons, Verläufe und Animationen(wo nicht normales HTML/CSS reichen).

Bei dieser Seite hier hab ich 1.3MB gesamt: https://www.bildungsentwicklung.com/
Google Pagespeed sagt: 96/100 Mobil und 100/100 Desktop: https://pagespeed.web.dev/analysis/https-www-bildungsentwicklung-com/t2tq791bve

 

[pseudopseudonym]

PNGs nehm ich immer

Aber warum? Warum hältst du (und die meisten hier im Thread) noch an dem 27 Jahre alten PNG-Format fest, obwohl es längst deutlich effizientere weitflächig unterstützte Formate gibt? Zumal über JS zur Not noch PNGs nachladen kann, wenn man Dino-Browser unterstützen will.

 

[LeanderAT]

Danke für euer Feedback!

 

[ghecko]

Aber warum? Warum hältst du (und die meisten hier im Thread) noch an dem 27 Jahre alten PNG-Format fest,

Ganz einfach, weil es für manche Grafiken das bessere Format ist.
Foto -> WebP
Grafik -> PNG
Bild -> Kommt drauf an, meist WebP.