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

Design

Posted by Victor Ibasco
Victor Ibasco
11,035 Points

Professional Website Image Handling Best Practices - Resources - Tips - Details

I was wondering if someone could point me to a resource explaining how images are handled for professional websites. To elaborate, I specifically want to really understand how image size is dealt with.

Take for example, would the same image be copied in multiple formats for the different user screen sizes ?

Some best practices and any related information would be awesome ! Again, it'd be really cool if anyone could point me to a list of articles or specific websites pertaining to any key or related information.

Else, it'd be rad if you could easily or simply answer yourselves!

Cheers, Victor

1 Answer

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

It is indeed common to include multiple formats for different screen sizes, and the "srcset" attribute of an "img" element is designed specifically to support that.

The MDN page on Responsive Images might be a good reference, and you might enjoy several of the CSS courses here, including Responsive Layouts.

Victor Ibasco
Victor Ibasco
11,035 Points

I appreciate the answer and resources, thank you, thank you thank you !!