Your website is often the first place clients, editors and audiences see your work. Images that are too large slow the site down; images that are too small or overcompressed look soft and cheap; missing descriptions make them invisible to search engines and people using screen readers. This lesson explains how to prepare photographs specifically for websites: choosing dimensions, preparing versions for different screens, picking formats, naming files and writing useful alternative text.
What web preparation involves
Preparing images for websites means exporting them at the right dimensions, quality, format and color space, with helpful names and descriptions. Basic export settings were covered in export settings for web and social media and color in color management for web and digital delivery. This lesson adds website-specific decisions; compression and speed are covered in image compression and web performance.
Choosing dimensions
- Match the layout: find the largest width each image is displayed at on your site (for example, a full-width banner or a gallery column).
- Allow for high-density screens: many phones and laptops have screens with about twice as many pixels, so images may need up to about twice the displayed width to look crisp.
- Avoid uploading huge originals: a full camera file wastes bandwidth and slows pages.
| Use | Displayed width | Common export width |
|---|---|---|
| Full-width hero image | About 1400–1600 px | About 2000–2560 px |
| Gallery or portfolio image | About 800–1200 px | About 1600–2400 px |
| Blog image in a text column | About 700–900 px | About 1400–1800 px |
| Thumbnails | About 200–400 px | About 400–800 px |
Responsive image versions
Phones should not download desktop-sized images. Modern websites can offer several versions of the same image at different widths, and the browser chooses the most suitable one. Many website builders and content management systems create these versions automatically when you upload a single, well-prepared image.
Tip:Upload one high-quality image at the largest size your site needs, and let a good platform generate smaller versions. If you build sites yourself, ask your developer to use responsive images.
Formats
| Format | Strengths | Notes |
|---|---|---|
| JPEG | Universal, reliable | Good default for photographs |
| WebP | Smaller files than JPEG at similar quality; widely supported | Common modern choice |
| AVIF | Often even smaller files; good quality | Widely supported in modern browsers; some platforms still convert it |
| PNG | Lossless, supports transparency | Usually too large for photographs; use for graphics and cut-outs |
Many platforms convert images to modern formats automatically. Formats were introduced in RAW versus JPEG and other image formats.
File names and alt text
- Descriptive file names: use words such as city-market-spice-seller.jpg instead of DSC_1234.jpg; they help search engines and organisation.
- Alt text (alternative text): a short written description of the image, read by screen readers for people with visual impairments and used by search engines.
- Write alt text for meaning: describe what matters in context, such as "Spice seller weighing saffron at a market stall at dusk".
- Avoid keyword stuffing: write naturally; search optimisation is covered in photography SEO fundamentals.
Remember:Alt text is mainly about accessibility. Writing it for people first usually also helps search engines understand your images.
Metadata and privacy
Keep copyright and creator information in exported files, but remove GPS location for private places and children, as in folders, naming systems and metadata. Some website platforms strip metadata automatically; add a visible copyright notice on your site where appropriate, as in understanding copyright in photography.
Common mistakes
- Uploading full-resolution camera files: slow pages.
- Exporting at exactly the displayed width: soft images on high-density screens.
- Camera file names and empty alt text: lost accessibility and search value.
- Sharing location data accidentally: privacy risks.
How professionals prepare web images
Professional photographers create export presets for each website use, upload images at sensible maximum sizes, rely on platforms that generate responsive versions and modern formats, name files descriptively and write meaningful alt text. Portfolio page design and optimisation are covered in portfolio pages and image optimization.
Practical examples
A slow portfolio homepage
- Situation
- Your homepage hero image is a 9 MB camera file.
- What to do
- You export it at 2400 px wide as a high-quality WebP or JPEG in sRGB and upload that instead.
- Why it works
- The image is large enough for high-density screens without wasting bandwidth.
- Result
- The page loads much faster and the image still looks sharp.
Images invisible to search
- Situation
- Your travel blog images are named IMG_4521.jpg with no alt text.
- What to do
- You rename them descriptively and add natural alt text describing each scene.
- Why it works
- Descriptive names and alt text help screen-reader users and search engines.
- Result
- More accessible pages that are easier to find.
Key points
- Size web images for the layout, allowing up to about twice the displayed width for high-density screens.
- Use responsive versions so phones download smaller files.
- JPEG is universal; WebP and AVIF are smaller modern formats; PNG suits graphics and transparency.
- Use descriptive file names and meaningful alt text.
- Keep copyright information and remove sensitive location data.
Frequently asked questions
What size should photos be for a website?
Should I use WebP or JPEG?
What is alt text?
Why do my website images look blurry on phones?
Conclusion
Website images should be the right size for each layout and screen, in efficient formats, with descriptive names and meaningful alt text, while protecting privacy. Next, you will learn how to prepare images for social media.
Finished reading? Track your progress through Printing and publishing.