Image basics for your website
What you need to know before adding any image to your website, including quality, size, and legal considerations.
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.
Quick summary
Use images that are high quality, the right size, the right format, and legally cleared for use. Poor-quality or incorrectly sized images slow your site and look unprofessional. Always make sure you have the right to use any image you add.
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 — most modern smartphone cameras are more than adequate.
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 slows 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 any image you find on Google. Every image is protected by copyright unless the creator has specifically made it free to use. 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 properly compressed for the web might be 150 KB — about 50 times smaller, with no visible quality difference to most viewers.
Page speed directly affects how many visitors stay on your site. Large images are one of the most common reasons sites load slowly. See Images & page speed for more.
Images you should avoid
- Stretched or pixelated images
- Images with watermarks (this means you don't have a license for them)
- Images that look generic or stock-photo obvious — real photos of you and your team almost always perform better
- Images with text burned in (the text won't resize well on small screens)
- Animated GIFs used purely for decoration — these are very heavy files
Common questions
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
Need a hand?
Finding your brand voice
How to define how your brand sounds in writing — and how to keep that voice consistent across your website and all communications.
Image formats explained (JPG, PNG, WebP, SVG)
A plain-English guide to the most common image formats and which one to use for each situation on your website.