Implementierung von srcset im neuen Microsoft-Browser

Besserer Support von Responsive Images in Microsoft Edge
Kommentare

Bereits in den vergangenen Wochen gab es immer neue Features, die in Microsofts neuem Browser Edge implementiert wurden – etwa den Support von asm.js oder die Implementierung zahlreicher ECMAScript-6-Features. Auch was die Darstellung von Bildelementen in Responsive Webdesigns angeht, tut sich einiges.

So wurde mit dem Windows 10 Insider Build vor kurzem der Support für srcset eingeführt, was den ersten Schritt zum vollständigen Support des picture-Elements für Responsive Images markieren sollen. In einem Blogpost erklärt Greg Whitworth, wie man bei der Implementierung von srcset vorgegangen ist und welche Strategie für die zukünftige Handhabung von Responsive Images angestrebt wird.

srcset in Microsoft Edge

Angesichts der zahlreichen unterschiedlichen Geräte, von denen aus auf das Internet zugegriffen wird, wird die Nutzung von Responsive Images immer wichtiger. Umsetzen lässt sich deren Implementierung etwa mit dem srcset-Attribut, das es ermöglicht, ein Set von Bildern mit einem jeweils eigenen Skalierungsfaktor festzulegen. So können Browser das beste Bild für das aktuell verwendete Gerät auswählen, was gerade bei der Nutzung von Mobile Devices nützlich ist.

Der Browser sammelt alle Bilder in srcset und src, entscheidet, welches Bild am besten für das genutzte Device ist und lädt nur das entsprechende Bild herunter. So wird nicht nur für eine gute Performance gesorgt, sondern auch die benötigte Datenmenge bei mobilen Netzwerkverbindungen möglichst gering gehalten.

Allerdings lassen sich in Microsoft Edge derzeit nur die verschiedenen Bildvariationen definieren; der Support des width-Descriptors soll in künftigen Updates folgen.

Picturefill und currentSrc sorgen für Probleme bei Implementierung von srcset

Responsive Images bestehen aus verschiedenen Komponenten, etwa dem originalen srcset-Attribut mit Density-Descriptors, einem umfangreicheren srcset-Attribut, das width-Descriptors erlaubt, dem sizes-Attribut und dem picture-Element. All diese Komponenten stellt zum Beispiel das Polyfill Picturefill zur Verfügung. Allerdings sorgte genau diese Library bei der ersten Implementierung von srcset in Microsoft Edge für einige Probleme.

So wurde dabei auch das currentSrc-API eingebunden, das es Entwicklern ermöglicht, festzustellen, welches Bild tatsächlich vom Browser ausgewählt wurde. In Microsoft Edge sorgte das API allerdings dafür, dass Bilder nicht gerendert und User zu Fehlerseiten umgeleitet wurden, weil die Picturefill-Library automatisch alle Komponenten von Responsive Images einbindet, wenn das picture-Element nicht vom Browser unterstützt wird.

Darum hat sich das Microsoft-Edge-Team dafür entschieden, currentSrc zu entfernen und srcset ohne das API auszuspielen. Um das API künftig wieder miteinbinden zu können, sollten User von Picturefill die Library auf Version 2.3.1 updaten. Dazu sagt Greg Whitworth:

Ultimately, currentSrc will make its way back into Microsoft Edge – it’s just a matter of when. Depending on Picturefill 2.3.1 adoption, we’ll evaluate a preview release to Insiders; otherwise we’ll wait to restore currentSrc until after we get picture fully implemented.

Mehr Informationen dazu finden sich auch im zugehörigen Blogpost. In jedem Fall ist bereits diese frühe Implementierung von srcset in Microsoft Edge ein wichtiger Schritt für den besseren Support von Responsive Images.
Aufmacherbild: empty gallerys in museum von Shutterstock / Urheberrecht: zhu difeng

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -