3

I am not sure exactly how I can proceed in making a website retina device compatible without being able to test and see if it is working. I have followed the guide here http://www.presscoders.com/2012/10/how-to-make-your-wordpress-theme-retina-ready/ for installing and setting up the plugin wp-retina-2x and it seems like it should be working, but I have no way to tell if it actually is.

This is what i'm working with http://brainbuzzmedia.com/themes/expression/

If anyone has a retina device, are any of the smaller images showing up in retina resolution? Their filename would have "@2x" at the end of it if they were.

fender967
  • 285
  • 8
  • 17
  • Are you asking how to do it, or have someone verify it for you? One of those is a valid question for SO, the other is better suited elsewhere. – Burhan Khalid Apr 02 '13 at 04:47
  • I think i know how to do it, I want to know how to test it without a device. – fender967 Apr 02 '13 at 05:14
  • 1
    http://stackoverflow.com/questions/15551287/how-to-test-a-website-for-retina-on-windows-without-an-actual-retina-display/17228135#17228135 – Tárcio Zemel Aug 16 '13 at 05:28

1 Answers1

3

Just open your Chrome Developer tools and hover over the <img> tag (screenshot at the end of this comment). You will see two sizes. One is the original size of the image on the server, and the second is the size of the image as you see it on the website.

The original image size should be at least twice the size as the size of the parameters of the image inside tag. If this is the case, your images are retina ready. You don't need to have retina display.

e.g:

Html on your site for the img: <img width="100" height="100" alt="logo" />

Original (natural) size of the image saved on your server: 200x200

enter image description here

  • This works assuming you don't care about the overhead incurred for non-retina users. – Michael Mior Apr 04 '13 at 17:30
  • Of course the best solution is to add some Javascript magic to detect the pixel ratio and to serve retina images only to retina users and not to everybody. But in this case he was just asking how to know if the retina optimization on his site is working without owning a retina display. –  Apr 04 '13 at 17:33
  • Right, but if you are using a JS-based solution that detects retina displays, then your approach won't work because the regular resolution image will be served on non-retina displays. – Michael Mior Apr 04 '13 at 17:36
  • It will. I can just change the img src based on the users pixel ration and serve x2 images only to retina user and normal size for normal user. Or I will just use the JS solution without the first solution that I wrote. –  Apr 04 '13 at 17:39