zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Grafik, Design, Typografie
Seite neu laden Bilder für Retina-Displays <picture>-Element

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.12.2019, 21:36
Ria Ria ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2005
Beiträge: 25
Ria befindet sich auf einem aufstrebenden Ast
Standard Bilder für Retina-Displays <picture>-Element

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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.12.2019, 12:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.027
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Dein Beispielcode (von deinem Link):

Code:
<picture>
  <source srcset="examples/images/large.webp" type="image/webp">
  <img srcset="examples/images/large.jpg" alt="…">
</picture>
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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.12.2019, 21:22
Ria Ria ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2005
Beiträge: 25
Ria befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 11.12.2019, 09:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.027
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 11.12.2019, 21:34
Ria Ria ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2005
Beiträge: 25
Ria befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 12.12.2019, 13:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.027
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Zitat von Ria Beitrag anzeigen
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.
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.


Zitat:
Zitat von Ria Beitrag anzeigen
Letzteres ist wohl der Punkt, "normale" Bildschirmnutzer werden so nicht bestraft, mit längeren Ladezeiten!
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.


Zitat:
Zitat von Ria Beitrag anzeigen
FAZIT: Smartphones u.a. mit Retina-Displays /4K müssen die "fetten" Bilder runterladen. Vor 5G könte man so auch einige frustrieren (Funkloch).
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.
Mit Zitat antworten
Antwort

Stichwörter
bilder, display, retina

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Video von youtube responsive in Webseite einbauen R14 (X)HTML 1 28.01.2019 22:39
Hintergrund wird nicht angezeigt maxx CSS 6 14.10.2012 19:27
Hilfe!!! mein Homepagelayout funktioniert nicht! maxx CSS 5 14.10.2012 08:21
Liste im IE StarSt0rm CSS 3 22.08.2007 21:04
Validator Fehler und komm nicht drauf... letslounge (X)HTML 3 14.09.2006 22:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:31 Uhr.