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
Matthew Francis6,967 Points
Regarding using <picture>
I'm using <picture>. Just wondering; should you always support retina displays by providing higher quality/dimension images? or is the main focus to change images when a breakpoint occurs?
Eg of different images for different breakpoints;
<source media="(orientation:landscape)" srcset="img/firstlook.jpg" />
<source srcset="firstlook-smallerscreen.jpg" />
<img class="content-image" src="firstlook.jpg" alt="First look - soft,simple new styles are here.">
I agree with Luther. You are weighing up a bunch of factors. In general you want smaller file weights (file download size) on mobile connections, but it's these devices that are more likely to have high density screens. I have found that using bigger (dimensions) images at lower quality often has the desired result. If you work with a designer you'll find that matching the proportions of an image for different breakpoints become important too.