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
Edward Hong
15,431 PointsResizing background for responsive web design
I've got a large texture background for my webpage and I want to optimize it by resizing it into three files one for pc, tablet and mobile. What are good general dimensions for me to resize my background image?
2 Answers
Adam Rolfson
2,132 Points1920px width x 1080px height (desktop)
660px width x 1174px height (tablet)
480px width x 854px height (mobile)
Edward Hong
15,431 PointsCool thanks!
Edward Hong
15,431 PointsHi Adam can you please specify the width and the height for each device?
Adam Rolfson
2,132 PointsAdam Rolfson
2,132 PointsHere are widths I use. Hope this helps.
480px - Mobile 660px - Tablet 1920px - Desktop
It might be better to just let the browser scale the image. Export it in the largest size you will need and only use percentages to size the image in your CSS.
If you are worried about loading time just compress the image. I always try to keep my images as small as possible. Under 400-500kb for quick loading.
I suggest playing around with different levels of compression to balance quality and load times. Modern internet and devices can load very quickly. If you website is heavy in images though it will suffer. My website has many images but load times are lightning fast (Under 1 second with 15 images on the page) because I was very conscious of the file sizes.