The browser loads two images - one for srcset, one for src (Chrome 41, etc.)
I am using the srcset attribute on a web page that I am developing.
<img src="img/picture-820x496.jpg"
srcset="img/picture-820x496.jpg 1200w,
img/picture-374x226.jpg 992w,
img/picture-305x185.jpg 768w,
img/picture-707x428.jpg 300w" />
If I check what assets are loaded with the page, I see that Chrome 41 as well as FF using a polyfill, and also Safari 7 always load the image twice - after full resolution and after the corresponding size from the srcset attribute. What am I doing wrong here?
source to share
I had a similar problem, I found that if the image was src
not one of the available in the images srcset
, the browser would download the image src
independently. The solution was to ensure that the url src
matches one of the image urls srcset
.
As an aside - as I understand it, the value w
following the image url should match (roughly) the width of the image. This allows the browser to best determine the displayed image based on the attribute sizes
and pixel density of the device. So you should probably change the values w
in your markup and add an attribute sizes
(which lets the browser know the size of the rendered image using media queries and backups, i.e. (min-width: 640px) 600px, 50vw
). Consider the example below:
<img src="img/picture-820x496.jpg"
srcset="img/picture-820x496.jpg 820w,
img/picture-707x428.jpg 707w,
img/picture-374x226.jpg 374w,
img/picture-305x185.jpg 305w"
sizes="100vw">
source to share