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

General Discussion

Posted by Melanie Chuaypradit
Melanie Chuaypradit
7,515 Points

Image Sizing

A general question - is it a normal practice to have various sizes of the same photo for your website to choose from based on the browser/screen?

For example, I am building a site that has many photographs (almost like a blog format with a photo in each entry). I am realizing that my pictures, while scaled down in screens less than 768px, are way too big for anything larger than 768 (or even in landscape mode).

I am looking over the Responsive Images video, but I guess I thought there was a way to target photo sizing and have it scale up/down depending on the media query (ie. in landscape mode, I want my 3 images scaled down and on the same line, vs. in a column when in portrait mode).

Am I missing something or are srcset/Picturefill the only solution to this?

1 Answer

Luke Pettway
Luke Pettway
16,593 Points
Luke Pettway
Luke Pettway
16,593 Points

It is certainly a new practice, one that not everyone has started adopting yet. There are ways of lazy-loading images and serving them based on screen size as well as methods of doing similar in css using the background image property. You can also size the images with media queries, but that doesn't solve the issue of how they'll look depending on the screen hence why people will do hacky things using background-image.

Srcset and Picturefill were developed to help solve this problem, but there are a lot of considerations and reservations behind them especially for CMS based websites, since there is a lot to factor on (size/orientation/pixel density).

Check out this article on Smashing, it looks like they are doing some similar things to what you might be doing:

https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/

They start off stacked on mobile, and on larger layouts turn into a grid. Hopefully that gives you some direction in your decision making.

Melanie Chuaypradit
Melanie Chuaypradit
7,515 Points

This is great and super helpful, thank you so much!