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 Responsive Images Image Delivery with Srcset and Sizes Image Formats

Heidi Jermyn Heidi Jermyn
Heidi Jermyn Heidi Jermyn
695 Points

Explain 1x versus 2x images

Hey there, can you elaborate on what 1x images and 2x images are.

Thanks!

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points

2x images are generally images that are optimised for retina screens. They're scaled to twice the size of 1x images but since retina screens have twice the pixel ratio of most other screens they output the same size visually as 1x.

So a 25px image in width and height will look the same as a 50px width and height image in 2x. :-)

Zoltán Holik
Zoltán Holik
3,401 Points

Here is an article about picture scaling for normal and for retina display:

http://www.html5rocks.com/en/tutorials/responsive/picture-element/

This link is absolutely amazing to understanding this video! Thank you!