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
Robert Mews
11,540 PointsCourse for Creating Images?
Does Treehouse have a course on creating images for the web (non svg images)? I'm working on a website with original images, however, I'd like to understand how to save those images for the web and create the 1x and 2x versions.
2 Answers
Greg Kaleka
39,021 PointsHi Robert,
You'll want to check out the Photoshop Foundations course. Towards the end of the course, there's a series of lessons on saving for the web.
Cheers!
-Greg
jne
12,613 PointsTreehouse doesn´t have any tutorials on that. Maybe in the future? For web I usually use .png. To make 1x, 2x, 3x etc. you will just increase them by the number. 1x means the original image, 2x means double the size, and 3x means triple the size. If you have a image name like: "MikeTheFrog", you could call your images like: "MikeTheFrog@1x", "MikeTheFrog@2x" and "MikeTheFrog@3x"
rachaelhampton
3,352 PointsThx you, I was looking for something on 1X and 2x images.
Robert Mews
11,540 PointsRobert Mews
11,540 PointsHi Greg,
That was helpful. I will say though, that I'm still confused on how best to set the pixel dimensions for images. I have a parallax jumbotron that is mobile responsive, so I'm assuming I create various crops of that image based on my media queries? Also, how does one create those crops based on retina?
Best, Robert
Greg Kaleka
39,021 PointsGreg Kaleka
39,021 PointsThat sounds right, but frankly, it's a bit over my head. As for retina, I would post a separate question. I know you can create media queries to target resolution-specific displays.
I will say, from my experience with iOS image assets, you want to start with the full resolution image and scale down from there for lower-res devices. Many image editors allow you to simply cut the resolution in half, by essentially scaling the image down.