How to Optimize Images for the Web: A 7-Step Workflow for Faster Pages (Size, Format, Compression, Loading)

To optimize images for the web, export each image no wider than about twice the width it displays at, convert photos to AVIF or WebP (SVG for logos and icons), compress until just before you can see a difference, and serve several sizes with srcset so phones download small files. Then load them in the right order: give the main above-the-fold image fetchpriority="high", lazy-load everything below the fold, and set width and height on every image so the layout doesn't jump.

Images are still the heaviest part of most pages, so this is usually the quickest speed win available. Below is the seven-step workflow, a calculator for the right export width, and how to automate it on WordPress, Shopify and other platforms.

#Why image optimization still matters

Images are the largest share of bytes on a typical page. The HTTP Archive's 2025 Web Almanac measured millions of sites in July 2025:

The SEO link runs through page experience. Google says good Core Web Vitals align with what its core ranking systems seek to reward, and on many content pages the Largest Contentful Paint (LCP) element is an image: the hero, the featured image or the first product photo. A 4 MB hero image is the classic reason a page fails LCP on mobile.

Speed won't make a weak page rank, but a slow one loses visitors before they read a word. For how much speed matters to AI search engines, see does PageSpeed affect AI SEO.

#Step 1: Measure before you change anything

Run the page through PageSpeed Insights. Two parts of the report matter for images:

• Largest Contentful Paint element: under the diagnostics, PageSpeed Insights names the element that counts as LCP. If it's an image, that image gets special treatment in Step 6.
• Improve image delivery: since Lighthouse 13 (October 2025), this single insight replaces the older "next-gen formats", "efficient encoding" and "properly size images" audits. It lists each oversized image and the estimated saving in KB.

Write down the LCP time and total image weight so you can compare afterwards.

#Step 2: Export at the right dimensions

Uploading a 4,000-pixel photo into an 800-pixel column is the most common image mistake, and the most expensive. The browser downloads every pixel, then throws most of them away.

The rule: export at the display width multiplied by the pixel density you want to support. Most phones and many laptops have 2× screens, so 2× the display width is the usual ceiling. Above that, file size grows much faster than visible sharpness.

For full-width hero images, use the widest layout your site allows (for example 1,440 px) as the display width, and let srcset (Step 5) send smaller versions to smaller screens.

#Step 3: Pick the right format

The gap between formats is real. In an independent comparison of about 600 images, AVIF cut file size by a median 50.3% against JPEG at the same visual quality and WebP by 31.5%. Google Search supports both formats for indexing, along with JPEG, PNG, GIF, BMP and SVG, according to its image SEO guidelines.

Use AVIF where your platform or CDN can produce it, WebP everywhere else, and keep a JPEG or PNG fallback in a <picture> element if you serve files yourself.

#Step 4: Compress

Compression removes data you can't see. Two kinds:

• Lossy (JPEG, lossy WebP, AVIF): permanently discards detail. The quality slider decides how much.
• Lossless (PNG, lossless WebP): stores the same pixels more efficiently. Smaller savings, zero quality loss.

There's no universal quality number, because every image compresses differently. A practical method: start around 75 on the quality slider, compare at 100% zoom, and lower it until you can see artifacts on faces, text or gradients, then step back up. Tools for the job:

• Squoosh: Google's free browser app with a side-by-side slider and AVIF, WebP and MozJPEG encoders. Best for learning what quality settings do.
• TinyPNG / TinyJPG: drag and drop, lossy compression for PNG, JPEG and WebP, with a free tier.
• ImageOptim (Mac): free, strips metadata and runs several optimizers on a folder at once.
• sharp or ImageMagick: command-line and build-pipeline tools for developers processing images automatically.

Strip camera metadata (EXIF) while you're at it. It adds weight and can include the GPS location where a photo was taken.

#Step 5: Serve responsive images with srcset

One file can't be right for a 375-pixel phone and a 1,440-pixel desktop. srcset gives the browser a list of sizes and lets it pick:

<img
  src="/images/sourdough-boule-800.jpg"
  srcset="/images/sourdough-boule-400.avif 400w,
          /images/sourdough-boule-800.avif 800w,
          /images/sourdough-boule-1600.avif 1600w"
  sizes="(max-width: 840px) 100vw, 800px"
  width="1600" height="1067"
  alt="Sourdough boule cut in half showing an open crumb">

• srcset lists the files and their real widths (400w means 400 pixels wide).
• sizes tells the browser how wide the image will display: full viewport width on screens up to 840 px, 800 px otherwise.
• src is the fallback. Google's guidelines ask you to always include it, because some browsers and crawlers don't read srcset.

To serve AVIF with a fallback for older browsers, wrap it in <picture> with a <source type="image/avif"> and a plain <img> inside. Most CMSs generate srcset for you (more in Step 7).

#Step 6: Load images in the right order

How an image loads matters as much as how heavy it is.

Embedded videos are often heavier than any image on the page. If you embed YouTube, see our guide on whether embedding YouTube videos helps SEO for the click-to-load approach.

#Step 7: Automate it on your platform

Doing all this by hand for every upload doesn't last. What the main platforms handle for you:

• WordPress creates several resized copies of each upload and outputs srcset automatically. It adds loading="lazy" to images by default and, since version 6.3, adds fetchpriority="high" to the image it judges most likely to be the LCP and skips lazy-loading it. WordPress 6.5 accepts AVIF uploads if your server's image library supports it (check Tools → Site Health → Info → Media Handling). Plugins such as ShortPixel, Imagify or EWWW convert and compress existing libraries in bulk.
• Shopify, Wix, Squarespace and Webflow resize and serve images through their own CDNs. Upload a sensibly sized original (rarely more than about 2,500 px wide), and check each platform's image settings for format conversion.
• Custom sites and headless setups: use an image CDN or your framework's image component (Next.js next/image, Astro <Image>, Nuxt Image), which produce resized, converted and lazy-loaded images from one source file.

Name files descriptively before you upload them; our guide on how to name images for SEO has the formula. If you publish with Outrank, every article ships with its images already generated and placed, and the integrations push them to WordPress, Shopify, Webflow, Wix and other CMSs together with the text.

#Quick reference: optimizing an image, start to finish

1. Find the display width in your layout.
2. Resize to that width × 2 (calculator above).
3. Convert to AVIF or WebP; SVG for logos and icons.
4. Compress, checking at 100% zoom.
5. Name the file descriptively and add alt text.
6. Serve sizes with srcset and sizes.
7. fetchpriority="high" on the LCP image, loading="lazy" on the rest, width and height on all.
8. Re-run PageSpeed Insights and compare LCP and image weight.

For the rest of the on-page work, see our step-by-step guide to optimizing blog posts for SEO, and for a site-wide review, the technical SEO audit checklist.

#FAQ

#What is the best image format for websites?

AVIF for the smallest photos where your platform supports it, WebP as the safe default, and SVG for logos and icons. In an independent test of about 600 images, AVIF was a median 50.3% smaller than JPEG at the same quality and WebP 31.5% smaller. Keep JPEG or PNG only as a fallback.

#What size should images be for a website?

Export each image at the width it displays multiplied by two, to stay sharp on high-density screens, and never larger than the original. An image shown 800 pixels wide needs a 1,600-pixel version at most, plus smaller versions in srcset for phones.

#How do I optimize an image without losing quality?

Resize it to the width you actually display, then use lossless compression (PNG optimizers or lossless WebP) or a lossy setting just above the point where you can see artifacts at 100% zoom. Resizing alone usually removes most of the file size without any visible change.

#Should I lazy-load all images?

No. Lazy-load images below the fold, but never the main image visible when the page opens. Lazy-loading the Largest Contentful Paint image delays it and hurts your LCP score.

#Does image optimization help SEO?

Indirectly. Faster images improve Largest Contentful Paint, part of the Core Web Vitals that Google says align with what its ranking systems reward, and they keep visitors from leaving before the page loads. Descriptive file names and alt text help the images themselves rank in Google Images.

#How do I optimize images in WordPress?

WordPress already resizes uploads, adds srcset, lazy-loads images and prioritises the likely LCP image (since 6.3). Upload images no wider than your layout needs, enable AVIF or WebP through your host or an optimization plugin, and compress your existing media library in bulk with a plugin such as ShortPixel, Imagify or EWWW.