Image formats and sizes are crucial for optimal web display. Here's what you need to know:

Key Image Requirements:

• Maximum file size: 20 MB
• Recommended file size: Under 500 KB for fast loading
• Minimum width: 1,500 pixels to avoid blurriness
• Optimal width: 2,500 pixels for best quality across devices
• Supported formats: JPG, PNG, GIF

How Images Display Online:

Images are affected by:

• File specifications
• Image width
• Aspect ratio (height-to-width ratio)
• Container dimensions
• Responsive design adjustments

Responsive Design Features:

Squarespace automatically creates seven versions of each image:

• 100 pixels
• 300 pixels
• 500 pixels
• 750 pixels
• 1,000 pixels
• 1,500 pixels
• 2,500 pixels

Best Practices:

1. Image Quality

• Upload high-quality images at or above maximum display size
• Keep page size under 5 MB for fast loading
• Use PNG format for text-heavy images or transparent backgrounds

2. Image Shape

• Match image shape to container shape to prevent cropping
• Use consistent shapes in galleries (all landscape or all portrait)
• Consider mobile display when choosing aspect ratios

3. Text and Accessibility

• Add text as overlays rather than embedding in images
• Include alt text for accessibility and SEO
• Use descriptive file names

Troubleshooting Common Issues:

Blurry Images:

• Ensure width is over 1,500 pixels
• Check image resolution
• Verify file format is correct

Cropping Issues:

• Adjust focal point
• Match aspect ratio to container
• Use image editor for custom crops

Color Distortion:

• Check color profile settings
• Use recommended color modes
• Verify file format compatibility

Following these guidelines ensures your images display clearly across all devices while maintaining fast loading times and professional appearance.

Related Articles

Previous Articles