Images display best on your website when properly formatted for web use. Here's what you need to know:

Key Image Requirements:

• Maximum file size: 20 MB (recommended 500 KB for faster loading)
• Minimum width: 1500px to avoid blurriness
• Optimal width: 2500px for best quality across devices
• Supported formats: JPG, PNG, GIF
• Color mode: RGB (not CMYK)

When you upload an image, seven responsive versions are automatically created:

• 100px
• 300px
• 500px
• 750px
• 1000px
• 1500px
• 2500px

Best Practices for Web Images:

1. Image Shape (Aspect Ratio)

• Use consistent ratios within galleries
• Match container shapes to minimize cropping
• Consider device display differences

2. Image Quality

• Upload high-resolution originals
• Keep total page size under 5MB for fast loading
• Use PNG format for text-heavy images or transparent backgrounds

3. Mobile Optimization

• Test appearance across devices
• Use Device Preview to check mobile display
• Consider banner image cropping on smaller screens

4. Accessibility

• Add descriptive alt text
• Make text searchable (avoid embedding in images)
• Use overlays for text on images

Troubleshooting Common Issues:

Blurry Images:

• Ensure width is at least 1500px
• Check original image quality
• Verify proper file format

Cropping Problems:

• Adjust focal points
• Match aspect ratios to containers
• Use integrated image editor for adjustments

Color Distortion:

• Confirm RGB color mode
• Check color profile settings
• Avoid CMYK format

Remember: You cannot modify image files after upload, but you can adjust appearance using the integrated image editor. Keep original files on your computer as backup.

These guidelines ensure your images display clearly and professionally across all devices while maintaining fast load times.

Related Articles

Previous Articles