Key takeaways
- Use WebP or AVIF; they are often 25–35% smaller at similar quality.
- Serve responsive sizes with srcset and sizes.
- Set width and height to prevent layout shift (CLS).
- Write alt text that describes the image, not keywords.
Why images matter for SEO
Images are usually the heaviest part of a web page, so they strongly affect load speed and Core Web Vitals, particularly Largest Contentful Paint (LCP). They also open a second route to visibility through image search. Getting them wrong hurts both, and a few habits cover most of the gain. This is one of the highest-return tasks on any SEO checklist (see the technical SEO checklist).
1. Use modern formats
WebP and AVIF files are typically around 25–35% smaller than an equivalent JPEG or PNG at the same visual quality (results vary by image). WebP has broad browser support; AVIF often compresses even better. Compress to a quality level where you can’t see a difference, commonly 75–85 for photos, and never upload a camera original at full resolution.
2. Serve responsive sizes
Don’t send a 1600px image to a phone. Offer several widths and let the browser choose:
<img src="photo-800.webp" srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1200.webp 1200w" sizes="(min-width: 960px) 420px, 90vw" width="800" height="1000" alt="…">
3. Set width and height
Explicit width and height attributes let the browser reserve space before the image loads, which prevents content from jumping (layout shift) and improves your CLS score. Pair them with max-width: 100%; height: auto; in CSS so images stay responsive.
4. Load images at the right time
- Add
loading="lazy"to images below the fold. - Do not lazy-load your main hero image. Give it
fetchpriority="high"or a preload so LCP is fast. - Use
decoding="async"for non-critical images.
5. Alt text, file names and context
Write descriptive alt text for every meaningful image. It helps screen-reader users and gives search engines context, but it should describe the image, not stuff in keywords. Compare “person at desk” (vague) with “Sefat Khan working on a laptop in a home office” (specific). Use short, descriptive file names such as blue-denim-portrait.webp instead of IMG_4021.webp, keep decorative images with empty alt="", and place images near the text that explains them.
6. Image sitemap entries
You can list important images in your XML sitemap with captions and titles to help discovery. This portfolio applies all of the above: every photo ships as WebP in multiple sizes, with explicit dimensions and descriptive alt text, and the image entries in sitemap.xml include captions.
Quick audit
- Is every image under about 200 KB where possible?
- Does each have width, height and useful alt text?
- Is the hero image preloaded rather than lazy-loaded?
Frequently asked questions
Is WebP better than JPEG?
For most web photos, yes: smaller files at similar quality and wide browser support. Keep a fallback only if you must support very old browsers.
Does alt text help rankings?
It helps search engines understand an image and supports image search and accessibility. Write it for people first.
Should I lazy-load every image?
No. Lazy-load below-the-fold images only. Your main above-the-fold image should load immediately.
What image size should I upload?
Export at the largest size it will actually be displayed (allowing for high-density screens), then provide smaller variants with srcset.
Keep reading
A Practical Technical SEO Checklist for Small Static Sites
The short, concrete checklist I used on this portfolio: crawlability, structured data, performance and metadata, plus how to verify each step.
Read article →Why This Portfolio Is a Static Site (And What That Trade-off Buys)
Plain HTML, CSS and JavaScript on any ordinary web host: what it buys in speed, security and cost, what it costs in convenience, and when to choose something else.
Read article →What 600 Hours of Freelancing Training Actually Taught Me
The business lessons that matter most after a 600-hour course: scoping in writing, pricing for outcomes, proactive updates and a portfolio that proves your work.
Read article →