SIZING BACKGROUND IMAGES IN REDWOOD

 

background-images

We tried to not include so many photoshop files in with our newer designs so instead of complicated photoshop files we’re guiding you how to size your images for your new design instead!

Since ProPhoto is now fully responsive there’s a couple of things to be aware of. Super large images need to be sized down so the page loads stay fast, but they have to be big enough to where when the browser is at full (27″ imac size) the images don’t look like junk on larger screens. We believe we’ve found a good size to fit these needs.

For browser spanning background images or large background images like in Redwood try these settings:

2000x1333px @72dpi and saved as a jpg at quality 5-8 in Photoshop or 50% in Lightroom.

We usually try to keep the size down to below 200kb per image, if you can manage that across the entire site your load times should be pretty good.

If the quality isn’t what you expect after uploading, try scaling up the quality just a little bit. Results may vary, if you want faster page loads but don’t mind the degradation in quality, then simply tone the quality down a little bit further.

 


 

PAGE HEADER BACKGROUND IMAGE SIZES

 

page header redwood

For Redwood we created some page headers for various pages, those sizes are a bit different but the sizing specifications are below.

×

Keep in mind the settings we give below are just really guidelines for the design! You can upload any width/height image you want, you're not limited by our design decisions at all. If you want something different to match your brand or just like a larger height or width image, then you be you!

2000x350px @72dpi and saved as a jpg at quality 5 in Adobe Photoshop or 50% in Adobe Lightroom. Usually, if your size is below 250KB you’re not straining page load and still getting good quality images. If your image just can’t go that low without degrading quality, then just keep the size down as much as possible.

 


 

WHERE TO FIND HEADER BACKGROUND IMAGE SIZES

 

You can find these background images in the same spot across all the templates.

 

Was this article helpful to you?

Comments are closed.