Retina websites: how do they work

[Ultra AleM]

Hello, guys. I was thinking about something.

If I create a website composed of just three pictures, two of them are buttons, what happens on Retina and Regular screens?

I mean, if I want them to look good on Retina I have to create them at a very high res (at least 720p), but then will they look gigantic on a regular screen making the experience impossible for all the users?

How does it work with dimensions? Thanks.

 

[leman]

As so often, Google comes to rescue: http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

Short version: you have to detect whether the device displaying your website is a HiDPI one and manage your graphics resources based on this. This can be done via CSS declarations or javascript. You can then have two different image versions, or just provide HiDPI ones and downsample them on 'normal' devices (this is very bandwidth-inneficient though).

 

[Ultra AleM]

So on normal HTML is all messed up?

 

[bill-p]

On normal HTML, you can provide higher resolution graphics and force them to display inside a smaller frame.

On a regular display, you'll see a scaled version of the graphics, but on a Retina screen, you'll see the graphics at its full resolution.

And the layout is not broken that way. I think it's the easiest way to deal with Retina websites, but it'll also make the website heavier as non-Retina screens still have to load much higher resolution assets.

 

[leman]

So on normal HTML is all messed up?

No, its not messed up. You have 'normal' images for normal displays and high-res ones on retina ones. Your website simply needs some extra code to be able to serve the right image based on the client's specs. Or, you can use hi-res images for everything, but tell your website to make them smaller for a normal display. This way or another, the websites need to be coded property so that they can support HiDPI displays - but this is often fairly trivial to do.

 

[bill-p]

No, its not messed up. You have 'normal' images for normal displays and high-res ones on retina ones. Your website simply needs some extra code to be able to serve the right image based on the client's specs. Or, you can use hi-res images for everything, but tell your website to make them smaller for a normal display. This way or another, the websites need to be coded property so that they can support HiDPI displays - but this is often fairly trivial to do.

I'd like to point out again that... this is not true.

Here's an example:
<img src="test.png" alt="retina test" width="300" height="300">

Let "test.png" be a 600 x 600 image.

On a Retina display, "test.png" will display at its full 600 x 600 resolution.
On a regular display, "test.png" will be scaled (by the browser) to 300 x 300.

No fancy coding, CSS, detection of system, etc... required.

Tested on Safari and Chrome.

The only downside is that your website will load slower overall, as it has to load all high-resolution assets.

 

[leman]

Well, compared to the 'classic' solution

<img src="test.png" alt="300x300 image here">

I still think that your example involves extra code

Anyway, IMO, the easiest solution for existing websites is just providing @2 images and injecting a java-script (or using a server-side file resolver script) to pick the correct image file - as such solutions already exist and get be downloaded and set up very easily.

 

[bill-p]

Well, compared to the 'classic' solution

<img src="test.png" alt="300x300 image here">

I still think that your example involves extra code

Anyway, IMO, the easiest solution for existing websites is just providing @2 images and injecting a java-script (or using a server-side file resolver script) to pick the correct image file - as such solutions already exist and get be downloaded and set up very easily.

It's just a simple <img> tag... that's using standard specs ("width" and "height"), how is that more codes than having to append a whole section of JavaScript?

And JavaScript is not reliable in case the client decides they want to spoof the user-agent for whatever reason. In that case, it's still best to stick with standard <img> tags and let the browser do its job.

 

[leman]

It's just a simple <img> tag... that's using standard specs ("width" and "height"), how is that more codes than having to append a whole section of JavaScript?

Because under the worst-case scenario it requires a change in every IMG tag on the website as opposed to adding a single line of js to your websites.

And JavaScript is not reliable in case the client decides they want to spoof the user-agent for whatever reason. In that case, it's still best to stick with standard <img> tags and let the browser do its job.

This is indeed a very valid point in favour of your approach!

 

[bill-p]

Because under the worst-case scenario it requires a change in every IMG tag on the website as opposed to adding a single line of js to your websites.

You still have to rewrite the whole page one way or another to take advantage of the JS.

It's not like the JS will magically go in and replace all instances of "test.png" inside your HTML with "test@2X.png".

And if your website layout is generated on the server side by PHP, then it shouldn't take that long to modify them.

Either way, the choice is clear: if you designed the website with pure HTML (no CSS, etc...) then a slight modification to the IMG tags (and this should have been done from the start to preserve layout integrity in case you suddenly insert an image that's a little bit bigger or smaller than the intended dimensions) are still necessary. If you designed the site with CSS, then... you still have to go in and change all of your CSS manually anyway.

Some modification is imminent. There is no way around it.