Retina images! Please help!

[MockoB]

I just found that http://retinaimag.es, the only issue is that tb images dont have @ prefix, but little tweak in that php file should do the job probably. I'm currently using retina module on my prestashop 1.5 store which does exactly the same and it is doing it quite well. And it should work with all images I believe. I have to try it someday...

Edit: of course it will do it just for the @2x images since tb doesn't create @3x and @4x

[JakeTse]

Do the first few iPad models also have retina display? I have always been thinking that the retina starts from the iPad 2. Am I wrong at this?

[MockoB]

It's since iPad 3 and iPhone 4. But it is hard to find smartphone on the market without high density screen at the moment. Even the regular computer screens will be such soon.

[JakeTse]

@mockob Thanks for informing me of that. I read somewhere telling it was since iPad 2, but I can't remember where. And yes you are right about this. I just searched on Google.

[Lathaneo]

@mockob

Hi, You can use the library http://imulus.github.io/retinajs/.

E.g. for your product list image just :

• Load it where you want in you template the library
• Make a category image called homedefault2X
• put : data-rjs="{$product.cover.bySize.homedefault2x.url}" after the src attribut in img tag.

So on http://imulus.github.io/retinajs/, they describe 2 method to load the script, I use the first (old) one. The script is really light, and easy to make working, so I recommande.

Regards, Lathanao.

[MockoB]

Thanks for your support @Lathaneo ! -I may place it in the header.tpl file, am I right? -when turn on high res images in backoffice the 2x images are generated for all instances. But doesn't the script look for @2x with @ prefix? -to have it for all instances of the product image (and all images in the template), I have to find all of them in every tpl file and place that code snippet in all the files, right?

May I see live example of your implementation if you don't mind? You may send it in personal message if you like.

Edit: if width and height properties are not specified, like it is in the template code, isn't the image shifted on @3x devices?

Thank you!

[Lathaneo]

HI @mockob,

Yes, put it in the header. Yes, the script look for @x2. As "@" doesn't works for image category name, we have to find a trick. So with the tag data-rjs, the script know that there is a second URL with hight-res image. And it's working.

So, in my case, I use the script only on product-list image, cause most of the other image are already oversized and get a great rendering for mobile device screen.

[...]shifted on @3x devices? Not with this method, there is only one hight-res image alternativ.

You can test it on http://dathemebasic.lathanao.com

Regards, Lathanao

[MockoB]

Thanks @Lathaneo I have to find a way to implement it for all images I guess. On my ps 1.5 site the @2 images are shifted to right on @3x devices like iPhone 6plus. That is because the height and width properties are not specified within the code (that's what I read somewhere). But it looks perfect on your site on both my iPad 4 and iPhone 6p. It would be nice to do it for your logo and the categories on your homepage. Congrats for your theme, it is very nice looking and clean template!