Bilder entsprechend der Bildschirmauflösung laden.

[Sven]

Hallo,

ich habe bereits meine eigene Internetseite erstellt und möchte sie jetzt optimieren und erweitern.
Da ich primär bildet präsentiere kam mir der Gedanke, die präsentierten Bilder in mehreren Größen zu hinterlegen und entsprechend der Bildschirmauflösung des Users dann eine passende Größe zu laden. Meinetwegen auch so, das nicht die einzelnen Bilder geladen werden sondern eine komplette Seite, die dann entsprechend optimiert ist. Mir geht es darum zu erfahren wie ich die Auflösung erfahre, da habe ich hier schon was gefunden (screen), und dann damit weiterarbeiten kann und dem browser sagen, das er bei dieser und jener Auflösung, diese und jene Seite benutzen soll.
Das die Screen abfrage alt und bedingt nützlich ist weil sie nicht dynamisch ist, ist mir durchaus klar, aber ich werde dem User sagen er möge den browser maximieren wenn er Bilder schauen will und fertig ;)
mein Beweggrund ist momentan, das meiner Meinung nach ein 600X800 Bild auf einem Standard Laptop noch platzmäßig in den Browser passt, aber wenn man sich die Seite mal auf dem heimischen FullHD Gerät ansieht, das Bild einfach nur noch mickrig aussieht.
Vielen Dank schon mal im Voraus für die Hilfe!
Sven

[Whouzuo]

Das die Screen abfrage alt und bedingt nützlich ist weil sie nicht dynamisch ist, ist mir durchaus klar, aber ich werde dem User sagen er möge den browser maximieren wenn er Bilder schauen will und fertig ;)

Das geht besser. Anstatt die Auflösung des Bildschirms abzufragen, kannst du auch abfragen, mit welcher Auflösung die Website dargestellt ist, d.h. wie groß der Viewport ist. Du kannst auch auf Änderungen reagieren, d.h. wenn der User den Browser vergrößert/verkleinert deine Bilder entsprechend anpassen.

mein Beweggrund ist momentan, das meiner Meinung nach ein 600X800 Bild auf einem Standard Laptop noch platzmäßig in den Browser passt, aber wenn man sich die Seite mal auf dem heimischen FullHD Gerät ansieht, das Bild einfach nur noch mickrig aussieht.

In diesem Fall würde ich an deiner stellen dem User eine optionale Möglichkeit bieten, die Grafiken in höherer Qualität anzeigen zu lassen. Ich würde das so ähnlich machen wie bei Youtube.

[Steel]

Moin!

Wo ist denn Das Problem die Bilder in verschiedenen Groessen anzubieten und den User selbst entscheiden zu lassen was er sich runterlaedt? Zeige ihm eine Vorschau nud biete ihm, falls vorhanden, verschiedene Aufloesungen an. Wie alle anderen, die das vernuenftig geregelt haben, auch.

[Gunnar Bittersmann]

@@Sven:

nuqneH

Da ich primär bildet präsentiere kam mir der Gedanke, die präsentierten Bilder in mehreren Größen zu hinterlegen und entsprechend der Bildschirmauflösung des Users dann eine passende Größe zu laden.

Ich wollte schon zu einer ausführlichen Antwort ansetzen … Aber nun erstmal die Frage: Heute schon A List Apart gelesen? Mo’ Pixels Mo’ Problems

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Aber nun erstmal die Frage: Heute schon A List Apart gelesen? Mo’ Pixels Mo’ Problems

Das ist ja schön und gut soweit ..., aber bis das mal "allgemein" verwendbar ist, wird es ungefähr noch wie lange dauern ...?

Und dieses ganze "Gerödel" mit immer neuen Attributen, die den Quelltext um ein vielfaches aufblähen, wäre imho völlig überflüssig, wenn es nicht den konzeptionellen Fehler bei den Media Queries gäbe, dass Browser ungeachtet der jeweiligen Rule einfach erstmal alles runterladen.

Und wie ebenfalls schon mehrfach geäußert halte ich das für "Frickelei" an der falschen Stelle!
Wenn der Browser einfach die ihm ja bekannten Informationen über das Ausgabemedium zuverlässig im HTTP Request Header übertragen würde, könnte man imho an der richtigen Stelle, nämlich serverseitig dafür sorgen, dass nur die "passenden" Resourcen ausgeliefert werden.

Gruß Gunther

[Gunther]

Kurz nachgereicht:

Denselben "Effekt" kann man aktuell auch mit Media Queries erreichen.
Auf dieser Seite findet man einige verschiedene Methoden und ihr jeweiliges Resultat.

Gruß Gunther

[Sven]

Vielen Dank für den Hinweis! das werde ich mir auf jeden fall mal näher zu gemüte führen!

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Und wie ebenfalls schon mehrfach geäußert halte ich das für "Frickelei" an der falschen Stelle!
Wenn der Browser einfach die ihm ja bekannten Informationen über das Ausgabemedium zuverlässig im HTTP Request Header übertragen würde, könnte man imho an der richtigen Stelle, nämlich serverseitig dafür sorgen, dass nur die "passenden" Resourcen ausgeliefert werden.

Meine Rede.

Ich hab mich neulich mit Mike Smith drüber unterhalten. Tenor war, dass Web-(Frontend-)Entwickler das gern im HTML (bzw. CSS) hätten, weil sie sich nicht mit noch einer Technik (noch dazu einer serverseitigen) herumschlagen wollen.

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Meine Rede.

Ja genau! Das wäre doch imho eine wesentlich bessere Variante ...

Ich hab mich neulich mit Mike Smith drüber unterhalten. Tenor war, dass Web-(Frontend-)Entwickler das gern im HTML (bzw. CSS) hätten, weil sie sich nicht mit noch einer Technik (noch dazu einer serverseitigen) herumschlagen wollen.

Also wenn das so ist, wundert es mich langsam nicht mehr, dass die Entwicklung so voranschreitet, wie sie es die letzten Jahre tut ... :rolleyes:

Wenn man mal von MS Expressions absieht, dann war und ist doch gerade einer der wesentlichen Vorzüge der, dass letztlich immer_ein_HTML Dokument am Ende steht, egal für welches Ausgabemedium (und ohne irgendwelche Fallunterscheidungen im Quellcode).

Und imho muss das aufgrund des Konzepts (welches jetzt mal außer Frage stehen soll) der Trennung zwischen Inhalt und Layout auch so sein.

Media Queries haben imho schon gezeigt, dass sie aufgrund verschiedener Faktoren, zumindest nur ein unzureichendes Mittel sind, um die eigentlichen heutigen Anforderungen zu erfüllen.
Wenn ich mich mal nur auf Media Screen beschränke, dann sind doch gerade u.a. die folgenden Informationen essentiell:
1. Device und Viewport width/ height
2. Resolution (device pixel density/ratio)
3. Touch/Pointer device
4. Connection (type/speed)

Alles Dinge, die der jeweilige Browser alle weiß, aber anstatt diese beim Request zu übermitteln, behält er die schön brav für sich.
Stattdessen ist man gezwungen, alle möglichen Eventualitäten zu berücksichtigen und jeweils quasi alles auszuliefern, aus dem sich dann erst clientseitig der Browser das Passende rauspickt. Wie gesagt - mir völlig unverständlich ...!

Zumal man schon alleine die 4 oben genannten Dinge heutzutage so nicht abdecken/ ermitteln kann. Und auch mit CSS und JS lassen sie sich nur teilweise ermitteln, aber eh erst, wenn es eigentlich schon zu spät ist. Deshalb kann imho die Lösung dafür nur eine Serverseitige sein.

Du kannst Mr. Smith mal einen schönen Gruß bestellen und ihn Fragen, ob jetzt eigentlich die restliche Welt weiter mit dem bisherigen "Gefrickel" rumwurschteln muss, nur weil einige (wenige) "Web-(Frontend-)Entwickler das gern im HTML (bzw. CSS) hätten"?

Gruß Gunther

[Sven]

Nun Prima, da schaut man als hilfloser privat Programmierer nach einer Lösung eines Problems, erhofft sich Hilfe von scheinbar kompetenten Leuten in einem durchaus renommierten Forum, aber was bekommt man? eine melancholische Diskussion über Traffic und Bandbreiten, dinge die man als gegeben erklärt hat (Screenresolution/ nicht viewresolution), werden doch in das nicht gewollte umgedreht und auf die Lösung die der Fragende sucht wird kein einziges mal konkret eingegangen. Wenn es sie nicht gibt, dann hätte ich wenigstens hier ein ehrliches, "ne, das was du haben willst geht nicht" erwartet und kein, sorry für die Ausdrucksweise, heißes um den Brei herumgerede!
Schade. Ist es denn so schwer das einfach sachlich zu sagen wie es geht?
Man kann ja gerne dann auch alternative Wege und Möglichkeiten anpreisen...aber das ohne meine favorisierte Lösung...fühlt sich an wie Weihnachten ohne Geschenke!

Hallo,

ich habe bereits meine eigene Internetseite erstellt und möchte sie jetzt optimieren und erweitern.
Da ich primär bildet präsentiere kam mir der Gedanke, die präsentierten Bilder in mehreren Größen zu hinterlegen und entsprechend der Bildschirmauflösung des Users dann eine passende Größe zu laden. Meinetwegen auch so, das nicht die einzelnen Bilder geladen werden sondern eine komplette Seite, die dann entsprechend optimiert ist. Mir geht es darum zu erfahren wie ich die Auflösung erfahre, da habe ich hier schon was gefunden (screen), und dann damit weiterarbeiten kann und dem browser sagen, das er bei dieser und jener Auflösung, diese und jene Seite benutzen soll.
Das die Screen abfrage alt und bedingt nützlich ist weil sie nicht dynamisch ist, ist mir durchaus klar, aber ich werde dem User sagen er möge den browser maximieren wenn er Bilder schauen will und fertig ;)
mein Beweggrund ist momentan, das meiner Meinung nach ein 600X800 Bild auf einem Standard Laptop noch platzmäßig in den Browser passt, aber wenn man sich die Seite mal auf dem heimischen FullHD Gerät ansieht, das Bild einfach nur noch mickrig aussieht.
Vielen Dank schon mal im Voraus für die Hilfe!
Sven

[Gunnar Bittersmann]

@@Sven:

nuqneH

erhofft sich Hilfe von scheinbar kompetenten Leuten in einem durchaus renommierten Forum, aber was bekommt man?

Ein Stück Fleisch. Nicht vorgekaut. Und auch nicht auf dem Silbertablett. Sry.

Qapla'

PS: Bitte kein TOFU!