When adding images to a website, proper formatting ensures clear display across all screen sizes. Here's what you need to know:

Image Requirements:

• Maximum file size: 20 MB (recommended: 500 KB or less)
• Minimum width: 1500 pixels (ideal: 2500 pixels)
• Supported formats: JPG, PNG, GIF
• Color profile: sRGB
• Resolution limit: 120 megapixels

Best Practices:

• Upload high-quality images at their largest intended display size
• Use PNG format for images containing text or requiring transparency
• Keep similar aspect ratios within galleries for consistent appearance
• Add alt text for accessibility and SEO
• Avoid embedding text directly in images

Responsive Design Considerations:

• Images automatically resize for different devices
• Seven image variations are created (100px to 2500px width)
• Aspect ratio remains constant during resizing
• Consider mobile cropping for banner images
• Use focal points to control image centering

Troubleshooting Common Issues:

• Blurry images: Check image width (should be >1500px)
• Color distortion: Verify correct color profile (sRGB)
• Cropping problems: Match image aspect ratio to container
• Loading speed: Keep page size under 5MB
• Resolution changes: Normal when viewing at different sizes

Image Placement Tips:

• Use overlays for text instead of embedded text
• Maintain consistent image shapes within galleries
• Preview appearance in device view
• Consider container shapes when selecting images
• Upload images in correct orientation before adding to site

For optimal website performance, balance image quality with file size and follow proper formatting guidelines for each specific use case (logos, banners, galleries, etc.).

Related Articles

Previous Articles