Images in web display need to meet specific requirements for optimal viewing across different devices. Here's what you need to know:

Image Requirements:

• Maximum file size: 20MB (recommended: 500KB for faster loading)
• Minimum width: 1500px (2500px recommended)
• Format: JPG, PNG, or GIF
• Color mode: RGB
• Resolution limit: 120 megapixels

Best Practices:

• Upload high-quality images larger than your intended display size
• Keep page sizes under 5MB for faster loading
• Use PNG format for images with transparent backgrounds
• Maintain consistent aspect ratios in galleries
• Save text-containing images as PNG to prevent blur

Responsive Design: Squarespace automatically creates seven versions of each uploaded image:

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

Image Optimization Tips:

1. Match image shape to container format
2. Use focal points to center important content
3. Add alt text for accessibility and SEO
4. Consider upload text overlays instead of embedded text
5. Keep original files backed up locally

Troubleshooting Common Issues:

• Blurry images: Ensure width exceeds 1500px
• Cropping problems: Check aspect ratio compatibility
• Color distortion: Verify correct color profile
• Mobile display issues: Consider device-specific cropping
• Resolution changes: Normal when resizing; use recommended dimensions

For optimal results, follow these guidelines and maintain proper image specifications before uploading to ensure clear display across all devices.

Related Articles

Previous Articles