Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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 90,705 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!