The best way to display images on your website starts with understanding the key requirements and best practices for web-optimized images.

Image Requirements:

• Maximum file size: 20 MB (recommended: under 500 KB for fast loading)
• Recommended width: 2,500 pixels
• Minimum width: 1,500 pixels to avoid blurriness
• Supported formats: JPG, PNG, GIF
• Color mode: RGB

Best Practices for Image Display:

1. Size and Resolution

• Upload high-quality images larger than your maximum display size
• Aim for 2,500px width for optimal responsive scaling
• Keep page size under 5MB for fast loading

2. Image Shape and Containers

• Match image aspect ratio to container shape
• Use consistent aspect ratios in galleries
• Consider how images will crop on mobile devices

3. Format-Specific Tips

• Use PNG for transparent backgrounds
• Save text-heavy images as PNG to maintain sharpness
• Use JPG for photographs and general images

Responsive Design: Images are automatically resized to seven different widths:

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

Accessibility and SEO:

• Always add alt text to images
• Use text overlays instead of embedded text
• Ensure proper image metadata

Troubleshooting Common Issues:

1. Blurry Images

• Check image width (minimum 1,500px)
• Verify file format and compression settings
• Ensure proper resolution

2. Cropping Issues

• Adjust focal points
• Match aspect ratios to containers
• Use appropriate image dimensions

3. Color Distortion

• Verify color mode is RGB
• Check color profile settings
• Ensure proper file format

Remember to keep original files backed up locally, as downloading from the site may not always be possible.

Related Articles

Previous Articles