New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Retina support #78

Closed
holgersindbaek opened this Issue Jun 22, 2013 · 5 comments

Comments

Projects
None yet
5 participants
@holgersindbaek

holgersindbaek commented Jun 22, 2013

Really love cloudinary, but would love some solution for retina support.

Right now, the way I show images is this:

= cl_image_tag(@magazine.cover_image.image.cover, :width => 120, :height => 160, :crop => :fill, :class => "cover_image")

It doesn't look very good with retina screens though. Is there any solution under way for retina support for such a situation or would i have to get 2 different images, depending on if the screen is retina or not?

@holgersindbaek

This comment has been minimized.

Show comment
Hide comment
@holgersindbaek

holgersindbaek commented Jul 19, 2013

No answer?

@frabrunelle

This comment has been minimized.

Show comment
Hide comment
@frabrunelle

frabrunelle Jul 21, 2013

👍 for Retina support!

frabrunelle commented Jul 21, 2013

👍 for Retina support!

@iainsmith

This comment has been minimized.

Show comment
Hide comment
@iainsmith

iainsmith Jan 16, 2014

👍 Anyone got a workaround?

iainsmith commented Jan 16, 2014

👍 Anyone got a workaround?

@peter

This comment has been minimized.

Show comment
Hide comment
@peter

peter Mar 19, 2014

+1 for this

peter commented Mar 19, 2014

+1 for this

@nadavs

This comment has been minimized.

Show comment
Hide comment
@nadavs

nadavs Mar 19, 2014

Collaborator

UPDATE: Cloudinary added official Retina and HiDPI support using automatic device pixel ratio detection and the dpr transformation parameter. See: How to automatically adapt website images to Retina and HiDPI devices

ORIGINAL ANSWER:
A possible approach is to specify the required retina dimensions using Cloudinary and to tell Cloudinary to dynamically scale down images by 50% to match non-retina displays.
For example, the following code generates an image tag of 120x160. The original image is first transformed to retina display resolution of 240x320 and then scaled down by 50% for non-retina displays.

cl_image_tag("sample.jpg", :transformation => 
    [ {:width => 240, :height => 320, :crop => :fill}, 
      {:width => 0.5, :crop => :scale}], 
   :html_width => 120, :html_height => 160)

You can detect whether the device is a retina display one and omit the further 0.5 scaling. The two possible generated URLs would be:
Non-retina: http://res.cloudinary.com/demo/image/upload/c_fill,h_320,w_240/c_scale,w_0.5/sample.jpg
Retina: http://res.cloudinary.com/demo/image/upload/c_fill,h_320,w_240/sample.jpg

As an alternative, you can use client-side Javascript libraries that detect whether the device has retina display and to use Cloudinary's jQuery plugin to dynamically decide whether to use X2 dimensions or regular ones.

For example, the following HTML image tag sets a placeholder blank image with the actual public ID of the image as the data-src attribute (lazy image loading). The width and height are set to the non-retina ones, while we specify the fill crop mode and specify the sepia effect for example.

<img id="test" src="blank.png" 
         data-src="sample.jpg" 
         width="120" height="160" 
         data-crop="fill" data-effect="sepia"/>

The following jQuery code dynamically updates the image tag with a Cloudinary URL that dynamically manipulates the image to either the retina or non-retina dimensions (in this example, retina). You can then use Javascript libraries that detect retina devices.

var elem = $('#test'); 
$(elem).cloudinary({ 
  width: $(elem).attr('width')*2, 
  height: $(elem).attr('height')*2, 
  html_width: $(elem).attr('width'), 
  html_height: $(elem).attr('height')
});

In addition, it is in our road-map to provide integrated retina support and responsive images solution with detailed documentation and tutorials.

Collaborator

nadavs commented Mar 19, 2014

UPDATE: Cloudinary added official Retina and HiDPI support using automatic device pixel ratio detection and the dpr transformation parameter. See: How to automatically adapt website images to Retina and HiDPI devices

ORIGINAL ANSWER:
A possible approach is to specify the required retina dimensions using Cloudinary and to tell Cloudinary to dynamically scale down images by 50% to match non-retina displays.
For example, the following code generates an image tag of 120x160. The original image is first transformed to retina display resolution of 240x320 and then scaled down by 50% for non-retina displays.

cl_image_tag("sample.jpg", :transformation => 
    [ {:width => 240, :height => 320, :crop => :fill}, 
      {:width => 0.5, :crop => :scale}], 
   :html_width => 120, :html_height => 160)

You can detect whether the device is a retina display one and omit the further 0.5 scaling. The two possible generated URLs would be:
Non-retina: http://res.cloudinary.com/demo/image/upload/c_fill,h_320,w_240/c_scale,w_0.5/sample.jpg
Retina: http://res.cloudinary.com/demo/image/upload/c_fill,h_320,w_240/sample.jpg

As an alternative, you can use client-side Javascript libraries that detect whether the device has retina display and to use Cloudinary's jQuery plugin to dynamically decide whether to use X2 dimensions or regular ones.

For example, the following HTML image tag sets a placeholder blank image with the actual public ID of the image as the data-src attribute (lazy image loading). The width and height are set to the non-retina ones, while we specify the fill crop mode and specify the sepia effect for example.

<img id="test" src="blank.png" 
         data-src="sample.jpg" 
         width="120" height="160" 
         data-crop="fill" data-effect="sepia"/>

The following jQuery code dynamically updates the image tag with a Cloudinary URL that dynamically manipulates the image to either the retina or non-retina dimensions (in this example, retina). You can then use Javascript libraries that detect retina devices.

var elem = $('#test'); 
$(elem).cloudinary({ 
  width: $(elem).attr('width')*2, 
  height: $(elem).attr('height')*2, 
  html_width: $(elem).attr('width'), 
  html_height: $(elem).attr('height')
});

In addition, it is in our road-map to provide integrated retina support and responsive images solution with detailed documentation and tutorials.

@nadavs nadavs closed this Jul 24, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment