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

CSS

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

Images and Pixels

Say you have a container that has a max-width of 20% of the screen size, inside the screen size contains the image you want to show with a width of 100%. How should we optimize this while maintaining quality?

  1. Should you resize the image into a few different sizes, and depending on the size of the monitor you upload the appropriate size? (Eg; A resized picture that has 200px for a container of 100px or 200px? if I recall, by increasing it to 200px, that would increase the quality; then a resized picture of 800px for a container of 800px and so on

  2. Should I only have 1 resized picture for the largest monitor that's possible? That would create performance issue for smaller monitor screens and cause a longer loading time. So that's a no go.

What is the appropriate way to do it?

3 Answers

Michael Hulet
Michael Hulet
47,913 Points
Michael Hulet
Michael Hulet
47,913 Points

In the olden days of the web, the best you could do without some kind of JavaScript polypill was to make a big image, size it responsively in CSS as long as it didn't get to big, and lock it to a specific size any bigger. However, this is somewhere that web browser implementors have been innovating in recent years. Rowan mentioned the srcset attribute in his answer, which is super helpful, but there's still a bunch more you can do depending on your use case. This is a pretty solid article about a lot of your options and how widely it's supported

Rowan Blackwood
Rowan Blackwood
5,220 Points
Rowan Blackwood
Rowan Blackwood
5,220 Points

You could try srcset that enables you to serve the most appropriate image for the current device. You can read all about it here https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

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

Thanks for the suggestion! do most people or companies use srcset?

Rowan Blackwood
Rowan Blackwood
5,220 Points
Rowan Blackwood
Rowan Blackwood
5,220 Points

We use srcset all the time at work. The link posted by Michael is definitely worth a read as this also discuses things like the <picture> element which is super handy for art direction.