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

Matthew Francis
Matthew Francis
6,967 Points
Posted by Matthew Francis
Matthew Francis
6,967 Points

Questions regarding the usage of <img srcset="">

HTML/CSS - 2 small questions regarding: <img srcet = ""/>

  1. From what I've learned, we provide multiple images that have more PPI/higher resolution and larger sizes. (eg; 2x, 3x). Why do we increase the size as we increase the resolution? Cant we just increase the resolution and leave the image as just is?

  2. What is the difference between using the 'x' descriptor and the 'w' descriptor? They seem to achieve the same thing. I've read multiple articles on it but it can't seem to click for me. A dumbed down explanation would be much appreciated.

Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

Hey Matt,

Going to link you to CSS-Tricks again for an article that talks about this. It does not directly answer your questions but I think you can work out the answers based on the article!

https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

Matthew Francis
Matthew Francis
6,967 Points
Matthew Francis
Matthew Francis
6,967 Points

I just looked over it again. Do the images in srcset just need to have different dimensions? or do we also need to provide higher resolutions for bigger dimensions?

1 Answer

Shawn Denham
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points
Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

Technically you could use the exact same picture. In practice you would want to use a higher resolution one however. The whole point is to save bandwidth and download time on lower resolution screens.