retina-images / retina-images Goto Github PK

Automatically serve high-res images, to those who'll appreciate them.

ApacheConf 9.03% PHP 90.97%

retina-images's Introduction

Retina Images

Retina Images serves different images based on the device being used by the viewer.

Once set up on your website (very simple!) all you have to do is create a high-res version of each image you would like optimised for retina screens and all the work is done for you. You don’t even need to change any <img> tags (providing they have a height or width).

How it Works

When the page loads on the viewers device, a cookie holding the devicePixelRatio is set by either JavaScript or CSS (if JS is disabled).
When an image is requested by the server, the .htaccess file tells retinaimages.php to serve the image instead.
retinaimages.php then checks for the following conditions:
- A cookie holding devicePixelRatio exists.
- The value set in the cookie is greater than 1.
- A high-res version of the image exists.
If any of the above are false, it will send the regular image. Otherwise, the high-res image is sent in its place.

Installation & Examples

Visit http://retinaimag.es for installation instructions and a set of demonstrations.

Benfits

Only one image is downloaded by the viewer.
All standard raster images (.jpg, .png, .gif & .bmp) are able to be served as high-res.
Fallback to regular image if high-res image isn’t available.
Fallback to regular image if JavaScript and CSS or Cookies are disabled.

Drawbacks

<img> tags must have either a width or height attribute specified.
CSS background images must have a background-size property. See CSS Images for details.

License

Retina Images by Jeremy Worboys is licensed under a Creative Commons Attribution 3.0 Unported License

retina-images's People

Contributors

Stargazers

Watchers

Forkers

juancarloscruzd eliasrodrigues timngwena atmd moocss faction23 leagueofbeards nicolastelfer kswedberg green17 tianyow daverev jlin13 jerbellefeuille petermc jpaezsa sa4250mnpo70 avukonke ridies abdieffendi dipendrasingh elibawa hughker philipp-unger tkidesign signers webeau srkmrs webedcdesign cjopcjop patrac sandeepsupal chenwenfeng nonbreakingspace lkeane ingozoell mirovinger jjsanbra nullnotfound elephas lyjen foxy79 ofirbaruch kingwilly romulomendes stoufdev lokamaya lonjoy digitallandes modulexcite alexballera limingziqiang mtco travisneids kolakiran zoranmsd sunweiye peter-dorn

retina-images's Issues

How do you deal with the HTML pre parser?

I though all cookie-based solutions were off the table because modern browsers start requesting the images before the page is even parsed. Isn't that the whole discussion around responsive images?

http://alistapart.com/article/responsive-images-how-they-almost-worked-and-what-we-need

So do you do anything different or is this solution also broken?

404 File not Found

Check to make sure a file exists and send 404 status header if not. Currently just tries to read file and silently fails.

CSS to set cookie

On http://retinaimag.es/ I'd change

and replace

/retinaimages.php?devicePixelRatio=2

with

/retinaimages.png?devicePixelRatio=2

and in retinaimages.php

after

setcookie('devicePixelRatio', $dpr);

add

header('Content-Type: image/png'); echo base64_decode('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII='); exit();

to return a 1px transparent PNG.

Bandwidth checking

Check the users bandwidth and don't serve larger image if on slow connection.

Some work on this subject: https://github.com/adamdbradley/foresight.js

Have an option to enable/disable this feature.

Backwards Compatability

See if I can get this working as far back as possible.

Currently known issues:

Line 12: parse_url(urldecode($_SERVER['REQUEST_URI']), PHP_URL_PATH) requires PHP v5.1.2 or later.

Server config files

Look into providing server config files for non-apache servers.

Servers to consider:

nginx

Intermitted image loading

Using Retina-Images on newly designed website (http://www.archworks.com/).

Recently, on page load, all non-retina images will not load. This occurs about half the time. Sometimes reloading page several times is required before non-retina images will load, but many times one reload is sufficient.

Reloading page with displayed non-retina images often results in no images being displayed in subsequent page.

Experiencing this phenomena using Safari, Firefox (Mac) and Chrome (Mac).

Do not have ready access to retina display device, so performance of retina images is currently unknown.

I am not sure whether this is an issue with Retina-Images or some other thing. Please advise...

Ron

Chrome issue

Hello,

When I moved from local server to webhost a strange problem occurred. I have a slider set in place and in Chrome (and only in chrome) the slider starts to lose the framerate and the animation has a strange behaviour just like the images were 1gb each.

If I remove the .htaccess edits everything goes back to normal. Strange this is that happen only in Chrome browser..

Do you have any hint that might help me understand this issue?

Thank you

Android browser problem

Hello,
very good work, works nicely on iOS retina/non-retina devices.
But I have a problem with (default) Android browser (occuring in IE8 as well) - images just won't load, only question mark appears. If if comment out the directive in .htaccess, everything works.
Anyone else having similar problem? Or am I doing anything wrong?

Thanks,
Roman

Use X-SendFile if possible

If the server supports it, it would be good to use X-SendFile to avoid mangling the entire image data through the php process. See e.g. this blog post: http://www.jasny.net/articles/how-i-php-x-sendfile/

Validation

One more:

Just for curiosity, Is there anyway for this to W3C validate?

<noscript><style id="devicePixelRatio" media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)">#devicePixelRatio{background-image:url("inc/retina-images.php?devicePixelRatio=2")}</style></noscript>

Here's the Error (hope is readable):

Element style not allowed as child of element noscript in this context. (Suppressing further errors from this subtree.)

…creen and (min-device-pixel-ratio: 2)">#devicePixelRatio{background-image:url(…

When scripting is disabled, in a head element: in any order, zero or more link elements, zero or more style elements, and zero or more meta elements.
When scripting is disabled, not in a head element: transparent, but there must be no noscript element descendants.
Otherwise: text that conforms to the requirements given in the prose.

Thank you

Sending @3x instead of @2x

Hello, I am finding that the @3x image is being sent when the @2x should be.

An example of my logs are below. I am completely stumped as to why, is there any obvious error I might have made or overlooked that someone may have had before too?

Array
(
    [__utma] => 176504032.1247276052.1426926196.1432030676.1432033220.263
    [__utmz] => 176504032.1427998243.3.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
    [PHPSESSID] => fe5537dfe68eddd94efd2718cf5b58be
    [__utmc] => 176504032
    [NREUM] => h=1432033258072&r=36527&p=36527
    [devicePixelRatio] => 2
    [__utmb] => 176504032.2.10.1432033220
    [__utmt] => 1
)


document_root:     /home/public_html
requested_uri:     /images/user_images/4/21/4-1431962841.jpg
requested_file:    4-1431962841.jpg
source_file:       /home/public_html/images/user_images/4/21/4-1431962841.jpg
source_ext:        jpg
@2x_file:          /home/public_html/images/user_images/4/21/[email protected]
@3x_file:          /home/public_html/images/user_images/4/21/[email protected]
devicePixelRatio:  2
cache_directive:   must-revalidate
sending file:      /home/public_html/images/user_images/4/21/[email protected]


Array
(
    [__utma] => 176504032.1247276052.1426926196.1432030676.1432033220.263
    [__utmz] => 176504032.1427998243.3.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
    [PHPSESSID] => fe5537dfe68eddd94efd2718cf5b58be
    [__utmc] => 176504032
    [NREUM] => h=1432033312161&r=36527&p=36527
    [devicePixelRatio] => 2
    [__utmb] => 176504032.5.10.1432033220
    [__utmt] => 1
)


document_root:     /home/public_html
requested_uri:     /images/photos/2mBjFyn3hI/424/_2mBjFyn3hI.jpg
requested_file:    2mBjFyn3hI.jpg
source_file:       /home/public_html/images/photos/2mBjFyn3hI/424/2mBjFyn3hI.jpg
source_ext:        jpg
@2x_file:          /home/public_html/images/photos/2mBjFyn3hI/424/[email protected]
@3x_file:          /home/public_html/images/photos/2mBjFyn3hI/424/[email protected]
devicePixelRatio:  2
cache_directive:   must-revalidate
sending file:      /home/public_html/images/photos/2mBjFyn3hI/424/[email protected]

Thanks for any help!

iPhone 6 Plus

What about iPhone 6 Plus which has @3x?

htaccess for newbs

I would like to suggest making the htaccess file an htaccess.txt file.

This way, people who are new to web design can actually see the file after they download the ZIP.

Mac users would have to use the terminal or download a 3rd party program to easily display hidden files.

@2x images for @1.5x devices

By default, devices with a 1.5 pixel density will display the regular image. For example the HTC Incredible S has a 4-inch WVGA Super LCD screen with this 1.5 ratio and graphic with a regular pixel ratio diplays blurry.

If you want to display the @2x images with this pixel ratio, the patch i've found is to change this line of the script in your page : <script type="text/javascript">(function(w){var dpr=((w.devicePixelRatio===undefined)?2:w.devicePixelRatio);if(!!w.navigator.standalone){var r=new XMLHttpRequest();r.open('GET','/retinaimages.php?devicePixelRatio='+dpr,false);r.send()}else{document.cookie='devicePixelRatio='+dpr+'; path=/'}})(window)</script>

You replace w.devicePixelRatio with Math.ceil(w.devicePixelRatio) and it works

The new script become : <script type="text/javascript">(function(w){var dpr=((w.devicePixelRatio===undefined)?2:Math.ceil(w.devicePixelRatio));if(!!w.navigator.standalone){var r=new XMLHttpRequest();r.open('GET','/retinaimages.php?devicePixelRatio='+dpr,false);r.send()}else{document.cookie='devicePixelRatio='+dpr+'; path=/'}})(window)</script>

Have you a better or cleaner way to do this ?
Thanks in advance.

jpg/jpeg?

Hey! Just checking this out, looks great! My jpg images ending in .jpg weren't loading until i added ", 'jpg'" to your two array extension checks in the php. ;)

Don't act on image requests when no cookie is present

More details

Wrong Nginx config?

I tried your Nginx config on my server but it didn't work. This is what works for me:

if ($http_cookie ~* "devicePixelRatio") {
    rewrite \.(?:jpe?g|gif|png|bmp)$ /retinaimages.php last;
}

Notice that I used a backslash (\) after rewrite instead of a slash (/). Is it just me or this should be the correct config?

@4x Support

You guys should probably also integrate support @4x support which is the highest known retina mode know yet. it is used by UHD Monitors or TV's, e.g. xxxhdpi

Retina images with upper case in filename are not found.

In 1.7.1, if the Retina images on the server contain upper case in their filenames, they will not be found and the 1x image will be returned (at least on Unix servers, unsure about Windows). This is due to the lower case conversion in the construction of the Retina image filenames.

retinaimage stops after 1st image, on data connection only

Hello!
I discovered on a small site I’ve put online yesterday, the retinaimages cycles once only when on cellular data. Accessing the same site over wifi I see all the images processed in the retinaimages.log.

Of course I use the same device (a Sony Xperia Android phone), same browser (tested both Chrome and Firefox), always clearing cache before.
Strange isn’t it?

Here the log as produced from cellular data (some details hidden with ****)

Array
(
[xxlplanBAK] => R3174118028
[PHPSESSID] => f6011dd3ccd28ee681aa5557d926386d
[_ga] => GA1.2.73128877.1404831420
[devicePixelRatio] => 2
[xxlplan] => R908510984
)

document_root: /_/__/www
requested_uri: /img/languages.png
requested_file: languages.png
source_file: //****/www/img/languages.png
source_ext: png
retina_file: //_***/www/img/[email protected]
devicePixelRatio: 2
cache_directive: must-revalidate
generated etag: "1404747769192674998"
received etag: "1404747769192674998"

Any idea where the bug could occur?
Thanks in advance.

set cookie only once

Why does the suggested Javascript markup send the ajax request / set the cookie manually on every page request? when the cookie is already existent from a previous visit this codes can just do nothing?

<script>(function(w){var dpr=((w.devicePixelRatio===undefined)?1:w.devicePixelRatio);if(!!w.navigator.standalone){var r=new XMLHttpRequest();r.open('GET','/retinaimages.php?devicePixelRatio='+dpr,false);r.send()}else{document.cookie='devicePixelRatio='+dpr+'; path=/'}})(window)</script>

urldecode and rawurldecode

To allow image names to inclue '+' signs simply change the urldecode in line 15 to rawurldecode

$requested_uri = parse_url(rawurldecode($_SERVER['REQUEST_URI']), PHP_URL_PATH);

Was wondering if this could be made a feature or find its way into the documentation since it might help others

Retina images not displaying

Hi there. I've got everything in place but it's not serving retina images.

retinaimages.php is in root
using Option 1 since site is in root level

Forcing my display to HiDPI and it's reporting 2x, so I'm not sure why it's still serving the small images.

Here's some of my log output.

* * * * * * * * * * * * * * * * * * * * * * * * * * * *

Array
(
    [exp_last_visit] => 1083771920
    [HTTP_IS_RETINA] => 1
    [devicePixelRatio] => 2
    [__utma] => 123976840.297884776.1399131922.1399131922.1399131922.1
    [__utmb] => 123976840.56.10.1399131922
    [__utmc] => 123976840
    [__utmz] => 123976840.1399131922.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
    [exp_last_activity] => 1399136918
    [exp_tracker] => a:1:{i:0;s:5:"index";}
)


document_root:     /Users/jonthomas/Sites/salt-branding/site/public_html
requested_uri:     /retinaimages.php
requested_file:    retinaimages.php
source_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/retinaimages.php
source_ext:        php
retina_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/[email protected]
* * * * * * * * * * * * * * * * * * * * * * * * * * * *

Array
(
    [exp_last_visit] => 1083771920
    [HTTP_IS_RETINA] => 1
    [__utma] => 123976840.297884776.1399131922.1399131922.1399131922.1
    [__utmb] => 123976840.56.10.1399131922
    [__utmc] => 123976840
    [__utmz] => 123976840.1399131922.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
    [exp_last_activity] => 1399136918
    [exp_tracker] => a:1:{i:0;s:5:"index";}
    [devicePixelRatio] => 2
)


document_root:     /Users/jonthomas/Sites/salt-branding/site/public_html
requested_uri:     /assets/img/salt-logo.png
requested_file:    salt-logo.png
source_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/assets/img/salt-logo.png
source_ext:        png
retina_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/assets/img/[email protected]
devicePixelRatio:  2
cache_directive:   must-revalidate
generated etag:    "139913117157985186"
received etag:     "139905751633974691"

* * * * * * * * * * * * * * * * * * * * * * * * * * * *

Array
(
    [exp_last_visit] => 1083771920
    [HTTP_IS_RETINA] => 1
    [__utma] => 123976840.297884776.1399131922.1399131922.1399131922.1
    [__utmb] => 123976840.56.10.1399131922
    [__utmc] => 123976840
    [__utmz] => 123976840.1399131922.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
    [exp_last_activity] => 1399136918
    [exp_tracker] => a:1:{i:0;s:5:"index";}
    [devicePixelRatio] => 2
)


document_root:     /Users/jonthomas/Sites/salt-branding/site/public_html
requested_uri:     /uploads/case_studies/microsoft-homeslide.jpg
requested_file:    microsoft-homeslide.jpg
source_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/case_studies/microsoft-homeslide.jpg
source_ext:        jpg
retina_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/case_studies/[email protected]
devicePixelRatio:  2
cache_directive:   must-revalidate
generated etag:    "139121538757989463"
received etag:     "138492246157989462"

* * * * * * * * * * * * * * * * * * * * * * * * * * * *

Array
(
    [exp_last_visit] => 1083771920
    [HTTP_IS_RETINA] => 1
    [__utma] => 123976840.297884776.1399131922.1399131922.1399131922.1
    [__utmb] => 123976840.56.10.1399131922
    [__utmc] => 123976840
    [__utmz] => 123976840.1399131922.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
    [exp_last_activity] => 1399136918
    [exp_tracker] => a:1:{i:0;s:5:"index";}
    [devicePixelRatio] => 2
)


document_root:     /Users/jonthomas/Sites/salt-branding/site/public_html
requested_uri:     /uploads/case_studies/leapfrog-home.jpg
requested_file:    leapfrog-home.jpg
source_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/case_studies/leapfrog-home.jpg
source_ext:        jpg
retina_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/case_studies/[email protected]
devicePixelRatio:  2
cache_directive:   must-revalidate
generated etag:    "139121538757989433"
received etag:     "138492246157989432"

* * * * * * * * * * * * * * * * * * * * * * * * * * * *

Array
(
    [exp_last_visit] => 1083771920
    [HTTP_IS_RETINA] => 1
    [__utma] => 123976840.297884776.1399131922.1399131922.1399131922.1
    [__utmb] => 123976840.56.10.1399131922
    [__utmc] => 123976840
    [__utmz] => 123976840.1399131922.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
    [exp_last_activity] => 1399136918
    [exp_tracker] => a:1:{i:0;s:5:"index";}
    [devicePixelRatio] => 2
)


document_root:     /Users/jonthomas/Sites/salt-branding/site/public_html
requested_uri:     /uploads/case_studies/milliken-home.jpg
requested_file:    milliken-home.jpg
source_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/case_studies/milliken-home.jpg
source_ext:        jpg
retina_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/case_studies/[email protected]
devicePixelRatio:  2
cache_directive:   must-revalidate
generated etag:    "139121538757989473"
received etag:     "138492246157989472"

* * * * * * * * * * * * * * * * * * * * * * * * * * * *

Array
(
    [exp_last_visit] => 1083771920
    [HTTP_IS_RETINA] => 1
    [__utma] => 123976840.297884776.1399131922.1399131922.1399131922.1
    [__utmb] => 123976840.56.10.1399131922
    [__utmc] => 123976840
    [__utmz] => 123976840.1399131922.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
    [exp_last_activity] => 1399136918
    [exp_tracker] => a:1:{i:0;s:5:"index";}
    [devicePixelRatio] => 2
)


document_root:     /Users/jonthomas/Sites/salt-branding/site/public_html
requested_uri:     /uploads/case_studies/pearson-home.jpg
requested_file:    pearson-home.jpg
source_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/case_studies/pearson-home.jpg
source_ext:        jpg
retina_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/case_studies/[email protected]
devicePixelRatio:  2
cache_directive:   must-revalidate
generated etag:    "139121538757989482"
received etag:     "138492246157989481"

* * * * * * * * * * * * * * * * * * * * * * * * * * * *

Array
(
    [exp_last_visit] => 1083771920
    [HTTP_IS_RETINA] => 1
    [__utma] => 123976840.297884776.1399131922.1399131922.1399131922.1
    [__utmb] => 123976840.56.10.1399131922
    [__utmc] => 123976840
    [__utmz] => 123976840.1399131922.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
    [exp_last_activity] => 1399136918
    [exp_tracker] => a:1:{i:0;s:5:"index";}
    [devicePixelRatio] => 2
)


document_root:     /Users/jonthomas/Sites/salt-branding/site/public_html
requested_uri:     /uploads/case_studies/logitech-home.jpg
requested_file:    logitech-home.jpg
source_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/case_studies/logitech-home.jpg
source_ext:        jpg
retina_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/case_studies/[email protected]
devicePixelRatio:  2
cache_directive:   must-revalidate
generated etag:    "139121538757989447"
received etag:     "138492246157989446"

* * * * * * * * * * * * * * * * * * * * * * * * * * * *

Array
(
    [exp_last_visit] => 1083771920
    [HTTP_IS_RETINA] => 1
    [__utma] => 123976840.297884776.1399131922.1399131922.1399131922.1
    [__utmb] => 123976840.56.10.1399131922
    [__utmc] => 123976840
    [__utmz] => 123976840.1399131922.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
    [exp_last_activity] => 1399136918
    [exp_tracker] => a:1:{i:0;s:5:"index";}
    [devicePixelRatio] => 2
)


document_root:     /Users/jonthomas/Sites/salt-branding/site/public_html
requested_uri:     /uploads/case_studies/stanford-home.jpg
requested_file:    stanford-home.jpg
source_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/case_studies/stanford-home.jpg
source_ext:        jpg
retina_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/case_studies/[email protected]
devicePixelRatio:  2
cache_directive:   must-revalidate
generated etag:    "139121538757989503"
received etag:     "138492246157989502"

* * * * * * * * * * * * * * * * * * * * * * * * * * * *

Array
(
    [exp_last_visit] => 1083771920
    [HTTP_IS_RETINA] => 1
    [__utma] => 123976840.297884776.1399131922.1399131922.1399131922.1
    [__utmb] => 123976840.56.10.1399131922
    [__utmc] => 123976840
    [__utmz] => 123976840.1399131922.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
    [exp_last_activity] => 1399136918
    [exp_tracker] => a:1:{i:0;s:5:"index";}
    [devicePixelRatio] => 2
)


document_root:     /Users/jonthomas/Sites/salt-branding/site/public_html
requested_uri:     /uploads/our_approach/crystalize.png
requested_file:    crystalize.png
source_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/our_approach/crystalize.png
source_ext:        png
retina_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/our_approach/[email protected]
devicePixelRatio:  2
cache_directive:   must-revalidate
generated etag:    "139904523857989549"
received etag:     "139214556057989548"

* * * * * * * * * * * * * * * * * * * * * * * * * * * *

Array
(
    [exp_last_visit] => 1083771920
    [HTTP_IS_RETINA] => 1
    [__utma] => 123976840.297884776.1399131922.1399131922.1399131922.1
    [__utmb] => 123976840.56.10.1399131922
    [__utmc] => 123976840
    [__utmz] => 123976840.1399131922.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
    [exp_last_activity] => 1399136918
    [exp_tracker] => a:1:{i:0;s:5:"index";}
    [devicePixelRatio] => 2
)


document_root:     /Users/jonthomas/Sites/salt-branding/site/public_html
requested_uri:     /uploads/our_approach/create.png
requested_file:    create.png
source_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/our_approach/create.png
source_ext:        png
retina_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/our_approach/[email protected]
devicePixelRatio:  2
cache_directive:   must-revalidate
generated etag:    "139904523757989547"
received etag:     "139214556057989546"

* * * * * * * * * * * * * * * * * * * * * * * * * * * *

Array
(
    [exp_last_visit] => 1083771920
    [HTTP_IS_RETINA] => 1
    [__utma] => 123976840.297884776.1399131922.1399131922.1399131922.1
    [__utmb] => 123976840.56.10.1399131922
    [__utmc] => 123976840
    [__utmz] => 123976840.1399131922.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
    [exp_last_activity] => 1399136918
    [exp_tracker] => a:1:{i:0;s:5:"index";}
    [devicePixelRatio] => 2
)


document_root:     /Users/jonthomas/Sites/salt-branding/site/public_html
requested_uri:     /uploads/our_approach/activate.png
requested_file:    activate.png
source_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/our_approach/activate.png
source_ext:        png
retina_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/our_approach/[email protected]
devicePixelRatio:  2
cache_directive:   must-revalidate
generated etag:    "139904523757989545"
received etag:     "139214556957989544"

* * * * * * * * * * * * * * * * * * * * * * * * * * * *

Array
(
    [exp_last_visit] => 1083771920
    [HTTP_IS_RETINA] => 1
    [__utma] => 123976840.297884776.1399131922.1399131922.1399131922.1
    [__utmb] => 123976840.56.10.1399131922
    [__utmc] => 123976840
    [__utmz] => 123976840.1399131922.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
    [exp_last_activity] => 1399136918
    [exp_tracker] => a:1:{i:0;s:5:"index";}
    [devicePixelRatio] => 2
)


document_root:     /Users/jonthomas/Sites/salt-branding/site/public_html
requested_uri:     /uploads/our_approach/optimize.png
requested_file:    optimize.png
source_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/our_approach/optimize.png
source_ext:        png
retina_file:       /Users/jonthomas/Sites/salt-branding/site/public_html/uploads/our_approach/[email protected]
devicePixelRatio:  2
cache_directive:   must-revalidate
generated etag:    "139904523857989551"
received etag:     "139214557057989550"

* * * * * * * * * * * * * * * * * * * * * * * * * * * *

Play nice with HTTP Caching

See http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html - in high traffic sites this makes a huge difference

.png files not loading @2x but .jpg are with HTTPS

@jeremyworboys - I know this is an older framework and it doesn't seem to even exist online anymore... had to use wayback machine to even see info about. From my site https://www.jimmy-fisher.com which was built back in 2012-ish.

I've run into this issue once I was using HTTPS Everywhere as an extension in Chrome, but also since I updated my .htaccess file to make all http requests turn into https. I've run the log and it's recognizing my retina display for all jpgs and serving the @2x version. For whatever reason, on the same pages that have the jpgs, there are some .png files not being loaded at the @2x size. They don't even show up in the debug log.

When I turn all of the HTTPS options off (meaning my .htaccess settings as well as the HTTPS Everywhere extension), the .png images are served and show up in the debug log, which is how I narrowed in on the HTTPS being the issue. But what I don't understand is why this works for the JPGs but not the PNGs.

Any help would be appreciated. The header images that I was having an issue w/ (my name as well as my JAF logo on the right side of the screen) were replaced with .svg files (as a workaround), but I'd like to figure this out, if possible. The little rectangle in the navigation bar is a .png that does have an @2x version... that's the one that doesn't seem to get served right now (since I switched the others to .svg's).

Please let me know. Thanks!

UPDATE:
It seems like it may be a caching issue w/ Cloudflare, perhaps... I duplicated the files that weren't showing up in the logs and labeled them '2', updated the code, and the new files were loaded and showed up in the log. That menu image still did not... the little rectangle next to the navigation. That's pulled through CSS, though... not sure if that's the problem.

Printing @2x images regardless of display resolution...

Apologize if this is not the correct forum for this query.

I am a novice web designer (architect by trade) building new website and trying to better control over printing. Been investigating CSS rules '@media screen' and '@media print'.

Would like @2x images to print regardless of whether viewers had retina displays or not.

Any way to make this happen? Please advise...

Ron Brown
[email protected]

Themecheck Warnings

Hi,

Your plugin is awesome, thank you for that.
I've implemented it in the new theme I'm developing. My only concerns are about several warnings that I get when running Theme Check plug in.

Here's what I get:

WARNING: readfile was found in the file retina-images.php possible file operations.

Line 100: readfile($source_file);

WARNING: fwrite was found in the file retina-images.php possible file operations.

Line 21: fwrite($_debug_fh, '* * * * * * * * * * * * * * * * * * * * * * * * * * * *

Line 22: fwrite($_debug_fh, print_r($_COOKIE, true).'\n\n');

Line 23: fwrite($_debug_fh, 'document_root: {$document_root}\n');

Line 24: fwrite($_debug_fh, 'requested_uri: {$requested_uri}\n');

Line 25: fwrite($_debug_fh, 'requested_file: {$requested_file}\n');

Line 26: fwrite($_debug_fh, 'source_file: {$source_file}\n');

Line 27: fwrite($_debug_fh, 'source_ext: {$source_ext}\n');

Line 42: if (DEBUG) { fwrite($_debug_fh, 'devicePixelRatio: {$cookie_value}\n'); }

Line 46: if (DEBUG) { fwrite($_debug_fh, 'retina_file: {$retina_file}\n'); }

Line 66: fwrite($_debug_fh, 'generated etag: {$etag}\n');

Line 68: fwrite($_debug_fh, 'received etag: {$_SERVER['HTTP_IF_NONE_MATCH']}\n\n

Line 95: fwrite($_debug_fh, 'sending file: {$source_file}\n\n');

WARNING: fopen was found in the file retina-images.php possible file operations.

Line 20: $_debug_fh = fopen('retinaimages.log', 'a');

WARNING: fclose was found in the file retina-images.php possible file operations.

Line 96: fclose($_debug_fh);

I know these are warnings and not errors, but I'd like to know why if possible.

Thanks

Work in subdomain?

Hello,

How can I get this working on a sub-domain?

Support for sub-domains

In our website, we use www.neuro-designs.com as the main site, and then store.neuro-designs.com and blog.neuro-designs.com respectively.

They all run the same CSS stored in the main site which grabs images from the main site as well. We've installed retinaimages.php and the necessary .htaccess on all domains. The main site worked flawlessly, but however, not with the store or blog.

Can we, for example, store logo.png and [email protected] in the main site, and then call it from store.neuro-designs.com? Does this work with the CSS method too? I've tried this but it doesn't work unless we load the main site first, and then the store/blog.

Using with images on CDN?

Is it possible to use Retina Images with images that are hosted from a separate domain? We have a separate domain that we use to serve our static content from (CDN style). So I'm just trying to figure out how I could use Retina Images on a configuration like that and where the various pieces of Retina Images would go.

Image Downsizing

Automatically shrink a retina image to standard res if the retina image exists and the regular one doesn't.

Things to consider:

Shrunk images should be cached and served from the cache when possible.
Quality of the image needs to be retained by the shrinking process.

Request count: 1

W3C Validation errors for Retina Images code

Hi Jeremy, I'm using your Retina Images code to serve high-res images on
my site to devices that can take advantage of them. It works great, and
I'm on the latest 1.61 code. I'd really like my pages to pass the HTML
validation on this page: http://validator.w3.org/ , but there are two
errors that are coming from your code that I can't get rid of. The first
one seems possibly bogus due to the leading "-" characters, was that a
legacy thing? The second one I don't know.

These errors appear even when I run your page through the validator, so
I'm sure it's nothing specific to my site.

Any ideas?

Try to validate this, which has the Retina Images code:
http://retina-images.complexcompulsions.com/

Error/Line 40, Column 243/:Bad value only screen and
(-moz-min-device-pixel-ratio: 2), only screen and
(-o-min-device-pixel-ratio: 2/1), only screen and
(-webkit-min-device-pixel-ratio: 2), only screen and
(min-device-pixel-ratio: 2) for attribute media on element style:
Expected a letter at start of a media feature part but saw - instead.
Error/Line 40, Column 243/:Element style is missing required
attribute scoped.

|...creen and (min-device-pixel-ratio: 2)">#devicePixelRatio{background-image:url(...|

Customisation

Make everything more customisable. Things that could be customised:

location / naming convention of retina image.
whether to scale images or return 404.

Conditional devices

Any thoughts on adding a switch to disable certain devices? I want my site to display retina for MacBooks and iPads, but it's so small on the iPhone I think it's just wasting bandwidth. Maybe using "max-device-width"?

In 1.7.1, the 3x image is returned for 2x devices.

The line "if $cookie_value >= $min_dpr" appears to cause the 3x image to be returned for 2x devices. Shouldn't it be "if $cookie_value > $min_dpr"?

Server returns 404 for all images after implementing htaccess

Hi,
server returns 404 resource not found on all images.

Please help and guide
TYIA

Server performance and SEO enhancement

Quoting Robert Chapin:

"To further improve server performance and website SEO, the Retina RewriteRule in htaccess should be preceeded by the following condition or similar:

RewriteCond %{HTTP:Cookie} devicePixelRatio [NC]

[...]

Another way to go about this is to implement If-Modified-Since in the script so at least that functionality isn't lost.
"

typo

your about description has a link with .om instead of .com

Website is down

The website with install instructions at http://retina-images.complexcompulsions.com/ is unavailable.

Thanks !

Support for Lighttpd?

I am running Lighttpd instead of Apache on my web servers due to load issues. As there is no .htaccess file, as far as I can tell it's not possible to us this solution.

Can it be achieved using rules in the lighttpd.config somehow?

In 1.7.1 the 4x image filename is not logged consistently with others.

The new support for 4x images was not carried over to debug logging, so the 4x image filename is not logged like the 2x and 3x image filenames are.

Code does not fall back to 2x image if 3x image does not exist

Hello, I noticed my site, which uses the Retina-Images code, does not serve Retina images to the iPhone 6 Plus. Looking at the code, I believe this is due to a bug where if the client device is 3x-capable and the server does not have a 3x image, but the server does have a 2x image, the code falls all the way back to the base 1x image instead of sending the 2x image, which is what I would expect the code to do.

The end result is that the iPhone 6 Plus gets the 1x image and looks worse than older iPhones which get the 2x image. I don't think it's reasonable for me to have to create a 3x image right now to work around this issue since 3x images consume a lot of resources and I would have to retroactively create 3x images for the many older images on my site.