Bug in Responsive Images?

[denniserdmann]

Moin,

ich habe gestern mal die neue Funktion der Responsive Images in Contao 3.4 getestet und bin
dabei auf folgendes Problem gestoßen:

Ich lasse ein Bild in unterschiedlichen Größen, gleicher Bildausschnitt von Contao generieren (also nicht art-directed).
Wenn ich das Sizes-Attribut leer lasse, werden wie erwartet meine, meine Bilder mit Skalierungsfaktor (1x, 2x) aufgezählt. Wenn ich das Sizes-Attribut ausfülle, werden, ebenfalls wie erwartet, die Bilder mit einer empfohlenen Weite ausgegeben (200w, 300w).

Allerdings kommt die im Sizes-Attribut angegebene Weite(z.B. 50vw) nicht zum Tragen. Das hängt nach ersten Versuchen damit zusammen, dass bei der Ausgabe mit empfohlenen Weiten keine width="" und height="" zugewiesen werden dürften, siehe auch Spezifikation bei whatwg.

Da das Thema noch sehr neu ist, könnte es natürlich auch sein, dass ich vergessen habe ein Feld auszufüllen o.ä. Den Haken im Seitenlayout für die Verwendung des respimage.js habe ich aber gesetzt. Der Fehler tritt sowohl im aktivierten Zustand als auch im dekaktivierten Zustand unter Safari und Chrome auf.

Kann jemand den Fehler nachvollziehen?

Grüße,
Dennis

[RockSolid Themes]

Hallo Dennis,

auch mit dem Sizes-Attribut dürfen width und height angegeben werden. Das Sizes-Attribut sollte (ungefähr) widerspiegeln wie breit das Bild vom CSS der Website dargestellt wird. Die Breite des Bildes sollte also übers CSS definiert werden. Zitat aus der Spezifikation: „These sizes do not necessarily have to match up exactly with the actual image width as specified in the CSS.“.

Herzliche Grüße
Dein RockSolid Themes Team

[denniserdmann]

Moin RockSolid Themes Team,

aber das würde, wenn ich euch richtig verstehe, ja heißen, dass ich die gleichen (oder sehr ähnliche) Anweisungen, die ich in das Sizes-Attribut schreibe, auch noch mal in meine CSS schreiben müsste. Wenn ich also Änderungen vornehme, diese immer an beiden Stellen vornehmen müsste.

In allen Beispielen, die ich zu dem Thema gefunden habe, wurde auf width="" und height="" verzichtet. Man könnte sagen, dass das daran liegt, dass es ja nur Beispiele sind, aber warum macht man sich dann die Mühe und trägt bei allen Beispielen ein ALT-Attribut ein?

Welche CSS-Anweisungen schreibt ihr denn, um in der Spec erwähntes Beispiel zum Laufen zu bringen?

<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
     srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
     src="swing-400.jpg" alt="Kettlebell Swing">

Grüße und vielen Dank für eure Mühen,
Dennis

[RockSolid Themes]

Da die meisten Browser das Sizes-Attribut nicht verstehen, sollte die Bildgröße über das CSS angegeben werden. Und da laut Spezifikation die Angaben im Sizes-Attribut nicht genau mit der tatsächlichen Größe übereinstimmen müssen, kann man dort eine einfachere Variante wählen.

Für den von Contao verwendeten Polyfill wäre ein Plugin nötig damit die Bildgröße anhand des Sizes-Attributs gesetzt werden würde.

Die CSS-Anweisungen für das Beispiel könnten z. B. so aussehen wenn Sich das Bild innerhalb von #content befindet:

* {
    box-sizing: border-box;
}
img {
    width: 100%;
    height: auto;
}
#content {
    width: 33%;
    padding: 0 50px;
}
@media (max-width: 50em) {
    #content {
        width: 50%;
        padding: 0;
    }
}
@media (max-width: 30em) {
    #content {
        width: 100%;
    }
}

Dennoch hast du recht, dass die Attribute width und height eigentlich weggelassen werden könnten. Denn entweder sie werden sowieso vom CSS überschrieben oder sie passen eventuell nicht zum aktuell angezeigten Bild. Dafür gibt es jetzt auch ein Issue auf GitHub

[Gandalf]

Hallo zusammen

Versuche mich momentan auch mit den neuen Responsive-Funktionen in der Version 3.4.

Dazu habe ich eine Logografik erstellt, welche in der Desktopversion eine Grösse von 220x80px besitzt.
Dafür habe ich in den Themes eine Bildgrösse von eben den 220x80px und eine Pixeldichte/Skalierungsfaktor von 1x,2x angegeben. Dazu noch diese Mediaqueries-Anweisung > (max-width: 989px) 193x70px Pixeldichte/Skalierungsfaktor 1x,2x erstellt.

Wenn ich das Logo bzw. Bild nun als Inhaltselement in den Content einfüge, funktioniert dies einwandfrei. Unter 989px wird das Logo in der kleineren Version (193x70px) dargestellt.

Nun wollte ich das Logo mit einem Modul (Eigener HTML-Code) erstellen. Dafür habe ich den Quellcode des im Inhaltsbereich eingefügten Logos kopiert und ins Modul eingefügt.

Beispiel:

<div class="logo">
<a href="./">
<picture>
<source media="(max-width: 989px)" srcset="assets/images/3/logo-33ff4bf3.png 1x, assets/images/6/logo-5823a9c6.png 2x"></source>
<img alt="" srcset="assets/images/9/logo-0b865c49.png 1x, assets/images/4/logo-d4ac0304.png 2x" src="assets/images/9/logo-0b865c49.png">
</picture>
</a>
</div>

Klappt einwandfrei. Sobald ich aber die Grafik, welche ich im Inhaltselement eingefügt habe lösche, verschwindet das Logo. Hat jemand eine Idee woran es liegen könnte?

Gandalf

[denniserdmann]

Dennoch hast du recht, dass die Attribute width und height eigentlich weggelassen werden könnten. Denn entweder sie werden sowieso vom CSS überschrieben oder sie passen eventuell nicht zum aktuell angezeigten Bild. Dafür gibt es jetzt auch ein Issue auf GitHub

Klasse,
das sollte es anderen Contao-Nutzern auch einfacher machen, die neue Funktion zu verstehen. Es hat auch bei mir eine Weile gedauert, bis ich verstanden haben, dass width und height der Grund waren, warum mein Bild nicht vergrößert wurde.

Grüße,
Dennis

[denniserdmann]

Sobald ich aber die Grafik, welche ich im Inhaltselement eingefügt habe lösche, verschwindet das Logo. Hat jemand eine Idee woran es liegen könnte?

Hallo Gandalf,

liegt es vielleicht daran, dass die von Contao erstellten Varianten des Logos nach dem Löschen des Elements auch wieder gelöscht werden?
Falls ja, dann könntest du dein Logo auch einfach selbst in den entsprechenden Größen anlegen und den Pfad zum assest-Ordner ersetzen.

Je nachdem, ob dein Logo nur die Größe ändert, oder ob sich auch das Motiv (bzw. der Bildausschnitt) ändert, kannst du dabei auch auf das PICTURE-Element
verzichten und nur mit IMG + SRCSET arbeiten.

Grüße,
Dennis

[Gandalf]

liegt es vielleicht daran, dass die von Contao erstellten Varianten des Logos nach dem Löschen des Elements auch wieder gelöscht werden?
Falls ja, dann könntest du dein Logo auch einfach selbst in den entsprechenden Größen anlegen und den Pfad zum assest-Ordner ersetzen.

Gute Idee! Danke! Nun funktioniert es wie gewünscht :-)

[Gandalf]

Hallo zusammen

Habe für Thumnails eine Grösse von 300px x 220px als Bildgrösse definiert und dies beim Bild zugewiesen. Wo kann ich dann z.b. ein Exaktes Format (Mitte oben) definieren?
In den Einstellungen kann ich wohl > Größenänderungsmodus > Exaktes Format auswählen, die Position aber nicht bestimmen. Fehlt da nicht die Auswahlmöglichkeit?

Gandalf

[Gandalf]

Habs nun wohl selber herausgefunden. Dies geht wohl über das markieren des Bildes ;-)

[denniserdmann]

Habs nun wohl selber herausgefunden. Dies geht wohl über das markieren des Bildes ;-)

Ja genau.

Für alle, die vor dem gleichen Problem stehen hier noch mal der Hinweis auf den sehr ausführlichen Artikel bei rocksolidthemes. Unter „Der Zoom-Faktor und der bedeutende Bereich von Bildern“ wird beschrieben, wie man den wichtigen Bereich eines Bildes direkt über die Dateiverwaltung auswählt.

[Gandalf]

Je nachdem, ob dein Logo nur die Größe ändert, oder ob sich auch das Motiv (bzw. der Bildausschnitt) ändert, kannst du dabei auch auf das PICTURE-Element
verzichten und nur mit IMG + SRCSET arbeiten.

Was muss ich den machen um auf dieses PICTURE-Element zu verzichten? Ich habe unter den Einstellungen kein Bildgrössen-Media-Query eingetragen.
Nur ein Bildformat welches folgendermassen aussieht:
Breite=220 Höhe=80, Sizes-Attribut= (max-width: 989px) 193px 220px, Pixeldichte/Skalierungsfaktor=1x,2x

Ziel wäre es, dass bis zu einer Viewportbreite von 989px das Logo 193px breit ist, drüber 220px.

Eine Idee?

Gandalf

[denniserdmann]

Moin Gandalf,

das hat bei mir auch ein wenig gedauert, bis ich die Zusammenhänge verstanden habe. Die Responsive Images kann man sich ja wie einen Artikel oder eine News vorstellen. Es gibt ein einen Umschlag (eine Bildgröße) und darin kannst du neue Bildgrößen-Mediaqueries anlegen. Diese Bildgrößen-Mediaqueries sind für das Picture-Element gedacht. Wenn du nur IMG + SRCSET verwenden willst, dann machst du alle Angaben über den Umschlag (also die Bildgröße, die du anlegst), mithilfe des SIZES-Attribut und Pixeldichte/Skalierungsfaktor.

EDIT: Und wie von Rocksolid weiter oben erwähnt mithilfe von CSS.

Grüße,
Dennis

[kischd]

Hallo Dennis,
danke für deinen Artikel auf rocksolidthemes. Hat mir die Sache schon bisschen klarer gemacht.

Trotzdem sind bei mir noch Fragen offen:

Ich hab das Logo auf meiner Seite über ein hmtl-modul eingepflegt. Das bedeutet nun, dass ich srcset hier selbst im html schreiben und auch die einzelnen Bilder selbst erstellen muss oder?

Ich hab mal ein Bild definiert: 100vw und 1x, 1,5x, 2x
was ja bedeutet immer 100% und 3 Bildgrößen wurden erzeugt !?
Query hab ich noch keine angelegt weil ich hier noch auf dem Schlauch stehe.

Die stelle ich nur ein wenn ich es bei einer bestimmten max-width das Bild in ner anderen Größe haben will?

Dabei verwirrt mich dieses Beispiel:
(max-width: 600px) 100vw, (max-width: 900px) 60vw, 500px

Heißt???
bei 600px breite ist das Bild 100% breit; bei 900px Breite 60% breit alles größere 500px ?
richtig verstanden?

[denniserdmann]

Hallo Dennis,
danke für deinen Artikel auf rocksolidthemes. Hat mir die Sache schon bisschen klarer gemacht.

Moin!
Der Artikel ist gar nicht von mir ;-)

Trotzdem sind bei mir noch Fragen offen:

Ich hab das Logo auf meiner Seite über ein hmtl-modul eingepflegt. Das bedeutet nun, dass ich srcset hier selbst im html schreiben und auch die einzelnen Bilder selbst erstellen muss oder?

Ja. Bisher habe ich das auch immer so gemacht, dass ich das Logo per HTML-Modul eingebunden habe. Durch Responsive Images könnte man jetzt mal darüber nachdenken, ob man das entweder über eine Erweiterung löst (gibt soweit ich das gesehen habe aber momentan noch keine) oder aber, ob man das Logo als Bild-Element in einer nichtsichtbaren Ressourcen-Seite anlegt und dann im Seitenlayout referenziert. Dann musst du Dir auch weniger Gedanken über die korrekte Schreibweise machen.

Dabei verwirrt mich dieses Beispiel:
(max-width: 600px) 100vw, (max-width: 900px) 60vw, 500px

Heißt???
bei 600px breite ist das Bild 100% breit; bei 900px Breite 60% breit alles größere 500px ?
richtig verstanden?

Fast. Bis 600px Viewport soll das Bild 100% breit sein, bei 601 - 900px soll das Bild 60% breit sein. Soweit richtig.
Der letzte wert, die 500px greift für alle Viewports, die breiter als 900px sind.

Wichtig: Immer dran denken, das Respimage-Script im Seitenlayout zu aktivieren!

Grüße,
Dennis

[Grossvater]

Warum wird das Fallback image (<img>) eigentlich nciht auf die vorgegebene Größe gerendert?

[Spooky]

Erkläre dein Problem genauer. Wie so oft ist es bei deinen Posts so, dass man alles aus dir heraus kitzeln muss. Selbständigkeit ist wohl etwas fremdes für dich.

[mlweb]

@Spooky Ich glaube nicht, dass das mit fehlender Selbständigkeit zu tun hat.

Es ist wohl mehr ein gewisses Maß an Betriebsblindheit, dass sich bei Fragenden und Helfenden gleichermaßen gelegentlich einschleicht.

[Spooky]

Naja, lies mal seine anderen Posts. Die meisten sind einzelne Sätze, wo man nie den Eindruck hat, als würde er hinterfragen, was das Problem ist, wie man das Problem beschreiben kann, welche Informationen notwendig sein könnten etc.

[Grossvater]

Ich setze irrtumlich zu viel vorraus, sorry. Ich gelobe Besserung.

Ich habe eine Bildgröße angelegt. Dort setze ich Breite von 480px und Höhe 320px. Unabhängig ob ich jetzt weitere "Bildgrößen-Media-Query"-Sources anlege, wird die Bildgröße des Fallbackimage nicht runtergerechnet.

Siehe Bild:err.jpg

[Spooky]

Das, was du da im Screenshot zeigst ist das "currentSrc" aufgrund des x1200 Media Queries (vermutlich), nicht das src des img.

[Grossvater]

Ist es ok, wenn ich hier das Thema etwas ausweite? Oder soll ich ein neues Thema aufmachen?

Aktuell habe ich das Problem, dass Bilder nicht Art-Directed (gezoomt) werden.
Also der Browser will einfach nicht auf das gezoomte Bild wechseln.

Die Bilder wurden alle korrekt resized.

respimage.js ist im Seitenlayout aktiviert.

Getestet in Chrome Version 51.0.2704.106 (64-bit), Safari Version 9.1.2 (11601.7.7)

[Spooky]

Poste einen Link zur Seite und alle relevanten Einstellungen.

[Grossvater]

Ich kann leider keinen Link senden, da das Projekt für die Öffentlichkeit zu sensibel ist.

Kann ich dir per PM einen Link senden?

[Grossvater]

Hier schon einmal der HTML Output.
Die Quellen sind alle richtig resized.
Contao 3.5.15

<figure class="image_container">
  <picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
          <source srcset="assets/images/1/bild-fe746a81.png" sizes="100vw" media="(max-width:992px)">
          <source srcset="assets/images/7/bild-e1969687.png" sizes="100vw" media="(max-width:768px)">
          <source srcset="assets/images/e/bild-5e359fee.png" sizes="100vw" media="(max-width:544px)">
        <!--[if IE 9]></video><![endif]-->

<img src="files/static/Slider/bild.png" alt="">
  </picture>

Ich habe das Bootstrap Framework dahinter eingebunden. JS Console wirft keine Fehler.
Es ist seltsam, die gleichen Einstellungen habe ich auf anderer Seite erfolgreich am laufen.

EDIT: Nachdem ich es mithilfe des Network Tab im Chrome Browser durchdebuggt habe, konnte ich sehen, dass die Einstellung ...

          <source srcset="assets/images/1/bild-fe746a81.png" sizes="100vw" media="(max-width:992px)">

... die anderen Einstellungen irgendwie überschreibt. Diese habe ich deaktiviert, dann gings auch!

[RockSolid Themes]

In deinem HTML-Code sind die <source>-Elemente in der falschen Reihenfolge angeordnet, denn der Browser geht diese Liste von oben nach unten durch und nimmt den ersten Eintrag mit passendem Media-Query. In deinem Fall werden also die Media Queries (max-width:768px) und (max-width:544px) immer ignoriert da das erste <source>-Element mit (max-width:992px) vorher greift.