Best practices for selecting and formatting images to enhance your Ricochet webstore homepage and ensure the images are visually appealing and effective.
Best Practices for Background Images
Purposeful Photography: Capture images specifically for your background, ensuring each photo serves a clear purpose and aligns with your brand.
Simplicity is Key: Opt for clean, uncluttered images that highlight your products or store ambiance, making it easier for visitors to focus on key elements.
Regular Updates: Refresh background images periodically to reflect seasonal changes, promotions, or new inventory, keeping your site dynamic and engaging.
Contextual Composition: Design your images with the layout in mind—especially the left side, where Ricochet typically displays headlines and call-to-action buttons. Use this space to guide visitors toward specific products or promotions with compelling messaging that encourages clicks.
Optimal Lighting: Shoot photos during overcast days or early mornings to achieve soft, natural lighting, reducing harsh shadows and enhancing image quality.
Avoid Embedded Text: Refrain from adding text directly onto images. Instead, utilize Ricochet's Header section to overlay text, ensuring better readability and flexibility.
Formatting Your Background Images
To ensure fast loading and compatibility across devices:
Use Landscape Orientation: Images should be wider than they are tall to match web layouts.
Crop to a 16:9 Aspect Ratio: This standard ratio works well across all screen sizes and devices.
Resize to 1920px Width: This ensures clarity and prevents your image from appearing stretched or blurry.
How to Format Images on Windows:
-Crop-
Find and open your image on your computer.
Note: This should default to Windows Photos. If on Mac, use Preview instead of Windows Photos—the steps are similar.
This is a great opportunity to make little changes to optimize your photo. You can add filters, change its color intensity, and other measures to make it more compelling.
Click Edit (image with pencil icon)
Click Crop Ratio (square picture in square icon bottom center)
From the aspect ratio options (below the image), select 16:9.
Adjust the crop area as needed.
Click Save options and choose Save a copy (recommended) to preserve the original.
-Resize-
Click the ellipses (three dots) to the right of 'Edit'
Click Resize image
Change the Width pixel count to 1920px.
NOTE: For best quality, start with a large image and scale down. Images under 1920px wide may appear slightly blurry. Most modern phones capture images over 3000px wide, so this is rarely an issue.
Click Save
