Images are the most common cause of slow-loading websites — and slow websites rank lower. Beyond speed, unoptimised images miss ranking opportunities in Google Image Search and provide weaker relevance signals to Google. Image SEO is one of the highest-leverage on-page improvements most sites can make.

File formats: WebP first

The right format is the first decision, and in 2026 it's straightforward: use WebP for almost everything.

  • WebP: the recommended default. 25–35% smaller than JPEG at equivalent visual quality, supports transparency, supported by all modern browsers. Use for photos, illustrations, UI graphics.
  • AVIF: even better compression than WebP (often 50% smaller than JPEG), but with slightly more complex encoding and wider variation in browser rendering. Worth using for photo-heavy sites willing to add the complexity.
  • JPEG: use when WebP isn't possible (some older CMS configurations). Not ideal for new implementations but still better than PNG for photographic images.
  • PNG: only when transparency is genuinely required and WebP isn't available. PNG files are larger than WebP with transparency. Never use PNG for photographs.
  • SVG: for logos, icons, and illustrations with simple geometry. SVG is infinitely scalable, typically tiny in file size, and looks sharp at any resolution. Always use SVG for logos.
  • GIF: avoid. For animations, use MP4 or WebM video — typically 80–95% smaller than an equivalent GIF, with better quality.

Most image editors (Photoshop, Affinity Photo, GIMP) and CMS platforms (WordPress with Imagify, ShortPixel, or similar) can convert to WebP automatically. There's rarely a reason to upload JPEGs or PNGs to a modern website.

Compression and file size

Even WebP images need compression. An uncompressed WebP from a camera or design tool can still be several megabytes — far too large for a web page.

Target file sizes by image type:

  • Hero images (full-width, above fold): under 200KB
  • Content images (in-article, product photos): under 100KB
  • Thumbnails and small images: under 30KB
  • Icons: under 5KB (use SVG where possible)

Use lossy compression for photographs (some imperceptible quality reduction for significant size savings) and lossless compression for graphics with solid colours, text, or sharp edges. A quality setting of 75–85% for WebP photos is typically the sweet spot — visually indistinguishable from 100% but substantially smaller.

Run all images through an optimiser before uploading. Free tools: Squoosh (browser-based, from Google), ImageOptim (Mac desktop), TinyPNG/TinyJPG (web-based). WordPress plugins: ShortPixel, Imagify, Smush. These can also batch-optimise existing image libraries.

Image dimensions and srcset

An image displayed at 800px wide should be no more than 800px wide in the file (or 1600px for retina screens). Serving a 3000px image in an 800px container wastes bandwidth — the browser downloads all 3000px and then scales it down. The extra pixels are wasted data.

For responsive sites, use the srcset attribute to serve different sizes to different devices:

<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  alt="Description of the hero image"
  width="800"
  height="500"
>

The browser uses this information to download only the size appropriate for its screen. A mobile phone downloads the 400w version; a desktop downloads the 1600w version. This can reduce image data transferred to mobile users by 70–80%.

WordPress handles this automatically with its built-in image size generation. Most modern website builders do too. For static sites or custom builds, generate multiple sizes during your build process.

Alt text: the SEO and accessibility essential

Alt text is HTML attribute on <img> tags that describes the image:

<img src="hero.webp" alt="Web designer reviewing a wireframe on a large monitor">

It serves two functions: accessibility (screen readers read the alt text to visually impaired users) and SEO (Google reads alt text to understand what an image shows, since it can't see images the way humans do).

Good alt text:

  • Describes what the image actually shows, specifically and concisely
  • Is written for a human who can't see the image — what would they need to know?
  • Includes the page's target keyword where it fits naturally — don't force it, but don't avoid it either
  • Is typically 5–15 words — enough to be descriptive, short enough to be useful

Bad alt text:

  • Empty: alt="" on a content image is an accessibility failure and misses an SEO opportunity. (Empty alt on purely decorative images is correct — it tells screen readers to skip the image.)
  • Generic: alt="image", alt="photo" — tells Google and screen readers nothing.
  • Keyword-stuffed: alt="web design web designer website design Iceland web design services" is spam and may be penalised.
  • File name used verbatim: alt="IMG_4821.jpg" — this is what gets auto-populated when no alt text is added in some CMSs. Always replace.

For decorative images (backgrounds, dividers, purely aesthetic elements): use empty alt text alt="". This tells screen readers the image is decorative and can be skipped, which is the correct accessibility behaviour.

File names

File names are a minor but real SEO signal. Google reads image file names as part of its understanding of what an image contains.

  • Descriptive: web-design-iceland-portfolio.webp tells Google more than IMG_4821.webp
  • Use hyphens as word separators: not underscores, not spaces (spaces become %20 in URLs). web-design-iceland.webp not web_design_iceland.webp or web design iceland.webp
  • Keep them concise: 3–5 words. Not a keyword-stuffed sentence.
  • Include the primary topic: if an image is on a page about web design in Iceland, web-design-iceland.webp is better than design.webp

Renaming existing images and updating all references is more work than naming them correctly from the start. Establish a naming convention and apply it consistently on upload.

Lazy loading

Lazy loading defers the loading of images that are below the fold (not visible in the initial viewport) until the user scrolls towards them. This improves initial page load time — the browser only downloads the images it immediately needs to render the visible portion of the page.

<img src="below-fold-image.webp" alt="Description" loading="lazy" width="800" height="600">

The loading="lazy" attribute is supported natively by all modern browsers and requires no JavaScript. Add it to all images except those in the initial viewport (above the fold).

Don't lazy-load above-the-fold images. Adding loading="lazy" to your hero image or LCP element delays its loading and worsens your LCP score. Only lazy-load images that are genuinely below the fold on initial page load.

Width and height attributes (prevent layout shift)

Always include explicit width and height attributes on image elements:

<img src="photo.webp" alt="Description" width="800" height="600">

These tell the browser how much space to reserve for the image before it loads. Without them, the browser renders the page, the image loads, the layout shifts — CLS (Cumulative Layout Shift) score worsens, which hurts Core Web Vitals and therefore rankings.

The width and height attributes don't control the display size (CSS controls that) — they just give the browser the image's aspect ratio so it can reserve the right amount of space. Setting them doesn't mean the image will always display at exactly 800x600; it means the browser knows the 4:3 ratio before the image loads.

Google Image Search can drive meaningful traffic for businesses with visual products, portfolio work, or content that lends itself to imagery. To rank in image search:

  • Descriptive alt text (the most important factor)
  • Descriptive file names
  • Image surrounded by relevant text on the page
  • Page title and URL relevant to the image subject
  • Image properly optimised (small file size, correct dimensions)
  • Page with the image has strong overall SEO signals (authority, relevance)

For businesses with visual content — architects, photographers, designers, restaurants, product companies — submitting an image sitemap in Google Search Console can help Google discover and index images faster. A standard XML sitemap can include image data, or you can submit a dedicated image sitemap.

Tools for image optimisation

  • Squoosh (squoosh.app): free browser-based image compression by Google. Supports WebP, AVIF, and all major formats. Good for one-off optimisation.
  • ImageOptim (Mac): free desktop app for batch image optimisation. Lossless compression by default, with lossy options.
  • TinyPNG / TinyJPG (tinypng.com): free web-based compression. Supports PNG, JPEG, and WebP.
  • Cloudinary: cloud-based image CDN that serves images in the optimal format for each browser (automatically serves AVIF to browsers that support it, WebP to others) and at the correct size for each device. Powerful but adds complexity.
  • WordPress plugins: ShortPixel, Imagify, Smush — automatically optimise and convert to WebP on upload. ShortPixel offers 100 free optimisations per month.
  • PageSpeed Insights: run your pages through this to identify which specific images are causing performance problems and by how much.

See the full page speed guide for image optimisation in the context of overall Core Web Vitals improvements, and the on-page SEO guide for all the elements that work together with images.