Image Guidelines

1. Website Image Guidelines

To ensure consistency, usability, and optimal page speed, please follow these guidelines when selecting and uploading images to your website.

1.1 Image Types and Formats

• JPEG / JPG
  Best for photographs or images with rich colours and fine detail.
• PNG
  Ideal for logos, icons, and images that require a transparent background.
• SVG
  Recommended for vector graphics such as logos, icons, and simple illustrations.
• WebP
  A modern image format that offers excellent compression and quality. While widely supported, some older browsers may not support it.

---

1.2 Recommended Minimum Sizes

Image Type	Recommended Size
Full Screen Background and Header Images	1920 × 1080 px
Content Width Header Images	1600 × 900 px
Product Images	800 × 800 px
Blog Post Featured Images	1920 × 1080 px
Thumbnail Images	400 × 400 px
Icons and Logos	SVG preferred, or at least 512 × 512 px

---

1.3 Image Optimisation Tips

Compression

Always compress images before uploading using tools such as:

• TinyPNG
• JPEG Optimizer
• Adobe Photoshop Save for Web

Aspect Ratio

Maintain a consistent aspect ratio for images within the same category.

Example:

• Blog post featured images: 3:2 ratio (1920 × 1280 px)

File Size

For optimal loading speed:

• Standard images: 100 KB to 200 KB
• Icons and small graphics: Under 50 KB

Descriptive Filenames

Use clear and meaningful filenames.

Good Example:

red-sports-car.jpg

Avoid:

IMG_0001.JPG

Alt Text

Provide meaningful alternative text for all images to improve:

• Accessibility
• Search engine optimisation (SEO)

Website Optimisation

While the website may automatically optimise and convert images to WebP format with JPEG fallbacks, it is best practice to upload already optimised images. This ensures maximum file size reduction and helps improve page load speed and search engine performance.

---

1.4 Header Banner Images

When selecting header banner images:

• Use high quality photographs or background graphics.
• Avoid including text within the image.
• Avoid busy or high contrast imagery that may interfere with overlays.
• Choose lower contrast images to improve readability of navigation menus and page titles.

Recommended Size

• Minimum width: 1920 px
• Minimum height: 650 px

Additional Notes

• Taller images can be used but may be cropped from the top.
• Preview banners at different screen sizes to ensure key visual elements remain visible.
• Use the website editor’s image positioning controls to adjust cropping where necessary.

---

1.5 News and Blog Post Featured Images

Recommended Size

• 1920 px wide × 1280 px tall

This helps maintain consistency across:

• News listing grids
• Blog archives
• Article headers

Content Recommendations

• Use clean photographs or background graphics.
• Avoid logos and text overlays, as these may become unreadable when images are cropped.

Excerpts

To maintain balanced layouts in news and blog grids:

• Add a custom excerpt of up to 40 words.
• Avoid relying on automatically generated excerpts where possible.

---

1.6 Popup Overlay Images

If using images within promotional popups or modal windows, use the following dimensions:

Layout Type	Recommended Size
1 Column Layout	1800 × 1200 px
2 Column Layout	900 × 600 px
3 Column Layout	600 × 400 px

Testing

Always test popup images across multiple screen sizes to ensure a visually appealing and responsive layout.

---

1.7 Legal Considerations

Copyright

Only use images that you have legal permission to use, including:

• Royalty free images
• Purchased stock photography
• Original photographs and graphics

Model Releases

If images contain identifiable individuals, obtain signed model release forms where required.

Attribution

Provide appropriate attribution when required by the image licence.