Making Photography Websites Retina Ready?

[Regaj]

The only reason the photos looks pixelated is because the web site isn't retina-ready. This will change very soon. My new site is being coded with that in mind as we speak.


In another thread (where, uhm, a so-called "professional" wedding photographer suggests the rMBP is not suitable for serious photographers - based, alas, not on his buying and using the machine... but rather from a couple of trips to the Apple store ) Alvin, you made the comment above - about transitioning your website so that it is retina-ready.

Can I ask you and others here what that means?

I understand how UI elements need updating. In most cases that will mean the software we use to create and maintain our websites (Dreamweaver, in my case) will need to be updated.

What I don't understand is how that relates to photos and other graphic images. Other than potentially uploading higher resolution imagery than perhaps we have in the past, what is involved in making imagery "retina ready?"

Thanks in advance...

 

[MacBird]

There were some threads that included the javascript necessary to make websites retina-ready. You will have to provide a regular resolution image and one that has twice the dimension to prevent blurriness on retina displays. The problem with this is that it can be an incentive to steal these images as they become more useable than your typical small 72 dpi image.

 

[leman]

What I don't understand is how that relates to photos and other graphic images. Other than potentially uploading higher resolution imagery than perhaps we have in the past, what is involved in making imagery "retina ready?"

That's about it. You need higher-res images and means to deliver them. Currently, this is a bit more complicated then it should be. For background images, there are a CSS3 media queries which can be used to select the correct resolution image on the fly. For other images, people would usually utilize a javascript script that checks whether the client uses a retina display and then download the appropriate images.

 

[throttlemeister]

The funny thing is also that a lot of badly made websites will look great, as a lot of people don't properly resize images for their site but rescale the full-size image. This is obviously bad design and makes pages slow to load, but for retina its good.

 

[rjg125]

Apple Web Site

For a rough look at the ratio of image sizes you need, go to apple.com and have a look at the images on their homepage. Right click on them and open in a new browser. You will see they are much larger than the display setup. They are still 72dpi but shrinking them to say 60% on width and height will create the illusion of sharpness on retina displays. No need for a higher res (300dpi) upload.

 

[Feed Me]

One alternative is swapping the images on your site for progressive JPEGs. Using progressive JPEGs allows people on slow connections to view images quickly, and provides increased quality up to retina standard.
Also means you don't have to horse around with CSS and JavaScript, if you're out of your depth with these things.

Only problem with pJPEGs is that they have compatibility issues with certain IE versions (but then again, 90% of the stuff on the web and even stuff not on the web has compatibility problems with IE at some point), so look into it.

 

[andrewkendall]

This is a plug for my work, so apologies in advance!

I run http://www.digitalphotogallery.com/ which allows photographers to easily build and run their own websites. I've spent the last few weeks making sure everything is Retina compatible, so if you use the system it does everything for you.

Here are a few of the default templates:

http://scaling01.templates.digitalphotogallery.com/
http://fullscreen03.templates.digitalphotogallery.com/
http://gallery01.templates.digitalphotogallery.com/

If you have any questions let me know.

 

[stevelam]

One alternative is swapping the images on your site for progressive JPEGs. Using progressive JPEGs allows people on slow connections to view images quickly, and provides increased quality up to retina standard.
Also means you don't have to horse around with CSS and JavaScript, if you're out of your depth with these things.

Only problem with pJPEGs is that they have compatibility issues with certain IE versions (but then again, 90% of the stuff on the web and even stuff not on the web has compatibility problems with IE at some point), so look into it.

that 'solution' only applies to mobile safari. you still have to use some simple front-end code to get it to work. also, it would be really stupid to have all images as huge high quality progressive jpgs, particularly when the majority of the world are NOT using retina display screens.

 

[Feed Me]

that 'solution' only applies to mobile safari. you still have to use some simple front-end code to get it to work. also, it would be really stupid to have all images as huge high quality progressive jpgs, particularly when the majority of the world are NOT using retina display screens.

It applies to all modern browsers. And you don't need any more "front end code" than you would to embed a normal image. Plus, define "huge" - your images don't all need to be 1000x1000 masterpieces, they just need to be a bit higher quality than usual so they don't look fuzzy on a high DPI display.

 

[stevelam]

It applies to all modern browsers. And you don't need any more "front end code" than you would to embed a normal image. Plus, define "huge" - your images don't all need to be 1000x1000 masterpieces, they just need to be a bit higher quality than usual so they don't look fuzzy on a high DPI display.

sigh.

first of all, no it does not apply to all modern browsers. ONLY mobile safari as its version of webkit rescales images if it hits a certain threshold, mainly to save on the minimum amount of ram in mobile devices.

once again, how stupid would it be to serve a retina-optimized image to a non-retina device? horrible user experience.

secondly, you still need to scale a retina-optimized image down in order for it to display at the intended size. in other words you will need 'front end code' to serve the correct image where appropriate. anything else would be stupid and lazy on the dev/designer part.

 

[Feed Me]

sigh.

first of all, no it does not apply to all modern browsers. ONLY mobile safari as its version of webkit rescales images if it hits a certain threshold, mainly to save on the minimum amount of ram in mobile devices.

Progressive JPEGs work in modern browsers. They're supported, they load in, whatever. I'm not sure what point you're making

once again, how stupid would it be to serve a retina-optimized image to a non-retina device? horrible user experience.

It certainly wouldn't be the end of the world, nor would it be that stupid. I feel you're over egging it here, unless you think your users will actually skin you alive because an image is a couple hundred kb larger than before.

secondly, you still need to scale a retina-optimized image down in order for it to display at the intended size. in other words you will need 'front end code' to serve the correct image where appropriate. anything else would be stupid and lazy on the dev/designer part.

Code as in height: and width:? Because that's all you need. It's no biggie.

I'm just offering this as an alternative to using CSS and JavaScript, and I feel it's a perfectly viable option for people who aren't righteous pro webdevs like yourself.

I do agree that other methods are technically better, but this is easy, and it works.

 

[stevelam]

Progressive JPEGs work in modern browsers. They're supported, they load in, whatever. I'm not sure what point you're making



It certainly wouldn't be the end of the world, nor would it be that stupid. I feel you're over egging it here, unless you think your users will actually skin you alive because an image is a couple hundred kb larger than before.



Code as in height: and width:? Because that's all you need. It's no biggie.

I'm just offering this as an alternative to using CSS and JavaScript, and I feel it's a perfectly viable option for people who aren't righteous pro webdevs like yourself.

I do agree that other methods are technically better, but this is easy, and it works.

we're talking about using progressive jpg's as a solution to displaying retina display images. like i said, this does NOT apply to 'all modern browsers' like you're claiming because this was only a 'fix' generally for the 3rd gen ipad. why would webkit in a desktop browser bother to rescale an image? it doesn't.

and yes, it would STILL be stupid because the work required to serve an image correctly is hardly backbreaking. i'm assuming you're not a designer/dev if i have to answer why a "few hundred kb's more" is silly when it can be easily avoided. why bother compressing images at all then? why not just serve everything as 24-bit PNG's?

the point is your solution sucks for everyone else but yourself.

 

[tkermit]

The funny thing is also that a lot of badly made websites will look great, as a lot of people don't properly resize images for their site but rescale the full-size image. This is obviously bad design and makes pages slow to load, but for retina its good.

Not just for 'Retina' but also for when you zoom into a website on a regular device. E.g. Macrumors @ 200% :

vs.