Would be good to have a setting, which would enable to adjust the image size based on screen density. An Issue Tony Thomas is talking about in this blog post:

http://anthonygthomas.com/2012/02/16/responsive-images-keep-it-simple-ke...

I find it very difficult to produce decent image quality for iPhone 4, and now iPad 3 and the forthcoming MacBook Pro, which all have retina displays.

Comments

attiks’s picture

First time I saw this, so this means we need to change the javascript that detects the screen width to also report window.devicePixelRatio (defaulting to 1) and use that to find the optimal width inside resp_img_get_best_suffix()?

If so can you try changing the following using iOS: change line 160 to $width = 2 * $_COOKIE[RESP_IMG_COOKIE];

erutan’s picture

I don't think that's applicable for the scope of this module.

AFAIK once you have an image in media/whatever it's going to be served in an img element. pixelRatio is used more at the theming layer / CSS in media queries for UI elements so you can get a 'mobile' looking upscaled image on an iPhone in landscape instead of a desktop/laptop sized image. You're essentially swapping out two images based on context - one pixelRatio 1 image for 'normal' displays that you are re-rendering server side, and a second one for 'retina' displays. Unless we can run some logic on media and choose between a retina and 1x ratio image it doesn't seem to fit the scope of this module, it goes beyond just scaling/rerendering a source image to save on bandwidth.

attiks’s picture

I'm still looking into this, but as far as I can see this is possible by using an extra cookie to detect the ratio and output a higher resolution picture, it will be to the themer to provide the necessary css styling (probably using media queries based on pixelratio) to resize the image. It will be an optional setting and default disabled.

Example:
thumbnail_mobile: width 100px;
thumbnail_narrow: width 150px;
thumbnail_normal: width 220px;
thumbnail_wide: width 300px;

add a suffix: _narrow - 500
add a suffix: _normal - 720
add a suffix: _wide - 900

respimg cookie set to 720
1/ normal display (ratio == 1) ==> use suffix normal, outputs style thumbnail_normal
2/ retina display (ratio == 2) ==>use suffix wide, outputs style thumbnail_wide. CSS rescales this to thumbnail_normal

More reading material at http://menacingcloud.com/?c=highPixelDensityDisplays

@erutan: if this doesn't make sense, let me know

erutan’s picture

Mea culpa, I was thinking to just go with device-width: to bypass the points / pseudo-pixels vs. real pixels that crops width:. However I got too wrapped up in the phone/tablet side of things and forgot normal laptop/desktop browsers, which will in most cases be windowed/tiled, hence not using all of the device-width. We can wiggle around that, but it creates more future problems than it is worth.

Your previous comment looks like a good approach, though I'd modify it a bit. Many devices don't have a perfect pixel ratio of 2 (android phone screen sizes vary), one approach I've seen is to use min-device-pixel-ratio : 1.5 to serve the 2x images, with the idea that the image will still look crisp (and resized by CSS) in lower res 'retinaish' displays and will be perfect or slightly upscaled in higher res 'retinaish' displays.

Another option is to keep the semanticish names that people have set e.g. _narrow, _normal, _wide, or _portrait, _landscape, _tablet, _desktop, then if min-device-pixel-ratio : 1.5 is true jump to _narrowx2, _normalx2 etc. Under your previous comment a retina iphone would bump to a _normal size, a retina ipad would bump to _wide, and the (likely) upcoming retina MBPs will bump to _omgican'tuseacompactcameraanymore. I think "if we're in an existing breakpoint with > 1.5 pixel-ratio, double the width of this image style" seems the best way to do it. If that could be done programmatically that'd be great!

attiks’s picture

Assigned:Unassigned» Jelle_S
Jelle_S’s picture

The latest dev version has a setting to switch the feature of taking the device pixel ratio in to account on or of

Jelle_S’s picture

Status:Active» Fixed

Setting this to fixed. Feel free to reopen if there are any problems

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

tanc’s picture

Version:7.x-1.2» 7.x-1.x-dev

Hoping someone can shed some more light on this feature. My use case is a little different than most I think but any help would be appreciated. On the whole, I'm not resizing images (by much) in my responsive site, instead I'm changing other elements on the page to flow the content differently. What I do want to do is serve 2x images for retina enabled devices. Can you explain how I would do this on the following image style:

Style name: er-article-list-small
Style effect: Scale and crop 84x84

So all I want to do is double the resolution of the served image if a retina device is being used (while keeping the image the same dimensions using css). How would I do this using this module?

attiks’s picture

This issue is closed, please open a new one and link them to each other.

derMatze’s picture

Are there any news for this issue..?

attiks’s picture

#11 Can you open a new issue stating your problem?

derMatze’s picture