search

aFarkas / lazysizes

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
MIT License
17.53k stars 1.73k forks source link

[FR] RIaS should allow data-max-width to prevent image upscale. #457

Open hongc-cc opened 6 years ago

hongc-cc commented 6 years ago

Sometimes we know the original image dimension. we should be able to set data-max-width, so that service like imgix will not upscale image, or browser will not make new request due to new width parameter

e.g. A image with original width 400px, data-src="https://foo.imgix.net/path/foo.jpg?w={width}" will only transform to data-srcset="https://foo.imgix.net/path/foo.jpg?w=180 180w, https://foo.imgix.net/path/foo.jpg?w=320 320w, https://foo.imgix.net/path/foo.jpg?w=400 400w"

ingmarh commented 6 years ago

You could also achieve this by using lazySizesConfig.rias.modifyOptions (or the lazyriasmodifyoptions event).

For example:

window.lazySizesConfig = {
  rias: {
    modifyOptions: function(data) {
      var widths, maxWidth = data.target.dataset.maxWidth

      if (maxWidth) {
        widths = data.detail.widths.filter(function(width) {
          return width <= maxWidth
        })
        data.detail.widths = widths.length ? widths : [+maxWidth]
      }
    },
  },
}