added @2x retina-image support

[michelkaeser]

This pull-request will enable support for serving @2x retina image support. It checks (if on retina device) if a @2x version exists - and serves it.

[cferdinandi]

Isn't this included in the $pixel_density check that AI already does?

[michelkaeser]

@cferdinandi it used $pixel_density for size calculation - so if you have retina files only this isn't a problem. I like to have non-retina (default) and retina files however - so AI needs to know about them.

[cferdinandi]

Sorry, I'm not understanding. So you already have two optimized file sizes made that you want AI to choose from before doing it's optimization?

[michelkaeser]

Correctly. I'm not even sure anymore if this makes sense with AI, but I've seen it like this:

• non-retina img (2000x2000)
• retina img (4000x4000)

Now a smartphone with 960 screen requests the image. Since AI already checks it's pixel density this will either be serves as 960xX or 1920xX (with DPI 2).

However, this won't really be sharp, as with DPI 2 (so the 1920xX img) it would actually need to be 3840px to be fully sharp -> therefor we need to serve the retina one and set calculated pixel size to *2.

Of course this is somehow agains the idea of AI to serve size optimized images, but we still save a few KBs and serve real retina images, providing full sharpness.

I might be totally wrong about the mechanism how AI RELLY works, but that's what I've understand...and therefor needed this "tweak".

Edit: well, the pull-rqst is missing multiplying dimension*2...the core...

[cferdinandi]

Ah gotcha!

So I made a few mods to AI to work around this situation myself:

1. I use percentage-based grids, so I created a variable for the content container width as a percentage (ex. $wrap_width = 0.88 and multiply that by the screen size to get the actual width I need for the image. This value replaces the current $total_width variable. The screen could be 1,000 pixels across, but if the image container is only 400px, that's how big my image needs to be.
2. If the $pixel_density does not equal 1, it continues to do it's normal thing, but it's getting a size requirement based on the actual. So using the above example, a 400px container on a 2x screen updates the $total_width requirement to 800px.
3. AI does it's thing and creates an image to fit that size.

On my site itself, I serve retina density images as the default and let AI downscale them as needed.