Changing images

Images are a crucial part of any website. With the Edit Tool, you can easily replace images without touching any code – just click, upload, and done.

Selecting an Image

1. Enable Edit Mode
2. Hover over the image you want to change
3. Click to select it
4. The Image tab opens in the editing panel

Uploading a New Image

Step 1: Click Upload

In the Image tab, click the Upload or Change Image button.

Step 2: Select Your File

Choose an image from your device. Supported formats:

• JPG/JPEG - Best for photographs
• PNG - Best for graphics, logos, screenshots
• GIF - For animated images
• WebP - Modern format with good compression
• SVG - For vector graphics (icons, logos)

Step 3: Confirm

The new image replaces the old one automatically.

Image Requirements

Recommended Sizes

| Image Type | Recommended Size | | -------------- | ---------------- | | Hero/Banner | 1920 x 1080 px | | Product images | 800 x 800 px | | Team photos | 400 x 400 px | | Thumbnails | 300 x 300 px | | Logos | 200 x 60 px |

File Size Limits

• Maximum: 10 MB per image
• Recommended: Under 2 MB for best performance
• Large images are automatically optimized

Quality Tips

• Use high-resolution images for best results
• Avoid blurry or pixelated images
• Consider mobile users (images should look good at small sizes)

Types of Images You Can Change

Hero Images

The large banner images at the top of pages.

Product Images

Photos in product cards, galleries, or detail pages.

Team/Profile Photos

Images of people, team members, or authors.

Background Images

Images used as section backgrounds.

Logos

Your company logo or partner logos.

Icons

Small illustrative images (though some icons may be code-based).

Image Optimization

Promake automatically optimizes your images for web performance:

• Compression: Reduces file size without visible quality loss
• Responsive: Creates multiple sizes for different devices
• Format conversion: Converts to efficient web formats

Best Practices

Match the Style

Choose images that match your website's overall style:

• Similar color tones
• Consistent photo style
• Appropriate subject matter

Consider Aspect Ratio

Try to use images with similar proportions to the original:

• Square for square placeholders
• Wide for banner areas
• Portrait for vertical spaces

Use Quality Sources

Get professional images from:

• Your own photography
• Stock photo sites (Unsplash, Pexels)
• Professional photographers
• Brand asset libraries

Optimize Before Upload

For best performance:

1. Resize images to appropriate dimensions
2. Compress using tools like TinyPNG
3. Use appropriate file format

Common Scenarios

Scenario 1: Updating Product Photos

Got new product images?

1. Enable Edit Mode
2. Click on the product image
3. Upload your new photo
4. Repeat for each product

Scenario 2: Changing Hero Banner

Want a new homepage banner?

1. Enable Edit Mode
2. Click on the hero image
3. Upload your new banner (ideally 1920px wide)
4. Check how it looks on mobile

Scenario 3: Adding Your Logo

Need to replace placeholder logo?

1. Enable Edit Mode
2. Click on the logo
3. Upload your logo (PNG with transparent background works best)

Troubleshooting

Image Not Changing?

• Make sure you're clicking on the actual image
• Try refreshing the preview
• Check if the file format is supported

Image Looks Stretched?

• The new image has different proportions
• Try an image with similar aspect ratio
• Ask AI to adjust the image container

Image Too Large?

• Compress the image before uploading
• Use an image optimizer tool
• Reduce dimensions to recommended sizes

Transparent Background Not Showing?

• Make sure you're uploading a PNG file
• Check if the original image supported transparency

After Changing Images

After updating images:

1. Check the preview - Make sure it looks good
2. Test mobile view - Images should work on all devices
3. Verify quality - Ensure images aren't blurry
4. Publish when ready - Update your live site