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

yashita mittal
yashita mittal
4,678 Points
Posted by 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
435 Points
Ash Scott
Ash Scott
435 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