Skip to content

Instantly share code, notes, and snippets.

Creating a new element named picture or pic that mirrors the img element would allow for an easier responsive image element to polyfill.

When polyfilling srcN paired with the image element, legacy browsers which don't support srcN would download the image from the src attr and the matching srcN attr. This would result in dual downloads in legacy browser which need the srcN polyfill. These "legacy browsers" are every browser today.

A few ways around this would be to leave the img src attr empty. Or remove it all togher.

From Riloadr docs, Túbal Martín has some concerning notes about leaving the src attr empty on img elements.

Warning!: >Do not set an empty string for the value of src src="".