angular / flex-layout

Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API
MIT License
5.9k stars 774 forks source link

Alter imgSrc to use srcset rather than just switching image source #1176

Open peternixey opened 4 years ago

peternixey commented 4 years ago

Proposal

What is the summary of the proposal?

Upgrade imgSrc to make use of the browser's own srcset functionality rather than just switching images.

What is the proposal?

The imgSrc API has a beautiful clarity about it and is great for implementation. However it doesn't seem to tap into the browser's own srcset functionality it means that while it serves the right image for the right screen size, it doesn't take account of pixel density.

This means that if an image if 400px across, imgSrc will load the same image whether it's displayed on a regular screen or a retina screen. If imgSrc instead generated srcset attributes, the browser would dynamically assess which the right image was given the current screen size.

Is there anything else we should know?

CaerusKaru commented 4 years ago

We used to have a separate directive for srcset, and I’m not entirely sure why we got rid of it. We won’t be changing the imgSrc directive though, bc srcset is not supported in IE11 (see here)

peternixey commented 4 years ago

Thanks for coming back so quickly.

Just interested in your thoughts on something. If you dropped support for IE11 then it would still show images as it would use the default source attribute. However you would then enable retina (and bandwidth) responsive images on all other browsers (imgsrc I believe triggers the browser to use a combo of screen density and bandwidth to calculate the appropirate image to serve).

Given that IE would still work, would the win of that improved responsiveness across the rest of the baord not outweigh the small proportion of people who didn't get responsiveness in IE?

CaerusKaru commented 4 years ago

Unfortunately yes, it would. There are millions of people who still use IE11 and their experience does not need to be deterred at the benefit of those lucky enough not to be stuck using it.

That being said, we're open to reintroducing the srcSet directive if someone wants to make a contribution for it. Unfortunately we as a team don't have the bandwidth to add it ourselves.