1. File Size Guidelines
LOOP optimises and handles cropping and responsiveness for images automatically, but starting with the right file size ensures the best performance:
- Maximum Size: Keep images under 3MB.
- Ideal Range: Aim for 500KB–2MB for most images to balance quality and load time.
2. File Formats
Choosing the right format is important for balancing quality and performance:
- JPEG: Best for photos, events, and landscapes. Offers small file sizes with good quality.
- PNG: Use for images requiring transparency (logos or overlays).
- WebP: Recommended for most cases, as it provides superior compression without noticeable quality loss. LOOP converts JPEGs to WebP files automatically, so you don't need to worry too much about this.
- SVG: Ideal for logos, icons, or vector graphics (scales perfectly without losing quality).
3. Composition and Framing
Well-composed images enhance user experience and visual appeal. Follow these tips:
Subject Placement
- Rule of Thirds: Divide the image into a 3x3 grid and position key subjects along the gridlines or intersections.
- Centre Framing: Use for direct attention (e.g., product shots or key features).
- Whitespace: Leave sufficient empty space around the subject to maintain focus and avoid clutter.
Mix of Close-Up and Wide Shots
- Use a variety of close-up and wide images to tell a story and add depth.
- For wide images, ensure there is breathing room and more dead space around the subject. Place key subjects within the middle 50% of the frame to accommodate cropping and responsive resizing.
Use High-Resolution Sources
- Upload images with enough detail to look sharp after optimisation. LOOP handles resizing, but a blurry original will still appear blurry.
4. Accessibility Best Practices
To ensure all users can access your content:
- Avoid Text in Images: Text embedded in images is not accessible for screen readers and can’t be translated or resized. Use overlays or captions instead.
- Alt Text: Provide descriptive alt text for all images. Example: Instead of “image1.jpg,” use “Family enjoying a day at the zoo.” LOOP uses the filename for alt text by default, so ensuring this is descriptive will give you a good head start.
- Contrast: Ensure sufficient contrast between the subject and background for visibility.
- If overlaying text onto an image, try to use a panel / background colour. Otherwise check that the text is legible across all device sizes as much as possible.
5. Best Practices for Images in LOOP
LOOP takes care of much of the technical optimisation, so focus on these essentials:
- Start With Quality: Use sharp, high-resolution images to let LOOP optimise them effectively.
- Prioritise Mobile-Friendly Content: Compose images that look great on both desktop and mobile views.
- Brand Consistency: Use colours, lighting, and framing that match your brand identity.
- Test Across Devices: After uploading, review how the images appear on various screen sizes.
6. Common Mistakes to Avoid
- Oversized Files: Avoid uploading files larger than 3MB, even though LOOP optimises them, it'll mean you use more storage and may need to upgrade hosting capacity.
- Text Overlays: Relying on text in images can harm accessibility and make updates harder.
- Cluttered Backgrounds: Overcrowded compositions can make key subjects hard to focus on.
7. Pro Tips
- Pre-Edit for Crop: While LOOP handles cropping, pre-edit your image to ensure key subjects are visible even after responsive resizing.
- Leverage Crop Customisations: Check your focal point in LOOP with the media manager, and manually override crops on important images on key pages if needed.
- Batch Resize and Compress: Use tools like Squoosh or TinyPNG to batch process images before uploading.
