nicht angemeldet T-Rex
Matthias Apsel
T-Rex
molily
T-Rex
molily
Der Martin
T-Rex
Moin,
dann widme ich mich mal dem Thema Bilder.
Da gibts eine Seite die hat ein Bild. Auf einem 1500px breitem Desktop pc ist das Bild 1500px breit, auf einem Smartphone 320px. Es gibt zwei Bildversionen - eine große und eine kleine (alles dazwischen ist für das Beispiel irrelevant).
Jetzt möchte ich bei kleinen Display gerne die kleine Version anzeigen und bei großen Versionen die große Version. Doofe Sache ist, dass das img nur eine src hat.
1. Eine Lösung wäre ja das neue Picture Element. Das ist aber anscheinend noch so unbekannt das nicht mal caniuse.com das Ding kennt. Ich kann leider die Umsetzung bzw. die Verbreitung von dem Ding nicht in Erfahrung bringen.
2. Per Javascript entscheiden welches Bild geladen werden soll -> Google unfreundlich und bei usern ohne JS keine Lösung. Eventuell per Default immer das größere Bild laden?
3. Das Bild als Background laden. Im CSS dann nur die Box sichtbar machen die angezeigt werden soll. Background Images werden anscheinend nur dann geladen wenn sie angezeigt werden. Da kann man jedoch wiederum keinen Title oder Alt setzen, was wiederum für Google eine feine Sache wäre.
4. Viewpoint Serverseitig erfahren und das richtige Bild einbinden. Dazu ist jedoch wieder JS nötig.
Hab ich was vergessen? Aktuell sehe ich das Ganze als Dilemma. Eine wirklich gute Lösung wo man sagt "joa passt!" gibt es einfach nicht?
Gruß
skalierter
T-Rex
Hello,
haben denn größere Displays auch automatisch eine bessere Internetverbindung?
Es macht schon einen Unterschied, ob man auf die Übertragung von 4k oder 400k oder gar 4MB Bilddaten warten muss.
Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
haben denn größere Displays auch automatisch eine bessere Internetverbindung?
Es macht schon einen Unterschied, ob man auf die Übertragung von 4k oder 400k oder gar 4MB Bilddaten warten muss.
Ach ja das hab ich vergessen - das ist erstmal irrelevant.
Aber mal am Rande:
Was wäre die Alternative? Soll der große Viewpoint das Smartphone Design sehen, nur weil er eine schwache Verbindung hat?
Könnte es sein, dass dies ein Dilemma ist, das nicht gelöst werden kann?
Gruß
WM Kader ignorierender
T-Rex
Hello,
haben denn größere Displays auch automatisch eine bessere Internetverbindung?
Es macht schon einen Unterschied, ob man auf die Übertragung von 4k oder 400k oder gar 4MB Bilddaten warten muss.Ach ja das hab ich vergessen - das ist erstmal irrelevant.
Aber mal am Rande:
Was wäre die Alternative? Soll der große Viewpoint das Smartphone Design sehen, nur weil er eine schwache Verbindung hat?
Könnte es sein, dass dies ein Dilemma ist, das nicht gelöst werden kann?
Könnte es sein, dass Du den USER entscheiden lassen könntest, nicht den von seiner(?) Software automatisch erzeugten Erkennungstext.
Gehen wir doch erst einmal davon aus, dass der User (oder der Eigner des Clients) UND der Strecke ins Internet nichts manipuliert an den Anfragen. Welche Kopfdaten sendet ein Client, die man erst einmal gutwillig auswerten könnte?
.
.
.
.
(It's your turn)
Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
Könnte es sein, dass Du den USER entscheiden lassen könntest
Stell dir vor jede Webseite hätte so eine Entscheidung und stell dir weiter vor das du einen gigantischen Laptop hast mit einer schwachen Internetverbindung. Du würdest auf jeder Webseite gefragt werden. Ist das eine pragmatische Lösung?
Gehen wir doch erst einmal davon aus, dass der User (oder der Eigner des Clients) UND der Strecke ins Internet nichts manipuliert an den Anfragen. Welche Kopfdaten sendet ein Client, die man erst einmal gutwillig auswerten könnte?
Das ist ein Schritt in die falsche Richtung so wie ich das sehe.
Also so wie ich das sehe, muss man den User fragen oder man entscheidet für ihn. Fragt man ihn nervt man ihn. Fragt man ihn nicht hat man das Dilemma welches Design man ihm anzeigt.
Für mich ist das nicht Lösbar, weshalb ich einem großen Display auch eine starke Leitung unterstelle. Damit ist es zwar entschieden (für mich) aber generell nicht gelöst.
Gruß
Entscheider
T-Rex
Om nah hoo pez nyeetz, T-Rex!
Da gibts eine Seite die hat ein Bild. Auf einem 1500px breitem Desktop pc ist das Bild 1500px breit, auf einem Smartphone 320px. Es gibt zwei Bildversionen - eine große und eine kleine (alles dazwischen ist für das Beispiel irrelevant).
Jetzt möchte ich bei kleinen Display gerne die kleine Version anzeigen und bei großen Versionen die große Version. Doofe Sache ist, dass das img nur eine src hat.
Hardware-Pixel != CSS-Pixel!
Du kannst beide Bilder verwenden und per MQ jeweils eins ausblenden, schau dir den Datenverkehr an, ob beide Bilder übertragen werden.
Matthias
Du kannst beide Bilder verwenden und per MQ jeweils eins ausblenden, schau dir den Datenverkehr an, ob beide Bilder übertragen werden.
Joa da gabs mal eine Seite die hat das getestet. Die effektivste Lösung dafür waren damals und laut meinen Erinnerungen Background-images. Die wurden auf fast allen Systemen erst bei Sicht übertragen. Bei Background-images habe ich wiederum das Problem mit google -> näheres dazu bei der Antwort zu Molily.
Gruß
Post ist nur bei Licht sichtbar
T-Rex
Hallo,
- Per Javascript entscheiden welches Bild geladen werden soll -> Google unfreundlich
Google interessiert sich nicht für Bilder. Es sei denn, du bist eine Bilderwebsite und willst, dass sie unbedingt in hoher Qualität über die Google Image Search auffindbar sind. Das will eigentlich niemand.
und bei usern ohne JS keine Lösung.
User ohne JavaScript gibt es nicht (nicht messbar). Selbst wenn, sie sehen als Fallback das kleinere Bild. Kein Problem also.
Eventuell per Default immer das größere Bild laden?
Mobile First, also per default das kleinere Bild laden.
Aktuell sehe ich das Ganze als Dilemma.
Ich sehe hier kein Dilemma. picture/srcset sind gangbare Lösungen und die Zukunft. Nutze einen Picture-Polyfill.
Siehe auch:
http://maddesigns.de/responsive-images/
http://css-tricks.com/which-responsive-images-solution-should-you-use/
Mathias
Google interessiert sich nicht für Bilder. Es sei denn, du bist eine Bilderwebsite und willst, dass sie unbedingt in hoher Qualität über die Google Image Search auffindbar sind. Das will eigentlich niemand.
Da muss ich leider widersprechen. Meine Seite hat gigantische 30 User am Tag und die hälfte kommt über google Images (und das obwohl ich wohl der schlechteste Fotograf aller Zeiten bin).
Ich weiß auch nicht wieso meine Bilder bei google relativ weit oben stehen. Es ist aber nun mal so - messbar. Deshalb würde ich ungern etwas am bestehenden html etwas ändern. Ergänzungen sind aber willkommen.
und bei usern ohne JS keine Lösung.
User ohne JavaScript gibt es nicht (nicht messbar). Selbst wenn, sie sehen als Fallback das kleinere Bild. Kein Problem also.
Klar ist das Messbar. Du bindest einen Zählpixel in die Webseite ein. Der macht einen aufruf an ein Serverseitiges Script. Dann machst du einen request mittels ajax. Der aufruf wird auch gezählt. Im Hintergrund laufen zwei Counter - Zählpixel und Ajaxrequest. Die Differenz sind die User ohne aktivem JS. Es muss natürlich ein paar Bereinungen geben, sonst zählt man einige User doppelt.
Eventuell per Default immer das größere Bild laden?
Mobile First, also per default das kleinere Bild laden.
Ich sehe hier kein Dilemma. picture/srcset sind gangbare Lösungen und die Zukunft. Nutze einen Picture-Polyfill.
Wenn es als html Element umgesetzt ist akzeptiere ich die Antwort.
Ein Default Bild laden hat jedoch den nachteil, dass man im Zweifelsfalle zwei Bilder laden muss. Initial wird das Default bild geladen - also das kleine. Dann erkennt JS ein größeres Display und läd das große Bild nach. Zwei Bilder wurden geladen.
Siehe auch:
http://maddesigns.de/responsive-images/
Da ist wohl etwas kaputt, ich komme nicht weiter als zur dritten Folie.
http://css-tricks.com/which-responsive-images-solution-should-you-use/
Ok dass muss man mal in ruhe durchlesen. Eventuell komme ich da morgen dazu.
Auf jeden Fall vielen Dank für deine Antwort. Da es sich bei meinem Problem um keine Bildergallerie handelt sondern eventuell 1-5 Bilder, ist die Lösung mit dem Defaultbild eventuell akzeptabel. Wobei ich noch etwas zögere, da Google das kleine Bild in den Index aufnehmen wird.
Gruß
grübelnder
T-Rex
Hallo,
Meine Seite hat gigantische 30 User am Tag und die hälfte kommt über google Images (und das obwohl ich wohl der schlechteste Fotograf aller Zeiten bin).
Und? Diese Leute finden dich auch, wenn Google nur die Low-Res-Version des Bildes kennt.
User ohne JavaScript gibt es nicht (nicht messbar). Selbst wenn, sie sehen als Fallback das kleinere Bild. Kein Problem also.
Klar ist das Messbar.
Nicht messbar = Der Wert ist so klein, dass es Messungenauigkeit sein kann.
Du bindest einen Zählpixel in die Webseite ein. Der macht einen aufruf an ein Serverseitiges Script. Dann machst du einen request mittels ajax. Der aufruf wird auch gezählt. Im Hintergrund laufen zwei Counter - Zählpixel und Ajaxrequest. Die Differenz sind die User ohne aktivem JS.
Die Methode ist bekanntermaßen unzuverlässig. Selbst die altbewährte Methode, ein img in ein noscript zu setzen und dasselbe Bild mit ?js=enabled per JavaScript (new Image().src = '…') zu laden, hat Schwächen.
Es muss natürlich ein paar Bereinungen geben, sonst zählt man einige User doppelt.
Das Problem ist vielmehr, dass 60% des Traffics von Bots erzeugt wird. Dienste wie Google Analytics haben es zu ihrer Hauptaufgabe gemacht, tatsächliche User vom HTTP-Hintergrundrauschen zu unterscheiden. Das ist nicht trivial.
Ein Default Bild laden hat jedoch den nachteil, dass man im Zweifelsfalle zwei Bilder laden muss.
Nicht notwendig, das hängt von der Umsetzung ab. Üblicherweise wird beim picture-Polyfill auf die Unterstützung von Nicht-JS-Browsern verzichtet. Würde man nämlich ein img im noscript hinzufügen, gäbe es Probleme mit Browsern, die picture nativ unterstützen. Siehe: http://scottjehl.github.io/picturefill/#support
picture wird gerade in mehreren Browsern implementiert. Wer hingegen JavaScript abschaltet, der schließt sich aus dem anpassbaren Web bewusst aus.
Mathias
Wer hingegen JavaScript abschaltet, der schließt sich aus dem anpassbaren Web bewusst aus.
WOW ! Damit sagst du das responsives Design von JS abhängt. Aber sollte Design gerade das nicht sein -> abhängig von JS?
Ich denke die Lösung mit dem Defaultbild ist schon gut. Der Ansatz mit dem Mobile First ist natürlich bekannt und damit hast du prinzipiell recht. Aber ich denke gerade in diesem "speziellen" Fall würde ich das große Bild per Default laden. Das ist aber aktuell nur ein Bauchgefühl. Ich werde später gerne meine Lösung präsentieren.
Gruß
grübelnder
T-Rex
Hallo,
Damit sagst du das responsives Design von JS abhängt.
Das tut es faktisch. Selbst ein paar Media Queries sind auf einen JavaScript-Polyfill für ältere IEs angewiesen. Es ist keine Lösung, deshalb auf Media Queries zu verzichten.
Aber sollte Design gerade das nicht sein -> abhängig von JS?
Es sollte vieles sein, was nicht ist.
Ich denke die Lösung mit dem Defaultbild ist schon gut. Der Ansatz mit dem Mobile First ist natürlich bekannt und damit hast du prinzipiell recht. Aber ich denke gerade in diesem "speziellen" Fall würde ich das große Bild per Default laden.
Ja, ergibt Sinn. Rs kommt immer auf den Sinn des Bildes an. In News-Artikeln z.B. sind Bilder nicht das wichtigste, da ist es kein Problem, dass im Zweifelsfall kleinere Versionen geladen werden. In einer Bildergalerie hingegen kann per default ruhig eine höhere Auflösung verwendet werden.
Mathias
Hi,
User ohne JavaScript gibt es nicht (nicht messbar).
Klar ist das Messbar. Du bindest einen Zählpixel in die Webseite ein. Der macht einen aufruf an ein Serverseitiges Script. Dann machst du einen request mittels ajax. Der aufruf wird auch gezählt. Im Hintergrund laufen zwei Counter - Zählpixel und Ajaxrequest. Die Differenz sind die User ohne aktivem JS.
ich vermute, molily meinte eher "nicht messbar" im Sinne von "verschwindend geringe Menge" (wobei ich nicht dieser Ansicht bin und selbst Teil dieser angeblich verschwindend geringen Menge bin).
Ein Default Bild laden hat jedoch den nachteil, dass man im Zweifelsfalle zwei Bilder laden muss. Initial wird das Default bild geladen - also das kleine. Dann erkennt JS ein größeres Display und läd das große Bild nach. Zwei Bilder wurden geladen.
Das stimmt. Aber wenn du davon ausgehst, dass das kleine Bild auch für kleine Displays bzw. für geringe Bandbreiten gemacht und optimiert ist, sollte dessen unnötiger Abruf für Nutzer mit schneller Anbindung nicht ins Gewicht fallen.
keine Bildergallerie
Nein, bestenfalls eine Bildergalerie. Merke: Galerie hat nichts mit Galle zu tun - auch wenn einem beim Anschauen mancher Bilder vielleicht die Galle hochkommt. ;-)
Ciao,
Martin
Hi
Siehe auch:
http://maddesigns.de/responsive-images/
http://css-tricks.com/which-responsive-images-solution-should-you-use/
Ergänzend dazu noch die "Clown Car Technique".
Gruß
Ole
Soooo...
alles durchgelesen und verstanden. Meine Lösung ist, es nicht zu lösen :D.
Erklärung:
Die sauberste aktuell mögliche Variante wäre meiner Meinung nach eine Mischung zwischen Server und Client. Demnach würde der Server das passende Bild direkt in den src des img setzen. Mittels PHP soll dies auch problemlos möglich sein - hab es aber nicht selbst probiert. Das hätte den Vorteil, dass erstmal das richtige Bild ausgeliefert werden würde. Sollte sich der Viewpoint wärend der Betrachtung ändern braucht man alle möglichen Bilder noch irgendwo als Information im html. Die Scripte die so Angeboten werden benutzen das Attribut "srcset" im bei <img>. Da das nicht valide ist, würde ich die gleiche Logik in data-srcset setzen. Diejenigen die kein Javascript haben, aber trotzdem skalieren wollen hätten verloren.
Die Serverseite kann ich leider nicht in die Lösung einbauen. Mein Framework macht mir da leider einen Strich durch die Rechnung :(. Auf der anderen Seite sind es nicht viele Bilder die es bei mir betrifft, von daher wäre der Aufwand das zu realisieren zu viel.
Deshalb müsste ich mich (wie beim Gespräch mit molily zu lesen) für ein Defaultbild entscheiden. Entweder ich gehe den mobile-first Ansatz. Dann wäre das Defaultbild das möglichst Kleinste. Google würde dann auch das Kleine indizieren -> schlecht. Also müsste das Größe genommen werden. Da es sich um ein Defaultbild handelt bedeutet es, dass im schlimmsten Fall zwei Bilder geladen werden -> erstmal das größte und dann das Bild im richtigen Format. Was hat man erreicht? Eigentlich hat man den Ursprungszustand noch verschlimmert. Anstatt dem User Last zu sparen in dem man ihm ein schlankeres passendes Bild für seinen Viewpoint liefert, zwingt man ihm erstmal das große Bild auf. So gesehen kann man sich den Aufwand gleich sparen.
Einzigste Lösung wäre dann, das src des img per default leer zu lassen und 100% auf javascript zu gehen.
Das wäre aber wiederum ein Todesurteil für Google. Abhilfe hierfür würde wiederum ein Noscript Block schaffen. Ein riesen Vorteil für die Javascript Lösung wäre wiederum die Ladezeit der Seite. Denn die würde das Bild erst nachladen -> preload.
So oder so hoffe ich das bald das picture Element benutzbar wird. Dann lesen wir uns den ganzen sums hier in 5 Jahren mal durch und können unseren Azubis sagen: "damals zu Firefox 30 Zeiten...". Und der Azubi wird sagen: "Boah wie umständlich!". Und jetzt eine Gedenkminute für den IE6 und die 1 Millionen Workarounds :D.
Achja die Lösung mit dem SVG (Clown Car) ist zwar clever, halte ich aber für einen Umweg mit dem man nichts erreicht. Anstatt das Bild gleich per Background ein zu binden, geht man den Umweg über SVG und Background. Da würde ich die Javascript Lösungen bevorzugen.
Gruß
Meinungsverteiler
T-Rex
Hallo
Deshalb müsste ich mich (wie beim Gespräch mit molily zu lesen) für ein Defaultbild entscheiden. Entweder ich gehe den mobile-first Ansatz. Dann wäre das Defaultbild das möglichst Kleinste. Google würde dann auch das Kleine indizieren -> schlecht.
Kannst du mir bitte erläutern, warum das deiner Meinung nach schlecht ist? Selbst wenn „nur“ die kleine Auflösung indiziert wird, gefunden werden die Bilder [1] jedenfalls. Und wenn der Suchende die Seite aufruft und sich nicht nur die Ergebnisseite der Bildersuche anschaut, bekommt er bei entsprechender Viewportgröße das hochaufgelöste Bild angezeigt.
[1] „Bilder“ meint hier nicht Bilddateien sondern Bildmotive.
Tschö, Auge
Kommt natürlich drauf an wie klein "klein" ist. Bei 100px Breite werden die Bilder bei google auch kleiner dargestellt. Ab sagen wir mal 300px ist es bei Google zumindest Wurst. Dann könnte man wirklich das kleinere Ausliefern.
Gruß
Zahn um Zahn
T-Rex
Auge