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

HTML

Posted by Paulo Oliva
Paulo Oliva
2,968 Points

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
Matt Campbell
Matt Campbell
9,767 Points

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

Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer
Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer

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
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,149 Points
Kevin Korte
Kevin Korte
28,149 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/)

Paulo Oliva
Paulo Oliva
2,968 Points
Paulo Oliva
Paulo Oliva
2,968 Points

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!