Images make your website visually appealing and engaging. Learn how to upload images, optimize them for fast loading, and even generate custom images using AI.

The simplest way—use your existing photos and graphics.

How to upload:

Example prompt:

"Add a hero image to the homepage. I'll upload my own photo of our team."

Link to images hosted elsewhere (your server, image CDN, etc.)

Example prompt:

"Add a logo at the top left corner using this URL: https://mysite.com/logo.png"

Good for: Images already hosted, logos from brand assets, product images from your inventory system.

Create custom images using AI image generation.

Example prompt:

"Generate an AI image for the hero section: A modern office space with people collaborating, bright and professional, blue and white tones"

See the AI Art Generation guide for details.

Optimized images load faster and save bandwidth.

Before uploading, use these free tools:

Example workflow:

Prompt template:

"Add a hero section to the homepage with a [description] image on the [left/right/background]. The image should be [dimensions] and [style]."

Examples:

Prompt template:

"Create an image gallery on [page] with [number] images in a [layout]. Images should be [size] with [spacing]."

Example:

"Create a portfolio gallery on /work page with 12 images in a 3-column grid. Images should be square (400x400px) with 16px spacing. Add lightbox popup when clicked."

Prompt template:

"Display product image on /products/[id] page. Main image should be [size], with [number] thumbnail images below. Add zoom on hover."

Example:

"Show product image on the product detail page. Main image 600x600px on the left, 4 thumbnail images below for different angles. Add zoom effect when hovering over main image."

Make sure images look good on all devices.

Automatic responsive images:

"Make all images responsive - they should scale down on mobile devices and maintain aspect ratio."

Specific breakpoints:

"For the hero image: show 1920x1080px on desktop, 1024x768px on tablet, 750x500px on mobile."

Different images per device:

"Use hero-desktop.jpg on screens wider than 768px, and hero-mobile.jpg on smaller screens."

Lazy loading defers image loading until they're about to be viewed.

Enable lazy loading:

"Add lazy loading to all images on the /blog page. Images should only load as user scrolls down."

Benefits:

Alt text helps visually impaired users and improves SEO.

Good alt text:

Examples:

Add alt text with prompts:

"Add alt text to all product images: describe the product, color, and key features."

Add background image:

"Set a background image for the hero section using this URL: https://mysite.com/hero-bg.jpg. Add a dark overlay so the white text is readable."

Parallax effect:

"Add a parallax scrolling effect to the hero background image. Image should scroll slower than the page content."

Pattern backgrounds:

"Add a subtle pattern background to the features section. Use a light geometric pattern that doesn't distract from content."

Placeholders are useful during development.

Common placeholder services:

Using placeholders:

"Add 6 product cards with placeholder images (400x400px). I'll replace them with real product photos later."

Add fallback images:

"If a product image fails to load, show a default 'no image available' placeholder instead of a broken image icon."

Debug prompt:

"The product images on /products aren't loading. URLs are correct, but showing broken image icon. Check if the image paths are correct."

Generate custom images when you don't have photos.

Include these elements:

Example:

"Generate a hero image: Modern coworking space with diverse team collaborating around laptop, bright natural lighting through large windows, professional but friendly atmosphere, blue and orange accent colors, landscape orientation, photorealistic style."

Prompt:

"Create a product page with main image (600x600px) on the left. Below the main image, show 5 thumbnail images in a horizontal row. When clicking a thumbnail, it becomes the main image. Add zoom on hover for the main image. All images should have alt text describing the product."

Prompt:

"Add a team section to /about page. Display 8 team member photos in a 4-column grid (desktop) and 2-column on mobile. Each photo should be circular, 200x200px, with name and title below. Photos are placeholders for now—I'll upload real team photos."

Prompt:

"Add a featured image to each blog post. Image should be 1200x630px (good for social sharing), display at the top of the post above the title. Add lazy loading. Alt text should be the blog post title."

Images are likely too large. Compress them to under 200KB for hero images, 100KB for regular images. Use WebP format and enable lazy loading. Check file sizes—anything over 500KB is too big for web.

Provide 2x resolution images for retina displays. For a 400x400px image, upload an 800x800px version and scale it down with CSS. Or use SVG for logos and icons—they scale perfectly.

No! Only use images you have rights to: your own photos, purchased stock photos, free stock from sites like Unsplash/Pexels, or AI-generated images. Using random images from Google can result in copyright violations.

Tell the AI: 'Add my logo as a watermark in the bottom-right corner of all product images. Logo should be semi-transparent (30% opacity).' Upload your logo first.

WebP for most photos (best compression). SVG for logos/icons (scalable). PNG for graphics with transparency. JPG is acceptable but larger than WebP. Avoid GIF for photos.

Keep it reasonable. A homepage might have 5-10 images. A blog post 2-5 images. Product page 5-8 images. More than 20 images on one page will hurt performance. Use lazy loading if you must have many images.

See also: AI Art Generation | Performance Optimization

Need help? Contact Support