Sind hochauflösende Bilder für mobilgenutzte Geräte sinnvoll?

[inVitro]

Hallo,

ich würde gerne eure Meinung wissen.

Es geht um hochauflösende Bilder für hochauflösende Bildschirme. Wenn ich mir die zum Kauf angebotenen Monitore in den großen Elektroläden ansehe, sind hochauflösende Monitore eher weniger vertreten, bei Notebooks/Laptops sieht es ähnlich aus. Bei den Smartphones hingegen ist es ganz anders, die Mehrheit hat doppelt oder dreifach auflösende Bildschirme.

Wenn ich jetzt an die Ladezeit von hochauflösenden Bildern denke, erscheint mir das ganze irgendwie "paradox".

Große Bilder brauchen länger zum Laden, das wäre bei Desktop-PCs und Laptops weniger das Problem weil diese meist eine gute Internetverbindung haben (häuslicher Internetanschluss), nur kommen sie da nicht zum Einsatz weil die Monitore meist nicht hochauflösend sind.

Bei den meisten Smartphones kommen hochauflösende Bilder zwar zum Einsatz, haben aber den Nachteil bei mobiler Nutzung, dass sie länger laden, was mit LTE dann in Zukunft in den Hintergrund tritt, dennoch bleibt die Bilddatei groß und das Datenvolumen wird schneller aufgebraucht.

Einzig bei hochauflösenden Tablets mit häuslichem Internet scheint mir die Sache perfekt.

Um ein komfortables Laden zu ermöglichen, ist LTE eine "Lösung" ... nein keine Lösung, dass sollte man nicht voraussetzen. Eine Möglichkeit ist das Laden von Bildern wenn sie im sichtbaren Bereich sind (lazyload.js etc.) dann bleibt aber immer noch die große Datenmenge ... sollte man die Bilder vielleicht gar nicht laden lassen (JS oder serverseitig per PHP etc.)?

Irgendwie habe ich noch keine gefestigte Meinung dazu. Was denkt ihr darüber?


Schöne Grüße
inVitro

 

[Marv]

Moin,

Erstmal finde ich hochauflösende Bilder auf Mobilgeräten sehr sinnvoll. Sie werden nicht verpixelt dargestellt, Schriftzüge auf Bannern werden scharf und leserlich dargestellt.

LTE, W-Lan zu Hause / Arbeit / Uni etc., viele Hotspots - Das ist schon schön, viel mehr wolltest du aber auf die technische Optimierung eine Meinung, denke ich.

Du kannst natürlich Bilder per Base64 mitschicken, Requests sparen. Nachteile können aber caching sein, und HTTP2 könnte das überflüssig machen.

Für Icons gehen svgs, sogar als sprite, als Alternative. Lazyload ist schon sehr schick, dass dabei später in Summe viele Daten gezogen wurden ist für das direkte Nutzererlebnis nicht wichtig.

Zusätzlich kann man hinterfragen, ob die aktuelle Darstellung deiner Seite auf Mobile denn so sein muss, oder kann man Bilder sparen und auf anderem Wege die Seite gestalten mit gleicher Wirkung.

Als Meinung würde ich klar für hochauflösende Bilder plädieren. Die Bildinhalte, die man unbedingt anzeigen möchte, sollten auch gut dargestellt werden.

 

[MrMurphy]

Hallo

Sind hochauflösende Bilder für mobilgenutzte Geräte sinnvoll?

Nein. Übrigens auch nicht für Desktop-Monitore.

In der Praxis sieht schlicht niemand den Unterschied, die "normale" Qualität reicht vollkommen aus.

Gruss

MrMurphy

 

[inVitro]

Hallo MrMurphy,

"In der Praxis sieht schlicht niemand den Unterschied, die "normale" Qualität reicht vollkommen aus."

Dazu kann ich leider nichts sagen weil ich an einem Monitor mit einfacher Pixeldichte arbeite.

Aber wenn ich mir ein Bild, mit "normaler" Qualität, in einer Website auf meinem iPhone mit Retina Display ansehe, sehe ich schon einen gewaltigen Unterschied.

Hallo Marv,

ich finde auch, dass man die Inhalte die man auf der Website präsentiert in einer guten Qualität bereitstellen sollte. So verwende ich für Logos immer SVGs (wenn eine vektorisierte Version des Logos vorliegt) mit PNG-Fallback, gleiches bei Icons. Da sehe ich kein Problem, da die Dateien sehr klein sind.

Aber bei "Pixel-Bildern" sieht die Sache dann schon anders aus. Für Monitore mit einfacher Pixeldichte gebe ich ein "normales" Bild aus und bei Monitoren mit doppelter, oder dreifacher Pixeldichte gebe ich ein größeres Bild aus (siehe srcset).

Mein "Bedenken" liegt darin, dass gerade bei Geräten die eigentlich wenig Datengröße laden sollten (mobilgenutzte Smartphones) große Bilddateien geliefert werden müssen damit die Optik passt.

"Lazyload ist schon sehr schick, dass dabei später in Summe viele Daten gezogen wurden ist für das direkte Nutzererlebnis nicht wichtig."

Stimmt. Damit zu große Bilder das Nutzererlebnis nicht beeinträchtigen habe ich diese Möglichkeit erwähnt.

OK, mein oben genanntes Bedenken besteht aber immer noch, und logisch gedacht kann man dass auch nicht wirklich technisch lösen, Base64 minimiert zwar die Requests aber nicht die geladene Datengröße, vielleicht ein wenig, vielleicht sind meine so eben durchgeführten Test nicht repräsentativ : )

OK, dann liegt die Lösung also eher hier:

"Zusätzlich kann man hinterfragen, ob die aktuelle Darstellung deiner Seite auf Mobile denn so sein muss, oder kann man Bilder sparen und auf anderem Wege die Seite gestalten mit gleicher Wirkung."

Danke Marv, für deinen Beitrag, das Durchdenken der Sache bringt mir einen festeren Standpunkt.

Gruß
inVitro

 

[Tronjer]

Irgendwie habe ich noch keine gefestigte Meinung dazu. Was denkt ihr darüber?

So wenig HTTP-Requests und so geringer Payload wie möglich. Wenn eine Seite 3s zum Laden benötigt, ist das unerträglich lang.

LTE bringt übrigens wenig, wenn man in der U-Bahn ist und dort nur eine Edge-Verbindung aufbauen kann. Zumal Mobile Tarife in der Regel eine Volumenbegrenzung haben.

 

[thecain]

Wenn ich einen Link anklicke und 12MB meines Datenvolumen drauf gehen nur um den UHD Header zu laden werde mich vor der Seite hüten. Ohne einen expliziten Wunsch ein hochauflösendes Bild zu sehen würde ich nie eines anzeigen (Zum Beispiel durch einen Klick auf ==Hier zur hochauflösenden Version==).

 

[rantanplan2000]

Also es gibt einen Unterschied für Bildschirmauflösung und Daten für den Druck. Richtig optimiert spart man ~ 70% Größe und sieht keinen Unterschied im Vergleich zu Fotos frisch aus der Kamera. Die meisten Programe bieten die Option "Für Web speichern". Da sieht man auch einen Vergleich vom Original zum optimierten Bild. Man sieht da wirklich kiennen Unterschied und die mega Auflösungsbildschirme würde ich nicht beachten. Selbst Microfosft und co. beachten die nicht. Schau dir einfach mal die Bilder der großen Seiten an. Die sind ganz normal optimiert.

Lad dir einfach mal Bilder von Profi-Fotografen runter und schau die Auflösung und Größe an. Die sind alle komprimiert und sehen super aus.

Viele Browser für Mobile, komprimieren extrem große Bilder in der Qualität automatisch, und die werden dann pixelig. Also besser du machst es selber.

Suchmaschinen werden dein Seite übrigens auch schlechter einstufen, wenn die Seite ewige Ladezeiten hat.

 

[Andi124]

Bilder müssen ordentlich aussehen auf einer Internetseite. Nicht mehr und nicht weniger. Die Ladezeit ist eindeutig wichtiger und 1-2sec länger laden bedeutet einfach mal 50% weniger Umsatz. Gibt da einige Studien von z.B. Google drüber. Und auf einem Smartphone mit 5" ist selbst ein FullHD-Bild überdimensioniert. Für selbst gemachte Fotos oder Videos ist das wieder eine andere Geschichte.

Photoshop hat gute Funktionen um ein Bild für das Web zu optimieren und man sieht auch gleich 4 Fenster mit den unterschiedlichen Einstellungen. Und ein jpeg-Bild mit einer Qualität von 50% anstatt 100% ist häufig nicht zu unterscheiden.

Auf meiner Startseite (fussballgruppe.de) habe ich ein Bildschirmgroßes-Bild und zwischen 1920x1080 und 100% und 1440x900 und 50% ist ein nicht so großer Unterschied. Das eine Bild braucht aber über 1MB und das jetzige gerade mal 170kb.

- Für viele mit kleinerem Bildschirm ist der Unterschied nahe Null.
- Ein paar hätten mit hochauflösenden Bildschirmen ein leicht besseres Bild.
- Bei 1MB würde die Seite deutlich länger laden.
- Bei 1MB würde ich mehr als 5x soviel Traffic verursachen für meinen Server.
- Einige würde auf Grund der Ladezeit abspringen.
- Ich glaube wegen der Qualität des Bildes wird niemand die Seite verlassen.

 

[inVitro]

Danke für eure Beiträge,

ok, dann generiert sich meine Meinung so:

1. Ich überlege mir ob ich Bilder überhaupt in der mobilen Version anzeigen muss, vielleicht kann ich sie ja auch ohne Bilder schön gestalten.

2. Wenn Bilder angezeigt werden müssen, sollte sich die Anzahl in Grenzen halten. Und die Bilder wurden komprimiert, "Für Web speichern" mit 60% reicht aus, bei 50% sieht man einen leichten Unterschied und sollte individuell entschieden werden.

3. Außer für die nötigsten Bildern unterdrücke ich das Laden, biete dem Besucher jedoch per Button an "Alle Bilder dieser Seite laden, beachten Sie, dass Datenvolumen verbraucht wird." (oder so ähnlich).

4. Wenn alle Bilder geladen werden, setze ich zusätzlich lazyload.js etc. ein damit Bilder nur im sichtbaren Bereich geladen werden und so das Nutzererlebnis nicht beeinträchtigt wird.

OK, mit dieser Meinung kann ich leben : )

Gruß
inVitro

 

[Tronjer]

Empfehlenswert wäre eventuell noch ein imagemin Task, wie ihn Grunt und Gulp mitbringen:
https://github.com/sindresorhus/gulp-imagemin

 

[Harry1981]

Hallo



Nein. Übrigens auch nicht für Desktop-Monitore.

In der Praxis sieht schlicht niemand den Unterschied, die "normale" Qualität reicht vollkommen aus.

Gruss

MrMurphy

Sehe ich auch so. Zumal immer mehr Websites doch mit HTML5 gestaltet sind und je nach Endgerät eh die passenden Bilder angezeigt bekommst. Sofern die Bilder nicht im professionellen Umfeld genutzt werden sollen, ist eine gute solide Bildqualität ausreichend.