Beginner5 min readShare
Was this chapter helpful?
Share
Everything you need to know about using images, graphics, and video on your website — explained in plain English.
Images are usually the biggest files on any website. If they are too large or in the wrong format, your site will load slowly — and visitors will leave before they even see your content.
The good news? Your AI tool can handle most of this for you. You just need to know what to ask for.
Tell your AI tool
"Optimize all images on my site for fast loading. Use modern formats like WebP, make sure images are the right size for where they appear, and add descriptions for accessibility."
| Format | Best For | Transparency | Animation | File Size | Verdict |
|---|---|---|---|---|---|
| WebP | Almost everything on the web | Yes | Yes | Smallest | Recommended |
| SVG | Icons, logos, illustrations | Yes | CSS/JS | Tiny (vector) | Best for icons |
| PNG | Screenshots, images needing transparency | Yes | No | Large | Use WebP instead |
| JPEG/JPG | Photos, complex images | No | No | Medium | Use WebP instead |
| AVIF | Next-gen photos (newer format) | Yes | Yes | Smallest | Best quality/size |
| GIF | Simple animations, memes | Limited | Yes | Very large | Use video instead |
Not sure which format to use? WebP works for almost everything. Ask your AI tool to convert your images to WebP.
Think of image optimization like packing a suitcase. You want to fit everything you need without making it too heavy to carry. Image optimization makes your pictures look great while keeping the file size small so your site loads fast.
Most website builders (like Next.js, which this site uses) have built-in tools that do this automatically. They can:
Convert to modern formats
Automatically switch your images to WebP or AVIF — formats that look the same but are much smaller.
Serve different sizes for different screens
Send a smaller image to someone on a phone, and a bigger one to someone on a desktop monitor.
Load images only when you scroll to them
Instead of loading every image at once, your site waits until the visitor actually scrolls down to see them. This is called "lazy loading."
Show a blurry preview first
While the real image loads, visitors see a blurred version so the page doesn't feel empty.
Tell your AI tool
"Set up automatic image optimization on my site. I want images to load fast, use modern formats, and show a blurry preview while loading."
An aspect ratio is the shape of an image — how wide it is compared to how tall it is. Here are the most common ones and when to use them:
1:1
Avatars, thumbnails, Instagram posts
4:3
Cards, blog thumbnails
16:9
Videos, hero images, social sharing images
3:2
Photos, product images
21:9
Ultra-wide banners, cinematic headers
Tell your AI tool
"Make all my blog thumbnail images use a 16:9 aspect ratio and keep them consistent across the site."
Here is what to check (or ask your AI tool to check) before your site goes live:
Use WebP or AVIF format instead of PNG or JPEG — they look the same but are 50-80% smaller
Resize images to fit where they actually appear (don't use a massive photo for a tiny thumbnail)
Make sure images don't cause the page to jump around while loading
Set images below the fold to load only when visitors scroll to them
Load your main hero image right away so visitors see it instantly
Compress images before uploading — free tools like TinyPNG or Squoosh can shrink them without losing quality
Provide different image sizes for different screens (phones get smaller images, desktops get bigger ones)
Always add a description to every image so screen readers can describe it to visually impaired visitors
Use SVG files for icons and logos — they stay sharp at any size and are tiny
Consider using an image hosting service like Cloudinary or Imgix that optimizes images for you automatically
Tell your AI tool
"Audit all the images on my site. Check that they are compressed, using modern formats, have descriptions for accessibility, and aren't larger than they need to be."
There are two main ways images appear on websites. Here is how to know which to ask your AI tool for:
The image IS the content — it matters to the page and you want Google to find it.
The image is just for looks — it decorates the page but isn't the main content.
Tell your AI tool
"I want a full-width hero section with a background photo and white text on top. Make sure the text is readable."
The easiest option. Just paste an embed link. YouTube handles all the heavy lifting — streaming, quality, and bandwidth.
Tutorials, demos, marketing videosA video file hosted on your own site. You have full control, but you need to handle hosting and file size yourself.
Background videos, short clipsLightweight animations (usually from designers) that are super smooth and tiny. Great for adding polish.
Micro-animations, onboarding, loading spinnersA short, silent video that plays automatically in the background of a section. Adds movement without being distracting.
Hero sections, ambient backgroundsGIFs are huge files. Converting them to video format gives you the same look at 90% smaller size.
Anywhere you'd use a GIFServices like Mux or Cloudflare Stream that handle video hosting, streaming quality, and analytics for you.
Video-heavy apps, online coursesTell your AI tool
"Embed a YouTube video on my page that is responsive (fits any screen size) and doesn't slow down the page load."
