Dynamic Image Source Sets

Hello Netlify Folks,

First of all, I love the service and you are doing a great job. So thank you and keep doing what you’re doing.

I was looking through the Netlify dashboard and realized you have the ability to inject html into an existing page, or even hijack a form, but I would love the following feature and I think it would have a great impact on the performance of many web sites that you host.

Dynamic Image Source Sets

Enabling Dynamic Image Source Sets will parse all HTML pages and replace img tags with responsive image source sets for multiple device form factors. This would allow folks to opt into a better experience for their visitors without the need to generate a gaggle of images at build time.

Here is an example of a picture tag that may replace an existing image tag, with multiple sizes. It also has a fallback for browsers that don’t support it.

<picture>
  <source srcset="extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="large.jpg" media="(min-width: 800px)">
  <img srcset="medium.jpg" alt="…">
</picture>

Netlify would have to build a service that would allow for dynamically resizing of images, or support third party services that already have this functionality.

Anyways, this is a wish list item. I know many devs could do this themselves, but it would definitely be a compelling reason to host static sites on Netlify on top of the already great service you folks provide.

Thank You :slight_smile:

The documentation I’ve been reading is googles https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

1 Like

Hi @khalidabuhakmeh! This isn’t a native feature we’d probably provide - mucking around in your source code and trying to do the right thing. We do it with Asset Optimization, but it’s a lot more straightforward to bundle some CSS or rewrite a single URL from /file to https://our-asset-cdn/hash/file.

HOWEVER as far as a feature we support - dynamically resized images; you could build that Cloudinary feature on Netlify, using this feature:

Have you checked that out? It’s not doing the work for you - but it is enabling you to do the work without creating dozens of copies of your image :slight_smile: