Using srcset for higher DPI

[aldhsu]

In 1.10 reading the tests it seems that the gem supports using srcset now. We are using srcset for higher DPI images without changing the dimensions of the image.

For example:

# From MDN documentation of srcset
<img src="mdn-logo-sm.png" 
      alt="MDN" 
      srcset="mdn-logo-HD.png 2x">

I wrote a wrapper to the Cloudinary helper that simply multiplies the dimensions to fill the srcset. Code below:

   # only compatible with < 1.10
    def cl_image_tag_with_srcset(source, options = {})
    width, height = options.values_at(:width, :height)

    return cl_image_tag(source, options) unless width.respond_to?(:*)
    raise "cl_image_tag_with_srcset requires the crop to be defined, otherwise srcsets cannot be generated" unless options[:crop]

    srcset = DENSITIES.map do |multi|
      src_height = scale_up_dimension(height, multi)
      src_width = scale_up_dimension(width, multi)
      "#{cl_image_path(source, options.merge(width: src_width, height: src_height))} #{multi}x"
    end.join(",\n")

    cl_image_tag(source, options.merge(srcset: srcset))
  end

  private

  def scale_up_dimension(dimension, multi)
    return dimension unless dimension.respond_to?(:*)

    (dimension * multi).round
  end

Higher DPI screens will then request <width> * DPI from Cloudinary.

Are there any plans to support this use case? Would you be open to a PR? This no longer works because of: https://github.com/cloudinary/cloudinary_gem/commit/dda3ec624393654b1236ea3f57bb255dd4f1e9a4#diff-993f3025fa623ac4a4381c3aae232d70R77

[yakirp]

Hi @aldhsu ,

Why not use dpr? https://cloudinary.com/blog/how_to_automatically_adapt_website_images_to_retina_and_hidpi_devices

Please let me know if dpr is a good solution here.

Best, Yakir

[aldhsu]

@yakirp good suggestion. I tried the builtin DPR before using srcset.

Now that I think about it I could probably replace the image tag creation with the DPR option. Something like:

   def cl_image_tag_with_srcset(source, options = {})
    width, height = options.values_at(:width, :height)

    return cl_image_tag(source, options) unless width.respond_to?(:*)
    raise "cl_image_tag_with_srcset requires the crop to be defined, otherwise srcsets cannot be generated" unless options[:crop]

    srcset = DENSITIES.map do |multi|
      src_height = scale_up_dimension(height, multi)
      src_width = scale_up_dimension(width, multi)
      "#{cl_image_path(source, options.merge(width: src_width, height: src_height, dpr: multi))} #{multi}x"
    end.join(",\n")

    cl_image_tag(source, options.merge(srcset: srcset))
  end

Haven't tried it but I think something like that could work.

From the article, it suggests using the client DPR hints to request the correct DPR. It doesn't help with building srcset. srcset has superior browser support compared to DPR client hints.

Srcset

DPR

DPR auto

Using the DPR auto option requires frontend intervention as the src is added to the image after the page loads and the device DPI is detected. The dynamic DPR on the client side is significantly worse experience than the SSR because it has to wait for the DOM to be ready, then JS to parse and initialize before it can even begin downloading the image.