Frage zur Funktion "responsive Images"

[Kahmoon]

Servus beisammen,

ich hätte eine Verständnisfrage zu der neuen Funktion für Bilder.

Imho habe ich alles korrekt eingestellt.....aber die Bilder werden trotzdem nur per HTML skaliert und nicht in der korrekten Version erzeugt!? Die Einstellungen der Größen ist "proportional" und Layout hat polyfil aktiviert.

Er ändert auch die gewünschte Breite wie angegeben...allerdings ist es immer ein skaliertes Bild. Sollte er nicht ein Neues erzeugen um Bandbreite/Dateigröße einzusparen? Siehe Anhang.

Was mach ich falsch? Link zur Seite - hier

VG

[Spooky]

Link zur Seite?

[Kahmoon]

War noch nicht fertig. Siehe oben

[Spooky]

Hm, bin ich überfragt, sollte eigentlich funktionieren.


Das einzige was mir aufgefallen ist: ein kleiner HTML Fehler:

<p>Jede Hochzeit ist sowohl einzigartig als auch individuell. Durch meine unkonventionelle Art und dem modernen Reportagestil entstehen Hochzeitsfotos die fern ab des Standards sind.</span> <a title="Hochzeitsfotografie München" href="hochzeitsfotografie.html">Mehr Informationen »</a></p> 

(das </span> ist zu viel)

[Kahmoon]

Habs gerade mal bei einer anderen Installation versucht. Auch hier werden die Bilder nur skaliert. Nicht neu in der angegebenen Größe erzeugt. Hmmmmm auf diese Weise macht das wenig Sinn oder?

[Spooky]

Habs gerade mal bei einer anderen Installation versucht. Auch hier werden die Bilder nur skaliert. Nicht neu in der angegebenen Größe erzeugt. Hmmmmm

Erzeugt werden die Bilder ja und sind auch im Source vorhanden:

<picture>
    <source media="(max-width: 360px)" srcset="assets/images/7/Eventfotografie_16-04506b47.jpg"></source>
    <source media="(max-width: 480px)" srcset="assets/images/3/Eventfotografie_16-c0ed6283.jpg"></source>
    <source media="(max-width: 767px)" srcset="assets/images/d/Eventfotografie_16-b20137fd.jpg"></source>
    <img title="Eventfotografie München und Bayern" alt="Eventfotografie München und Bayern" src="assets/images/0/Eventfotografie_16-b3860270.jpg"></img>
</picture> 

max-width:360px - http://www.frankdaniels.de/assets/im...6-04506b47.jpg - 320px × 145px
max-width:480px - http://www.frankdaniels.de/assets/im...6-c0ed6283.jpg - 440px × 200px
max-width:767px - http://www.frankdaniels.de/assets/im...6-b20137fd.jpg - 706px × 321px
Full/Original/Desktop - http://www.frankdaniels.de/assets/im...6-b3860270.jpg - 700px × 318px

Aus irgendeinem Grund werden aber die entsprechenden sources vom Browser nich angewandt.

[Kahmoon]

Jetzt sehe ich es auch im Quelltext! Das wären die richtigen Dateien!

Code müsste ja auch passen oder?

<?php $this->insert('picture_default', $this->picture); ?>

Hmm dann liegt es vielleicht am Firefox? Ist eigentlich die aktuellste Version. Im Chrome nimmt er es aber auch nicht.

[mlweb]

Gerade habe ich noch mal auf meine eigenen Seite geschaut. Dort werden im Kopfbereich wirklich unterschiedliche Bilder eingebaut sind. Wenn ich mir das über Firefox Seiteninfo anschaue wird mir auch vorgegaukelt, dass immer das große Bild headergrafik_xlarge.png verwendet wird, obwohl es eben definitiv nicht so ist (www.webdesign-marenlange.de). Ich gaube als ich die Website aufgebaut habe war das noch nicht so.
Bei der Gelegenheit habe ich auch noch festgestellt, dass ich in der Ewicklervorschau die Seite neu Laden muss bevor das korrekte Bild geladen wird (Ich glaub das funktionierte letzes Mal noch beim normalen Zusammenschieben), aber das nur am Rand.

[Kahmoon]

Ja, das mit dem Reload ist mir auch schon aufgefallen. Ich habe diese Funktion bisher noch nicht wirklich verwendet......hab mich damit quasi erst frisch beschäftigt. Aber so wie es aktuell ist kann es ja nicht gedacht sein

Allerdings Resize ich das Fenster nur (bzw. Strg + M im Firefox)....vielleicht reicht das nicht?

[Kahmoon]

Edit:
Also nach einem Reload und dann rechte MAustaste -> Grafik anzeigen, zeigt mir dann auch die korrekte Grafik. Vermutlich handelt es sich hier lediglich um einen Anzeigefehler des Browsers?

[Spooky]

Stimmt, das hatte ich eigentlich eh auch schon mal in einem anderen Thread festgestellt . Also funktioniert eh alles wie es soll

[RockSolid Themes]

Firefox 38 unterstützt das Picture-Element nativ, allerdings werden die Bilder bei einer Größenveränderung des Browserfensters nicht neu geladen. Das ist ein bekannter Bug der höchstwahrscheinlich in Version 39 behoben wird.

[Kahmoon]

Ja, ich habe aber auch immer Reload gemacht...trotzdem zeigen mir die Bildeigenschaften ein per HTML skaliertes Bild. Ruf man das Bild selbst auf...passt es. Soweit habe ich aber nicht gedacht

VG

[ways2web]

rocksolid themes hat ja einen Artikel zu Anwendung des features verfasst...
be mir will der groschen aber einfach nicht fallen (heul)

kann mir jemand ein gutes/oft verwendetes praxis-beispiel nennen.. (bilder für desktop/mobil zb)
ich verstehe ja, was dahinter steckt.. nur das Anwenden bricht meinen schmalen horizont

[Franko]

rocksolid themes hat ja einen Artikel zu Anwendung des features verfasst...
be mir will der groschen aber einfach nicht fallen (heul)

Evtl. helfen die folgenden Artikel ein wenig:
https://css-tricks.com/video-screenc...onsive-images/
http://martinwolf.org/2014/05/07/the...zes-explained/
http://www.smashingmagazine.com/2014...fect-polyfill/
http://www.smashingmagazine.com/2014...icture-srcset/

[RockSolid Themes]

kann mir jemand ein gutes/oft verwendetes praxis-beispiel nennen.. (bilder für desktop/mobil zb)

Angenommen du hast eine Header-Grafik die (per CSS) auf allen Geräten in 100% Breite des Browsers angezeigt wird. Dann stellst du für diese Grafik eine Bildgröße mit folgenden Einstellungen ein:

• Breite: 1024
• Sizes-Attribut: 100vw
• Skalierungsfaktor: 0.33x, 0.66x, 1x, 1.5x, 2x

Contao erstellt dann für dich Bilder in den Breiten 338, 676, 1024, 1536 und 2048 aus denen der Browser das für sich passende Bild auswählen kann.

[Franko]

Angenommen du hast eine Header-Grafik die (per CSS) auf allen Geräten in 100% Breite des Browsers angezeigt wird. Dann stellst du für diese Grafik eine Bildgröße mit folgenden Einstellungen ein:

• Breite: 1024
• Sizes-Attribut: 100vw
• Skalierungsfaktor: 0.33x, 0.66x, 1x, 1.5x, 2x

Contao erstellt dann für dich Bilder in den Breiten 338, 676, 1024, 1536 und 2048 aus denen der Browser das für sich passende Bild auswählen kann.

Jetzt habe ich auch ne Frage:
Welche Abmessungen sollte das Original-Bild für dieses Beispiel dann haben - 2048px?
Und welches Bild/Größe soll dann für das fallback src gesetzt werden?

Und wie geht Ihr mit dem Polyfill vor - Wenn ich es richtig verstanden habe laden Browser die dies nicht unterstützen bei Nutzung des polyfills auch zunächst das fallback Bild - also zwei Requests.
Kann man das umgehen?

Nachtrag: Für welche Geräte greifen denn der Skalierungsfaktor 0.33x und 0.66x?
Danke

[RockSolid Themes]

Welche Abmessungen sollte das Original-Bild für dieses Beispiel dann haben - 2048px?

Ja, mindestens 2048px.

Und welches Bild/Größe soll dann für das fallback src gesetzt werden?

Contao setzt hierbei immer das 1x Bild als Fallback (in dem Beispiel das 1024er). Man sollte hierbei auf die häufigsten Besucher der Website achten. Wenn man hauptsächlich mobile Besucher hat sollte man eher die Einstellungen Breite 338, Skalierungsfaktor 1x, 2x, 3x, 4.5x, 6x verwenden.

Und wie geht Ihr mit dem Polyfill vor - Wenn ich es richtig verstanden habe laden Browser die dies nicht unterstützen bei Nutzung des polyfills auch zunächst das fallback Bild - also zwei Requests.
Kann man das umgehen?

Nur indem man das picture_default Template anpasst und das Attribut „src“ entfernt, allerdings funktionieren dann die Bilder ohne JavaScript nicht. Wenn der Fallback gut gewählt ist, kann man überlegen den Polyfill nicht zu aktivieren. Das kommt jedoch immer auf das Projekt und die Besucher drauf an.

Für welche Geräte greifen denn der Skalierungsfaktor 0.33x und 0.66x?

Für alle Geräte deren Bildschirm bzw. Browserfenster schmäler als 338 bzw. 676 (Device-)Pixel ist, vorausgesetzt das Sizes-Attribut ist auf 100vw eingestellt.

[Franko]

Vielen Dank,
macht Sinn ...

[Spooky]

Für alle Geräte deren Bildschirm bzw. Browserfenster schmäler als 338 bzw. 676 (Device-)Pixel ist, vorausgesetzt das Sizes-Attribut ist auf 100vw eingestellt.

Werden hier wirklich Device Pixel genommen?

[RockSolid Themes]

Werden hier wirklich Device Pixel genommen?

Ja, ein iPhone 3GS (nicht Retina) würde das 338-breite Bild nehmen, das iPhone 4 (mit Retina) würde das 676-breite Bild verwenden.

Allerdings könnte der Browser theoretisch auch ein kleineres Bild verwenden, wenn er z. B. eine sehr schlechte Internet-Verbindung hat und Bandbreite sparen möchte. Derzeit macht das jedoch noch kein Browser.

[WebRoxx]

Muss mich hier auch mal einklinken.

Habe auch bilder erstellen lassen, mit em Reload der Seite wirdauch das richtige geladen, nur für mich macht das null sind, denn wenn einer meine Seite in einen kleineren Browserfenster öffnet und es dann groß macht ist das bild einfach viel zu Pixlig. Ich dachte immer das passt die Bilder auch an wenn man das Browserfenster verkleinert, oder sehe ich das falsch?

WEnn das doch so sein sollte dann wäre ich echt auf die Lösung gespannt

[Spooky]

Die Lösung kann nur von den Entwicklern der jeweiligen Browser kommen.

[RockSolid Themes]

für mich macht das null sind, denn wenn einer meine Seite in einen kleineren Browserfenster öffnet und es dann groß macht ist das bild einfach viel zu Pixlig.

Alle Browser und auch der von Contao verwendete polyfill respimage laden beim vergrößern des Browserfensters ein größeres Bild sofern eines verfügbar ist. Einzige Ausnahme dabei ist Firefox in der Version 38 und dort ist das ein bekannter Bug der höchstwahrscheinlich in Version 40 behoben wird.

Ich dachte immer das passt die Bilder auch an wenn man das Browserfenster verkleinert, oder sehe ich das falsch?

Beim Browserfenster verkleinern oder wenn sich ein größeres Bild bereits im Cache des Browsers befindet sieht das schon anders aus. Chrome 43 zeigt z. B. das größte Bild an das sich im Cache befindet, außer es ist zu klein, dann lädt er ein größeres nach. Dass ein Bild zu pixelig wird sollte also nie vorkommen (Ausnahme Firefox 38).

Das alles gilt natürlich nur für Responsive Images ohne „Art Direction“ (srcset und sizes). Bilder mit „Art Direction“ (<picture> und <source>) werden vom Browser immer passend zur aktuellen Fensterbreite ausgewählt (Ausnahme Firefox 38).

Beispiel ohne Art-Direction: http://codepen.io/aFarkas/full/KwKdpY/
Beispiel mit Art-Direction: http://codepen.io/aFarkas/full/yyLJWO/

Tipp: Beim testen Cache deaktivieren.

[WebRoxx]

Danke für die Antwort.

Sollte man vorerst darauf verzichten, oder wie macht ihr das da un? OK ein normeler WEbuser wird ja in den wenigstens Fällen das Browserfenster verkleinern

[Spooky]

Danke für die Antwort.

Sollte man vorerst darauf verzichten, oder wie macht ihr das da un? OK ein normeler WEbuser wird ja in den wenigstens Fällen das Browserfenster verkleinern

Warum willst du darauf verzichten? Selbst wenn der Web User manchmal das Browser Fenster verkleinert, macht er das ja nicht auf jeder Seite deiner Website (sonst wäre das Browser Fenster irgendwann 0x0 Pixel groß ). Und dass der User das Fenster verkleinert und dadurch nicht das "richtige" Bild angezeigt wird, sollte ja kein Problem sein - dann hat er für diesen Page Load nun mal das größere Bild, aber dadurch auch keinen Qualitätsverlust, es sollte also nicht auffallen.

[Kahmoon]

Noch mal was zum Verständnis. Ich habe den Wert "0.33x, 0.66x, 1x" jetzt ins oberste Element eingetragen. Aber ich habe ja je nach Auflösung auch noch weitere Bildgrößen-Media-Query (max width 480, max.width 320 etc als eigene Größen). Reicht dieser Eintrag in der Einstellung der Bildgröße selbst?

Siehe Anhang. Beim Pfeil ist der Skalierungsfaktor gesetzt, bei den 4 Untergrößen nicht.

[RockSolid Themes]

Sollte man vorerst darauf verzichten, oder wie macht ihr das da un?

Wir sehen keinen Grund darauf zu verzichten, selbst im Firefox 38 ist die Lösung deutlich besser als keine responsive Images zu verwenden.

Noch mal was zum Verständnis. Ich habe den Wert "0.33x, 0.66x, 1x" jetzt ins oberste Element eingetragen. Aber ich habe ja je nach Auflösung auch noch weitere Bildgrößen-Media-Query (max width 480, max.width 320 etc als eigene Größen). Reicht dieser Eintrag in der Einstellung der Bildgröße selbst?

Nein, der Skalierungsfaktor wird nur dort eingesetzt wo er auch konfiguriert ist, d.h. in diesem Fall nur für die Hauptgröße.

Die Einstellungen auf dem Screenshot lassen vermuten, dass eigentlich keine „Art Direction“ nötig wäre, dennoch wird sie verwendet. „Art Direction“ (<picture> und <source>) sollte man aus Gründen der Server- und Client-Performance nur einsetzen wenn es nötig ist (z. B. für unterschiedliche Proportionen oder Ausschnitte), ansonsten sollte man nur `sizes` und `srcset` einsetzen.

[Kahmoon]

Hmm das habe ich doch so? Wozu braucht man denn sonst die ganzen Untergrößen? Die haben jetzt keinen Wert bei Pixeldichte und Sizes.

Das heisst wenn ich eine Grafik mit 1100 px habe machen die Pixeldichten erst Sinn ab einer Bildschirmauflösung von unter der Hälfte? Sprich ab z.B. 480px max-width?

Edit:
Am iPhone sehe ich hier keinen Unterschied egal was ich für Werte bei der Bildgröße für 480px schreibe. Mit und ohne vw, mit und ohne 0.33x, 0.66x, 1x etc.

[Spooky]

Ich muss sagen, ich finde die Syntax von Responsive Image Sets auch immer noch sehr verwirrend (unabhängig davon, wie es in Contao nun implementiert ist).

Angenommen man hat ein Spaltenlayout mit zwei gleich großen Spalten, bei einer maximalen Breite von 1140px. Gehen wir einfach mal von vollen Spaltengrößen aus, also hätte man 570px pro Spalte. In diesen Spalten befinden sich Bilder, die zwischen einer Größe von sagen wir 769 und unendlich vielen Device Pixel 570px Breit dargestellt werden sollen. Ab 768px hat man bspw. einen Umbruch, wo die Spalten dann untereinander sind und auf die volle Breite des Devices gezogen sind. Nun sollen die Bilder mindestens so Breit sind, wie das Device selbst.

Wie würde man das mit sizes und srcset umsetzen?

// edit: nvm, got it http://dev.inspiredminds.at/resp_image_test/

<div class="columns">
    <div class="column">
        <figure>
            <img src="http://placehold.it/570x320"
                 sizes="(min-width:769px) 570px, 100vw" 
                 srcset="http://placehold.it/1080x607 1080w,
                         http://placehold.it/768x432   768w,
                         http://placehold.it/720x405   720w,
                         http://placehold.it/640x360   640w,
                         http://placehold.it/570x320   570w,
                         http://placehold.it/360x202   360w" />
        </figure>
    </div>
    <div class="column">
        <figure>
            <img src="http://placehold.it/570x320"
                 sizes="(min-width:769px) 570px, 100vw" 
                 srcset="http://placehold.it/1080x607 1080w,
                         http://placehold.it/768x432   768w,
                         http://placehold.it/720x405   720w,
                         http://placehold.it/640x360   640w,
                         http://placehold.it/570x320   570w,
                         http://placehold.it/360x202   360w" />
        </figure>
    </div>
</div> 

[RockSolid Themes]

Wozu braucht man denn sonst die ganzen Untergrößen?

Die Untergrößen benötigt man nur für „Art Direction“. Den Unterschied zwischen mit und ohne „Art Direction“ haben wir hier erklärt: http://rocksolidthemes.com/de/contao...picture-contao

Am iPhone sehe ich hier keinen Unterschied egal was ich für Werte bei der Bildgröße für 480px schreibe. Mit und ohne vw, mit und ohne 0.33x, 0.66x, 1x etc.

Ohne die kompletten Einstellungen und das iPhone Modell zu kennen ist es schwer festzustellen warum welches Bild gewählt wird. Aber bei einer Einstellung (wie im Screenshot) von „(max-width 360px) 320x0“ mit „100vw“ und Skalierungsfaktoren „0.33x, 0.66x, 1x“ werden alle iPhones immer das größte Bild nehmen.

[Kahmoon]

Hmm ok. Leider verstehe ich das Ganze irgendwie nicht . Ich lasse einfach die Pixeldichte und Size weg.

[rflx]

Alle Browser und auch der von Contao verwendete polyfill respimage laden beim vergrößern des Browserfensters ein größeres Bild sofern eines verfügbar ist. Einzige Ausnahme dabei ist Firefox in der Version 38 und dort ist das ein bekannter Bug der höchstwahrscheinlich in Version 40 behoben wird.

Leider wird dieser Bug erst in Firefox 41 behoben sein. Gibt es hierfür einen Workaround (Javascript) für ältere FF Versionen?

Edit: Habe bisher folgenden Fix (picturefill gecko-picture.js) gefunden, jedoch funktioniert dieser nur teilweise da einige Objekte verschoben werden.

Cheers,
rflx

[Schnippel]

Ja, mindestens 2048px.



Contao setzt hierbei immer das 1x Bild als Fallback (in dem Beispiel das 1024er). Man sollte hierbei auf die häufigsten Besucher der Website achten. Wenn man hauptsächlich mobile Besucher hat sollte man eher die Einstellungen Breite 338, Skalierungsfaktor 1x, 2x, 3x, 4.5x, 6x verwenden.

Auch mir raucht der Kopf :-/

Zu meinem Verständnis:

Schritt 1: Ich lade ein Original-Bild in der Breite von 2048px in Contao-Dateiverwaltung hoch.

Schritt 2: ich gebe in Themes-Bildgrößen folgende Werte in die Felder ein:

3.jpg

Das bedetuet also dann, das für den Fallback src das Bild mit den 338px genommen wird, da dies in der
Breite mit 338 angegeben ist und Contao automatisch dies als 1x für den Fallback src nimmt?
Würde ich da also die Originalgröße von 2018px in die Breite eintragen, dann würde Contao also für den Fallback src das
Bild mit den 2018 px nehmen?
Heißt das, dass das 338px-Bild dann von der Datenmenge auch geringer ist und so schneller geladen wird als das 2018px für Fallback src?

Nächste Frage:
Was ist, wenn man mit dem zweiten Mobile-Layout arbeitet?

[Schnippel]

Zusätzlich zur technischen Umsetzung von diesem Thema muß man ja auch
die suchmaschinenoptimierte Darstellung von Bilder im Auge behalten, z.B.
für die google-Bildersuche.

Der Code, der bei der hier beschriebenen Technik generiert wird, schaut
ja recht umfangreich und von den Keywords her sehr wirr aus. Dazu ist
ein Script eingebunden, daß meines Wissens nach nicht positiv von google
beim Ranking bewertet wird:

<figure class="image_container">

    
    

<img alt="" sizes="100vw," srcset="assets/images/f/gemeindehaus-bar-c0c2345f.jpg 500w, assets/images/9/gemeindehaus-bar-c081b109.jpg 250w, assets/images/1/gemeindehaus-bar-8f94e671.jpg 375w, assets/images/6/gemeindehaus-bar-080fcee6.jpg 1000w, assets/images/2/gemeindehaus-bar-bb3fcfb2.jpg 2000w, assets/images/6/gemeindehaus-bar-7d009d96.jpg 2500w, assets/images/8/gemeindehaus-bar-1929d538.jpg 3000w" src="assets/images/f/gemeindehaus-bar-c0c2345f.jpg">


  <script>
    window.respimage &amp;&amp; window.respimage({
      elements: [document.images[document.images.length - 1]]
    });
  </script>

    
          <figcaption class="caption">Medium 500</figcaption>
    
  </figure>

Wäre es da nicht besser, statt nur ein großes Bild (z.B. 2048px) lieber drei Bilder in 3 verschiedenen Größen in verschiedenen Ordner hochzuladen?
z.B.
/images/small/keyword.jpg
/images/medium/keyword.jpg
/images/large/keyword.jpg

und das Ganze dann doch per Hand einzubinden wir z.B.

<img src="/images/small/keyword.jpg"
     srcset="/images/small/keyword.jpg 650w, 
             /images/medium/keyword.jpg 1000w, 
             /images/large/keyword.jpg 1600w"
      sizes="100vw" alt="keyword" titel="Das Keyword wird angezigt">

??

Wie sieht Ihr das?

[Spooky]

Der Code, der bei der hier beschriebenen Technik generiert wird, schaut
ja recht umfangreich und von den Keywords her sehr wirr aus.

Wie "wirr" der Code "aussieht" für einen menschlichen Laien ist für die Suchmaschine (welche ja eine Maschine ist), irrelevant . Darüberhinaus legst die Metadaten der Datei ja du selbst fest, Contao zieht sie dir nicht aus der Nase.

Dazu ist
ein Script eingebunden, daß meines Wissens nach nicht positiv von google
beim Ranking bewertet wird:

Das ist blödsinn.

Wäre es da nicht besser, statt nur ein großes Bild (z.B. 2048px) lieber drei Bilder in 3 verschiedenen Größen in verschiedenen Ordner hochzuladen?
z.B.
/images/small/keyword.jpg
/images/medium/keyword.jpg
/images/large/keyword.jpg

und das Ganze dann doch per Hand einzubinden wir z.B.

<img src="/images/small/keyword.jpg"
     srcset="/images/small/keyword.jpg 650w, 
             /images/medium/keyword.jpg 1000w, 
             /images/large/keyword.jpg 1600w"
      sizes="100vw" alt="keyword" titel="Das Keyword wird angezigt">

Warum soll das besser sein? Es kommt ja dasselbe dabei heraus (wenn du die Responsive Image Einstellungen entsprechend setzt). Und wenn du das responsive image polyfill nicht haben willst, kannst du es einfach aus den Templates entfernen.

[Schnippel]

Na meines Wissen wäre statt dem von Contao generierten Weg

assets/images/6/gemeindehaus-bar-080fcee6.jpg

folgender aus SEO Sicht besser

/images/gemeindehaus-bar.jpg

Warum macht Contao so eine tiefe Ordnerstruktur ?
Lässt sich das irgendwie beinflussen?

[Spooky]

Alle von Contao generierten Bilder werden in /assets/images gespeichert (und das hat nichts mit der Responsive Image Funktion zu tun). Sofern du passende Metadaten angegeben hast, ist es aus "SEO" Sicht (technisch gesehen) egal, wo sich die Datei befindet und wie sie heißt. Und auch ohne die Metadaten macht es keinen Unterschied ob sich das Bild in /images/small oder in /assets/images/6 befindet.

[mlweb]

Bei der Dateistruktur hast Du sicher Recht, der Dateiname ist m.E. nicht ganz egal, wird u.a. auch von Sistrix so gesehen. Ist zumindestens dann wichtig, wenn ein Bild ranken soll.