Create retina ready images?

[ilivelife]

Hi,

This may sound pretty stupid for some of you and perhaps I should know such stuff because thats a part of my profession, however I cannot find anything about this.

How do I make images or optimaze websites for retina? I don't own a recently released rMBP but I tried it at Apple Store today. Our website, our logo, facebook and most of the "regular sized" jpeg or png looked so bad.

I understand that retina is x2 pixels, so if I want to make a logo retina-ready I have to save it as "200x200" when the "regular" size is/was "100x100" for non-retina, but what about regular images?

Should I have to save them in doubble-size and put them in a "smaller html box"?

I'm kind a confused man... It's hard when I don't own the rMBP (yet).
Still waiting for Adobe to announce retina-ready CS suite so I can buy rMBP.
If it won't hapen within a month I will buy MBA full-upgraded and go for a new iMac when it gets released.

I hope someone out there can help.

[pgiguere1]

http://retinajs.com/

[Dwhite78]

Originally Posted by pgiguere1

http://retinajs.com/

Hah, work smart not harder. You just saved me a load of time. Thanks for that link!

[ilivelife]

Allright - thanks for the link.
That script seems to be a solution to many problems.

But still, let's say I enter "retina-optimized"-website and download a random picture that just looks so beautiful on the site (because it's twice the pixels) and actually save this image on my rMBP? The image will look crappy when I open it from the rMBP because I then see it on the "actual size", right?

Would 220ppi exporting option solve that problem? Or?

[Stetrain]

If you visit a retina-ready website, and you see an image that is retina optimized (displayed at 100x100 on a non-retina device and 200x200 on a retina device), and you download that image, you should get a 200x200 image.

If you open that image in a retina-ready app (Finder, Quick Look, Preview, iPhoto, etc.) it will look just as good as it did in the website.

If you open that image in a non-retina ready app (Photoshop), it will actually display as 400x400 on the display and look a bit blocky.

[Randomoneh]

Shouldn't images be optimized for a case when images are most large - scaled: larger text?

That would make needed resolution if image(s) not 2, but ~2.8 times higher.

[Macman756]

Originally Posted by pgiguere1

http://retinajs.com/

Excellent. This will help

[Stetrain]

Originally Posted by Randomoneh

Shouldn't images be optimized for a case when images are most large - scaled: larger text?

That would make needed resolution if image(s) not 2, but ~2.8 times higher.

No, all of the scaled modes still use 2x resolution images. The "Larger Text" mode looks like 1024x600, so it's actually running at 2048x1200 (2x mode) and then scaled to 2880x1800.

[Randomoneh]

Originally Posted by Stetrain

No, all of the scaled modes still use 2x resolution images. The "Larger Text" mode looks like 1024x600, so it's actually running at 2048x1200 (2x mode) and then scaled to 2880x1800.

Thanks.

[tillsbury]

Originally Posted by ilivelife

Hi,
I understand that retina is x2 pixels, so if I want to make a logo retina-ready I have to save it as "200x200" when the "regular" size is/was "100x100" for non-retina, but what about regular images?

Should I have to save them in doubble-size and put them in a "smaller html box"?

Yes, exactly. The retina.js patch is a good temporary bodge, but it isn't ideal. It serves the low-resolution image, then looks to see if the device is retina, and if so serves a high-resolution image to replace it. This makes a flicker and increases bandwidth. Ideally, you should simply serve the high resolution image alone to a retina display, and you can do this easily if your pages are php instead of html. PHP can't check retina displays, but it can use JS to create a cookie and then use that from then on to serve only high resolution images if they are available.

Theoretically, you should be able to serve up double resolution JPG images and a good browser should only take what it needs -- i.e. a standard resolution browser will stop downloading when the resolution required has been loaded, and a retina browser should keep on downloading the additional detail and displaying it. I believe that FF and Chrome do this, but would need confirmation. Older versions of IE just download the entire JPG file and then decide what to do with it. Can anyone else confirm whether this works on later IE's? Ideally this should be the way to serve all images to all systems.

Apart from the advantage of using only the correct bandwidth for all devices, this should also allow retina displays to show the image as quickly as normal ones automatically, and gently increase resolution after the page has loaded.