Have stunning background images on your home page is an incredibly effective way to make your website stand out. There are a few things to keep in mind when taking photos for background images and how to use them effectively. We're going to cover both our tips and tricks as well as the technical specs for these images.

First off, your background images are what appear on your home page. In the new Ricochet Web Store you have a few different options depending on the style of image you want to use and how it interacts with your header. This article applies to all versions: full viewport, single image, and slideshow.

1. Don't just use any photo. Spend some time and take photos specifically for your background images. When building a website for the first time, it's really easily to get caught up on the nervousness and hype and just use the content and images you already have. Remember that imagery is like a tool. Every image you take should have a purpose and specific use. Taking images "just for the heck of it" will almost always result in poorer quality and less intriguing photography. Set some time aside and take photos each with their own intention on your website.

2. Simplicity almost always looks better and converts more sales than complex images. If you've ever looked at dream houses or stunning interior setups on Instagram, you've probably noted that they typically look like nobody lives there. While there is some validity to different styles and preferences of minimalism vs busier-looking photos, ecommerce photos perform best when the viewer has a clear understanding of what to look for and what is being promoted, even if that is a single product.

In this example, both photos are great photos, but the second one will likely draw more clicks. You're also welcome to experiment with this in Google Analytics if you're an advanced user.

3. Frequently change these as your store evolves, seasons change, or items go on sale. As your website grows, your loyal customers will return to shop online or just see what's on sale. Just like your physical store, it gets old and stale if you don't change it up every once in a while. If you have a sale coming up, take a good background photo with a few of those products ahead of time.

4. Compose your image to have a headline and call to action on the left hand side. In Ricochet, you always have the option to create a headline and call to action button on the background photo. This not only gives some context to what is being shown, but encourages the visitor to immediately go exactly to the product you're promoting.

Notice in the examples below how difficult it is to read the text. Even though both are are good photos. If you want to use a photo without any text, you can, but you'll get more clicks and purchases using strong calls to action.

5. Cloudy weather and early mornings make for the best outdoor and natural lighting. There's a reason why you can take dozens of paid photography courses online. It's an art and a skill. But one of the easiest ways to dramatically improve your photos is good lighting. Cloudy days and early mornings reduce shadows and harshness. You'll be surprised the difference in quality just by the daylight conditions.

6. Don't add any text to the image itself. It's best to do this in the Header section of the Ricochet Web Store designer.

In Ricochet (and in general) background images are always landscape. Meaning that they are wider than they are tall. Start by making sure you take photos this way. Again, keep in mind that the left hand side of the photo will have content on it, so try to leave that space blank or clean of distraction.

We're going to go over how to resize photos in Windows. The process on a Mac is similar, just using Preview instead of Microsoft Photos.

4. Click "Edit & Create" and select "Edit"

5. This should automatically take you to the cropping stage. You can manually drag the handles around to your liking, or just use the pre-built aspect ratios from the drop down on the right hand side.

6. Select 16:9. You'll notice the handles making the image widescreen. Drag the image to fit nicely within the handles to how you would like it to appear. Everything outside the handles will be cropped out.

7. Click "Save"

8. Next click on the ellipses (three dots) in the upper right and select "Resize."

9. Select "Define Custom Dimensions"

10. Make sure "Maintain Aspect Ratio" is checked and change photo's width to 1920px Notice that if your image is less than 1920 pixels wide, your image my become slightly blurry. In general, always try to start with your largest image and scale down to maintain sharpness.

Even basic phones today take photos over 3000 pixels wide, so this shouldn't be an issue if you're taking the photos yourself.

11. Save the Resized Copy on your computer.

Your photo is now web optimized and ready to go for your website! Easy, right?