Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Best resolution/image size for full size website background?

I'm working with full size background images on my website, but I don't like the loading times that I am getting. First thing I thought was to resize the image, but my image is at 1920 x 1200 at a weight of almost 850 KB.

I believe this is way too much for a background image and because of that my loading times are being affected.

What would be the best image resolution/image size for full size background images? At the same time, maintaining cross-browser compatibility/display.

Here is my website: http://www.salcoder.com and this is the website that I am using to measure my loading times: http://tools.pingdom.com/fpt/

Thanks for any comments!

6 Answers

Matt Campbell
Matt Campbell
9,767 Points

Use an svg file format. It reduces file size by 30% or something I read.

I once had a request to display a full size image as the background on the website. Using a combination of CSS and a tool like tinypng.org I was able to drastically improve loading times.

Brendan O'Brien
Brendan O'Brien
9,066 Points

The image you are using is fairly simple in terms of complexity and clarity of the picture. I think you could get it down to under 200 KB. In photoshop (or whatever you use) try lowering the quality a bit when you export it, and also you could lower the resolution to 1280x1024... see how that help. Add a max width for larger screens than that and just have some #000 background colour to fill in instead of image.

Kevin Korte
Kevin Korte
28,109 Points

Ideally, you would be able to have a much smaller image that you pattern across the screen repeatedly, and than use CSS gradients and transparency values to create the black fade out thing you have going on.

That way you'll have a much smaller image to load.

Check out this site to see how they created repeating wood texture backgrounds: (http://subtlepatterns.com/?s=wood&submit=Search)

I use this site a lot to create my CSS gradients. It's always tested to be pretty good at cross compatibility, even with older versions of IE.

(http://www.colorzilla.com/gradient-editor/)

Thanks to everyone for their suggestions! I have resized the image and I have cut down loading time by 50%!!!

I might make a screencast and post it on my blog/youtube channel.

Thanks!