Image basics for your website

Images have a big impact on how professional your website looks — and on how fast it loads. But before you drag an image onto a page, there are a few basics worth understanding.

This guide covers what you need to know before you start adding images.

The four things that matter about any image

1. Quality

An image should be sharp and professional at the size it appears on screen. Blurry, pixelated, or stretched images undermine trust immediately. If you're uploading a photo, it should be taken at a decent resolution — a recent smartphone camera is usually good enough.

2. Dimensions (pixel size)

Every image on your site has a specific space to fill. A hero banner is much wider than a team member photo. If you upload an image that's too small for the space, it will look blurry when it stretches to fill the area.

Uploading a much larger image than needed wastes storage and can slow the page down. See Image sizes for the web for specific guidance.

3. File format

Different image types suit different purposes. Using the wrong format makes images either bloated (slow to load) or lower quality than they need to be. See Image formats explained for the full guide.

4. Legal clearance

You cannot use an image you find on Google without checking its license first. Under US law, copyright protects an original image as soon as its creator fixes it — taking the photo is enough, and they don't have to register it for the protection to apply. You usually need permission (a license) to use it, unless it's in the public domain. See Where to get images legally and Stock photos & licensing for safe sources.

What makes an image "web-ready"

A web-ready image:

• Is in an appropriate format (JPG, WebP, PNG, or SVG)
• Is sized to roughly the dimensions needed — not much larger
• Is compressed so the file size is as small as possible without looking worse
• Has a descriptive alt text set, for accessibility

Why image file size matters

Each image on your page is a separate file your visitor's browser has to download. A large uncompressed image might be 8 MB. The same image, resized and compressed for the web, might be 150 KB — about 50 times smaller, with little or no visible difference at the size it's shown.

Images are often the heaviest and most common files on a web page, so optimizing them is one of the biggest improvements you can make to how fast your pages load. See Images & page speed for more.

Images you should avoid

• Stretched or pixelated images
• Images with watermarks (usually a sign you haven't licensed them)
• Images that look generic or stock-photo obvious — real photos of you and your team are usually a better choice
• Images with text burned in (the text won't resize well on small screens, and visitors can't adjust its size or colors the way they can with real text)
• Animated GIFs used purely for decoration — these are often very large files

Common questions

Can I use images I find on Google?

No — not without checking the license. Google Image Search indexes images from all over the web, most of which are protected by copyright. Putting someone else's image on your site without permission is generally copyright infringement, even if you found it easily online. See Where to get images legally for safe alternatives.

Do I need to compress every image before uploading?

It's a very good habit, yes. Your website platform may do some compression automatically, but pre-compressing images before upload gives you much more control. See How to compress images for a simple, free way to do it.

What's the difference between a photo and a graphic?

Photos are raster images — they're made of pixels (JPG, PNG, WebP). Graphics like logos and icons are often vector images (SVG) — they're drawn mathematically and can scale to any size without losing quality. See Image formats explained for more.

Related guides

• Image formats explained
• Image sizes for the web
• How to compress images
• Where to get images legally
• Alt text explained
• Images & page speed