Zeige alle Blogbeiträge

Responsive Grafiken testen: Blink ändert sein Verhalten

  | Beitrag empfehlen auf 

VT Responsive Grafiken mit HTML

Nichts ist so beständig wie die Veränderung, und das gilt ganz besonders für ein so aktuelles Thema wie "Responsive Grafiken mit HTML" (Videotraining), das auch in der zweiten Auflage von Flexible Boxes ausführlich besprochen wird. 

Blink, die Rendering Engine in Chrome und Opera, hat irgendwann in den letzten Wochen zum Beispiel sein Verhalten bei srcset w geändert und passt Grafiken beim Verkleinern des Viewport nicht mehr an. 

Dadurch funktioniert das Beispiel für srcset w nicht mehr ganz so, wie ich das in meinem Videotraining gezeigt habe.

Das Videotraining "Responsive Grafiken mit HTML"

Im Videotraining "Responsive Grafiken mit HTML" zeige ich unter anderem im Film "Grafiken nach Viewportbreite auswählen: <img> und srcset w" im Browser, wie sich die Grafiken beim Verkleinern des Viewports automatisch anpassen.

In dem Screenshot aus dem Video hierunter wird der Viewport verkleinert und vergrößert. Unterhalb von 800px wird die Medium-Grafik angezeigt, oberhalb davon die Large. 

Opera ändert die Grafiken beim Verkleinern des Viewport
Beim Verkleinern und Vergrößern des Viewport änderte sich die Grafik

Bei der Aufnahme des Video Mitte Dezember 2014 funktionierte das wunderbar, aber heute fragte ein Leser in einer Mail, wie ich das denn gemacht hätte, denn bei ihm würde das so nicht klappen. 

Also habe ich die Beispielseiten aus dem Videotraining in Opera 27 unter Windows geladen und siehe da - es geht nicht mehr:

  • Von groß nach klein ändert sich nichts mehr.
  • Von klein nach groß geht es, wenn der Browser mit kleinem Fenster gestartet wurde. 

Also nur, wenn man den Browser mit einem kleinen Fenster öffnet und dann vergrößert, werden die Grafiken ausgetauscht. Chrome 41 verhält sich genauso, auch unter OS X. 

Also habe ich ein bisschen recherchiert, und so wie es aussieht hat Blink tatsächlich irgendwann sein Verhalten bei srcset w geändert.

Blink hat sein Verhalten bei »srcset w« geändert

Tweet von Yoav Weiss

Entwickler Yoav Weiss, der responsive Grafiken in Blink implementiert hat, beschrieb dieses Verhalten am 21. Oktober 2014 in einem Tweet: 

Blink's srcset implementation should load a different resource when viewport size changes. *But* you should not rely on that. It may change.

In den Kommentaren darunter wird angeregt, dass man das Verhalten ändert:

Switching to a smaller resource is pretty weird. Use case? Can the algorithm only consider larger resources on resize? 

Und genau das scheint irgendwann passiert zu sein. 

Der Browser reagiert nicht mehr auf eine Verkleinerung des Viewport. Die Grafiken werden nur noch geändert, wenn man den Browser in einem kleinen Fenster startet und dann vergrößert. 

Fazit: So wie im Film geht's nicht mehr

Diese Änderung ist in der Praxis nicht weiter schlimm, da außer uns Webmenschen niemand sein Browserfenster verkleinert und vergrößert, aber es ist natürlich schon doof, wenn das im Film wunderbar funktioniert und beim Nachbauen dann nicht. 

Also: So wie im Film gezeigt geht es nicht mehr.

Wenn Sie die Auswirkungen von srcset w live im Browser sehen wollen, müssen Sie den Browser mit einem kleinen Fenster starten und es dann vergrößern.

UPDATE 1: Firefox macht's nach einem Reload

Firefox versteht seit Version 38 responsive Grafiken und tauscht im Gegensatz zu Chrome/Opera die Grafiken auch beim Verkleinern des Viewport von groß nach klein - allerdings erst nach einem Neuladen der Seite.

UPDATE 2: Edge macht es so wie im Video

Microsoft hat mit Edge den Internet Explorer hinter sich gelassen und seit Version 13 versteht Edge auch <picture>.

Wenn Sie die Beispiele aus dem Videotraining in Edge testen, verhalten sie sich genau wie in den Filmen: die Grafiken werden live beim Verkleinern und Vergrößern ausgetauscht. 

[Update vom 21. Januar 2016]

Peter Müller - Autor und Dozent

Mein Name ist Peter Müller. Ich bin Autor diverser Fachbücher und Videotrainings, Dozent und Webworker.

Ab und an schreibe ich hier im Blog Beiträge zu den verschiedensten Themen, aber meistens hat es was mit dem Web zu tun.

Zeige alle Blogbeiträge

Einen Kommentar schreiben

Bitte füllen Sie alle Formularfelder mit einem Sternchen aus.