Image Sizes & Best Practices

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:

• Recommended Size: Keep images under 3MB (the maximum file size permitted is 15mb and images must be less than 5,000px tall or wide)
• 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)... avoid using large PNGs where possible as this may impact pagespeed and bandwidth use.
• WebP: Recommended for most cases, as it provides superior compression without noticeable quality loss. LOOP converts JPEGs to WebP files automatically.
• SVG: Ideal for logos, icons, or vector graphics.

3. Composition and Framing

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. Place key subjects within the middle 50% of the frame to accommodate cropping and responsive resizing.

4. Accessibility Best Practices

• Avoid Text in Images: Not accessible for screen readers and can't be translated or resized.
• Alt Text: Provide descriptive alt text. LOOP uses the filename for alt text by default.
• Contrast: Ensure sufficient contrast between subject and background.
• If overlaying text onto an image, try to use a panel/background colour and check legibility across device sizes.

5. Best Practices for Images in LOOP

• Start With Quality: Use sharp, high-resolution images.
• Prioritise Mobile-Friendly Content: Compose images that look great on both desktop and mobile.
• Brand Consistency: Use colours, lighting, and framing that match your brand identity.
• Test Across Devices: After uploading, review how images appear on various screen sizes.

6. Common Mistakes to Avoid

• Oversized Files: Avoid files larger than 3MB.
• Text Overlays: Relying on text in images harms accessibility.
• Cluttered Backgrounds: Overcrowded compositions make key subjects hard to focus on.

7. Pro Tips

• Pre-Edit for Crop: Pre-edit to ensure key subjects remain visible after responsive resizing.
• Leverage Crop Customisations: Check your focal point in the LOOP media manager and manually override crops on important images if needed.
• Batch Resize and Compress: Use tools like Squoosh or TinyPNG before uploading.

Created by Neil Lewin, Modified on Thu, 9 Apr at 2:57 PM by Neil Lewin