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
roostermang
3,822 PointsDealing with responsive image sizes
Hi! I am wondering if anyone has any ideas or tips on the best way to deal with responsive graphic sizes? Everything just starts to get so big pixel wise and I'm worried about it affecting download speeds. Even after compressing (in photoshop or illustrator) my banners as best I can they are still pretty big.
Example : I have a page I'm currently building and I have a header banner on that page. It's set to 100% width and is doing the responsive thing.
Question is : How big do I need to go in this current 2016 screen environment with artwork? My older macbook here is 1680x1050, all these retina machines are about...there is a site I work on where I have to do 1920x350 banners to fit it at full width. All cool but they start to get big even after setting that quality as low as I can go where you can't see distortions.
Is it a case of "one size can't fit all" and I should be using media queries so smaller screens only get a smaller downloaded header file showing (say 800px for example) and only the big screens get that 1920px wide image?
Cheers! Any advice most appreciated :-) ps : I suspect this is why vector css is a great idea!
2 Answers
Emily Kolar
2,787 PointsGenerally, I use three versions of an image. One of them is optimal for screen sizes up to 760px wide, the next is optimal for up to 1280px, and the last is a larger, super high-res image. The simple way is to switch between them with media queries, the default size being the smallest (mobile-first design), and setting an "@media (min-width:760px) {}" and so on from there.
Things can get way more complex than that though. I will be right back with some highly responsive HTML I've written (for graphics accommodation). Doing it from the HTML instead of the CSS can really enhance performance, and has some crazy stuff you can do. One moment!
Edit: Okey dokey, here's some image-switching examples: https://github.com/sheminusminus/responsivedemo
Just let me know if you have any questions about what's going on! Also keep in mind that there's literally thousands of sizes you could support, so generally, just pick a few that represent a good percentage of people. If you want to get really crazy with it, you can use resolution switching to load from an infinitely large smattering of images, and 2560x1440 is (I think) the current hot, ultra high-res option.
lauraniebel
4,685 PointsHere's also quite a useful article on how to use srcset for responsive images:
[http://www.sitepoint.com/how-to-build-responsive-images-with-srcset/]
roostermang
3,822 PointsThank you is a great article. Cheers :-)
fngr
11,179 Pointsfngr
11,179 Pointsnice answer!
roostermang
3,822 Pointsroostermang
3,822 PointsThanks Emily! Checking out the files, very much appreciated :-) i can see the html using that <picture> tag, is a new one to me I'll have a read about it. Thx!