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 Art Direction with the Picture Element The Picture Element

yashita mittal
yashita mittal
4,678 Points

How to convert 1x image to 2x or 3x

I have finished the Responsive images course. I understand how to make images responsive and fit them for different devices. But I am not sure of how will I get different versions (large, medium, small) of the image. Say if I download the photo of a cat from the web which is at 1x, then how will I scale that image to 2x or 3x. I think scaling up will blur the image. Is there any other way around to upscale an image if a high pixel density image is not available? How to make a landscape image to square size to display on mobile devices. I don't know much about Photoshop. Appreciate the useful links to Photoshop for this query.

1 Answer

Ash Scott
Ash Scott
423 Points

Hi yashita mittal,

Take a quick look at this article. Might explain everything a bit better. Sadly it's not possible to make a 2x or 3x image if the original image isn't a large one naturally :)

Good luck! Ash