Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Making 1x and 2x images

Hi Treehouse People :)

I started the Responsive Images course with Nick Pettit. I've never this before but I've adapted to the idea of 1x and 2x images. Of course, I've been aware for some time that that Apple screens and smart phones view more pixels per inch in resolution than therefore display images much smaller than other desktop screens.

So I guess, labelling images 1x and 2x makes sense.

I'm showing my ignorance here a little bit, But what I'm not sure about yet is how to differentiate those images. Is there a special setting you have to use on Photshop or an image program to "make" an image 2x, or is it simply a case of making an image twice the intended size and then displaying it as a 2x in your srcset attribute?

Do you have to create 2 seperate optimised images or can you effectively "scale down" a 1x image in size to get quality images?

Hope this all makes sense. :)

4 Answers

Gilbert Kennen
Gilbert Kennen
10,661 Points

You just use a 'larger' picture for the 2x version.

It is completely fine to just use the higher-pixel-density image for both 1x and 2x displays. Lower-pixel-density displays use reasonably good algorithms to throw out the extra information and it can actually improve how it looks if the image has a dynamic size since a lower-density image has less information for shrinking/enlarging.

You may want, however, to use different versions of an image for different screens simply to reduce the download size for users who cannot utilize the higher quality images.

George Deselop
George Deselop
799 Points
George Deselop
George Deselop
799 Points

Hello Jonathan,

I am by no means an expert, but here's how its worked so far for me: say you want a background for PC screens, all the way from 1920x1080 to small screen laptops, and you want to cover that spectrum with a single .JPEG file (x1). You would normally deploy the photo in 1920x1080, whereas in 2x displays, you would deploy a 1920x1080 x2. Most work I've done where the graphic team payed attention to retina displays, our original assets where in x2; it was just a matter of scaling down in Photoshop. Wouldn't bet on this being the right method, of course!

Edit: Obviously scaling up is not the right thing to do. :P

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Certainly not the scaling up as you rightly say :-)

But I worry about the scaling down too. Obviously you have an asset set of images of the different sizes you want so I guess my point is do you account for this in production or have you one massive image and then make another image of the same, scaled down?

I would guess maybe not but I wanted to be sure.

George Deselop
George Deselop
799 Points

To be honest, I have yet to come across a warning or problem or an 'it's ill-advised' article on scaling down images. For example, in a recent project, I had one massive .JPEG image for the background - used it for retina displays, scaled down for 1x screens, scaled down for 2x tablet screens, scaled down for 1x tablet screens and so forth. Still pixel perfect, as far as my delicate eyes can see.

Alas, I have a slight suspicion that this method is not the 'professional' way to do it. So OK, you can obviously create a .PNG set of files for your AI logo, but what do you do with your HD, crystal-clear, stock background photo of Mt. Everest?

Holger Liesegang
Holger Liesegang
50,595 Points
Holger Liesegang
Holger Liesegang
50,595 Points

Hi Jonathan,

In addition I'd like to recommend this very interesting article from Daan Jobsis regarding the retina/high resolution issue: http://www.netvlies.nl/blog/design-interactie/retina-revolution

"More detail with less kilobytes"

"A smaller filesize AND a better quality on both screen types! This is impossible."