Hallo,

da Retinadisplays jetzt auch von anderen Herstellern auftauchen und immer mehr Leute mobil Seiten durchstöbern (zu meinem Leidwesen) habe ich zum Thema Bilder auf Retina-Displays / 4K, schon einiges gelesen.
Das <picture>-Element / Art Direction (https://scottjehl.github.io/picturefill/#using-type) scheint mir der beste Weg zu sein, aber sorry ich kann eigentlich nicht Programmieren und habe ein grundsätzliches Verständnisproblem zu folgendem Punkt:

1. die meisten meiner Bilder haben nur Monitorauflösung max.96dpi.
man soll ja z.B.ein mein gängiges Format wie 560 x 420px die doppelte Kantenlänge geben also 1.120 x 840px.

2. wo wird das Bild eigentlich runtergerechnet wieder auf 560 x 420px auf dem Server oder im Browser auf dem Smartphone?

und

3. wenn letzteres der Fall ist, dann würden die Ladezeiten auf dem Smartphone (mit Retina-Display)doch zu lang, was verstehe ich nicht?

mfG.Ria

__________________
Ich weiss, dass ich nichts weiss.

Dein Beispielcode (von deinem Link):

Hier wird entweder die Datei large.webp geladen, wenn der browser webp unterstützt.
Wird webp Format nicht unterstützt, dann wird large.jpg geladen.

der Browser macht hier also nichts, bzw. er fordert lediglich das Bild an.

Genauso auch bei Bildern mit verschiedenen Auflösungen -> Jedes Bild hat einen eigenen Speicherpfad am Server, welches der Browser dann entsprechend lädt.

type hat jetzt aber nichts mit retina displays zu tun sondern nur etwas mit dem Dateityp.

Für Auflösungen gibt es zb diesen deutschen Artikel, der es dir hoffentlich verständlich erklären kann.

Hallo cloned,

erst mal besten Dank für den Link, den ich auch kannte, hatte den anderen nur wegen "Picturefill" genommen!

meine eigentliche Frage war etwas anders gemeint, ich greife mal 3 Zeilen raus um die Frage verständlicher stellen zu können:

"Der Browser wird das 2x-Bild automatisch um den Faktor 2 verkleinert anzeigen, damit es denselben Raum ausfüllt wie das das Bild mit der 1x-Auflösung."

und

"sizes legt den Raum fest, den das Bild innerhalb des Layouts einnimmt. Dann enthält srcset eine Liste der Bilder und ihrer jeweiligen Größe. Mit diesen Informationen wählt der Browser das kleinste Bild, das in das Layout passt und es ausfüllt."

FRAGE:

Also mal angenmmen, das Originalbild für das Retina-Display welches auf dem Server liegt, ist doppelt so groß, wie das gleiche Bild für den Desktop-PC.
Bleibt das große Bild jetzt auf dem Server und der Browser lädt das um den Faktor 2 verkleinert herunter oder wird das große Bild heruntergeladen und dann erst um den Faktor 2 verkleinert angezeigt?

(Bei letzterem hätte ich ja eine Bremse der Ladegeschwindigkeit und kann es mir so an sich nicht vorstellen, wollte dazu noch eine zusätzliche Gewißheit haben.)

mfG. Ria

__________________
Ich weiss, dass ich nichts weiss.

Der Server kann nur das ausliefern was vom Browser angefragt wird. Fragt der Browser also bild-x2.jpg an, dann wird auch genau dieses bild-x2.jpg ausgeliefert.

Ich denke du hast den Denkfehler darin dass du davon ausgehst dass er das Bild noch "verkleiner". Im Detail weiß ich es nicht, aber das Bild wird nicht wirklich verkleinert.

Einfaches Rechenbeispiel -> Display mit 2-facher Auflösung.
Ein Bild, welches 100x100 px groß ist, wird auf 100x100px angezeit in einem "normalen" Display. Lädt das Retina display das Bild, dann zeigt es die 100x100px auf 200x200px an. (weil es ja zwei Pixel für einen normalen Pixel verwendet)

Lädt es jetzt das bild-2x.jpg, welches 200x200px groß ist, dann werden die 200x200px auf einem optischen Platz von 100x100px angezeigt. Das meinen die Autoren wohl von "es wird verkleinert". Es wird aber immer noch die vollen 200x200px angezeigt, (weil diese Pixel ja auch physisch vorhanden sind) auf einer Fläche von 100x100px.

Ich hoffe, das war jetzt nicht zu verwirrend

Hallo cloned,

besten Dank, dies leuchtet ein. Der Sicherheithalber was ich jetzt glaube verstanden zu haben, sorry. :

1. Der Server kann ja nicht wissen welches Endgerät der User gerade benutzt. Der Brower vom Endgerät "sieht nach" welches Bild-Ansichtsformat im Frontend verlangt wird.

2. Ist das Bild-Ansichtsformat auf dem Endgerät, im Frontend der Webseite, 100x100px und auf dem Server liegt es 100x100px, dann wird es auf einem normalen Display ohne Unschärfe angezeigt. Bei einem gängigen CMS wird das Bild in verschiedenen Größen runter oder rauf gerechnet und liegt dann z.B. in 4 Größen, wie tiny,small, normal o.ä.auf dem Server(ohne eigenes zutun). Das Ausgangsbild war aber immer das 100x100px Bild, es wurde ja kein anderes hochgeladen.

Letzteres ist wohl heutzutage der Normalfall, bei dynamischen Seiten, ein CMS einzusetzen.

3. Für ein Retina-Display Endgerät muss also das Bild in 200x200px auf dem Server liegen und wird dann im 100x100px Bild-Ansichtsformat, bzw. Smartphone Ansichtsformat angezeigt, also mit mehr Pixel auf kleinerer Fläche.

4. Ich muss also auch mit so einem CMS die doppelte Kantenlängen eines Bildes vorhalten (passend zum Bild-Ansichtsformat).
die Krux bleibt aber doch immer beim Retina-Display vom Smartphone, es muss das große Bild runtergeladen werden.

5.Apple selbst zeigt auf seiner Webseite zunächst Bilder in Normalauflösung an und lädt mithilfe eines Javascripts hochauflösende Bilder nach, wird die Website mit einem Retina Display besucht. Das Problem wird mithilfe sogenannter “CSS Media Queries” gelöst und ermöglicht es, die Auflösung des Bildschirms zu erkennen und ein entsprechendes Bild anzuzeigen.

Letzteres ist wohl der Punkt, "normale" Bildschirmnutzer werden so nicht bestraft, mit längeren Ladezeiten!

FAZIT: Smartphones u.a. mit Retina-Displays /4K müssen die "fetten" Bilder runterladen. Vor 5G könte man so auch einige frustrieren (Funkloch).

Mal abgesehen von dem Speicherplatz der "riesigen" Bilder. Da muss ich und jeder selber grübeln. Erfahrungswerte aus dem Forum wären nicht schlecht?

mfG. Ria

__________________
Ich weiss, dass ich nichts weiss.

Der Absatz macht keinen Sinn. Ich habe die Seite jetzt nicht besucht, aber wenn es so ist, dass sie CSS verwenden, dann wird dafür kein <img>- (bzw. picture) tag verwendet.
Dann hat das auch null mit JS zu tun, das passiert dann alles automatisch im Browser.
Aber ansonsten stimmen deine Aussagen.


Genau das ist der Punkt von responsive Webdesign, je nach Anforderung wird ein anderes Layout und eben auch andere Bilder geladen.
-> Weiß der Browser dass ein hochauflösendes Bild exisitert und er es anzeigen kann, dann fordert er es auch an.


Auch retina Bilder müssen nicht "fett" sein, dass sie größer sind als die normalen versteht sich jedoch von selbst.
Erfahrungswert: Wenn das System es unterstützt und die picuter-tags automatisch generieren kann verwendet man es.
Machen Seiten seit Jahren so. das sollte alles kein Problem sein, sofern die Gesamtgröße nicht zu groß wird.