Proper image formatting and compression are essential for maintaining website performance, improving SEO and ensuring a positive user experience.
Follow the guidelines below to ensure your images are web-ready.
Recommended file types
Choosing the right file type is crucial for optimising image quality and performance. Use the following recommendations:
JPEG (.jpg/.jpeg) – Ideal for photographs and complex images with many colours.
PNG (.png) – Suitable for images that require a transparent background (e.g., logos or graphics).
SVG (.svg) – Best for vector-based icons and logos that need to scale without losing quality.
Note: PNG files tend to be larger than JPEGs, so use them only when necessary.
What about WebP? WebP is a great format for reducing file sizes while maintaining quality; however, instead of exporting images in WebP format manually, we recommend uploading them in standard formats (JPEG, PNG, SVG), as our website automatically converts images to WebP using Cloudflare or a third-party service to optimise performance.
Video tutorial for Photoshop and uploading to WordPress
Image Compression Best Practices
To maintain a balance between image quality and page speed, follow these best practices:
Keep file sizes small: Aim for images under 200KB, where possible.
Resize images appropriately: Upload images at the exact dimensions needed on the site to avoid unnecessary scaling.
Optimise images before uploading: Use tools such as TinyPNG
Image Size Recommendations
Use the following guidelines for resizing images:
Full-width images: Max width of 2299px, optimised for desktop screens.
Standard content images: Between 800px – 1200px, depending on layout.
Thumbnail images: Around 150px – 300px, suitable for preview purposes.
Troubleshooting Common Issues
Image appears blurry: Ensure the uploaded image meets the required resolution and dimensions.
Slow page load times: Check that images are compressed adequately without sacrificing quality.
Wrong file type error: Convert images to the correct format before uploading.
Struggling with something? If you have any further questions, please contact our a member of the team.