What's the best image format for website speed?

WebP, in most cases. It typically produces the smallest file for a given visual quality among the widely supported formats, which directly reduces page load time.

What image size should I use on a website?

Match the file's pixel dimensions to the largest size it will actually be displayed at, accounting for retina displays (roughly 1.5-2x the CSS display size), rather than uploading camera-resolution originals.

Do images really affect page speed that much?

Yes — images are typically the largest single contributor to total page weight on most websites, and oversized or unoptimized images are one of the most common causes of poor Core Web Vitals scores.

Best image format and size for a fast website

Images are usually the biggest thing on the page — here's how to fix that

On most websites, images make up the majority of the total page weight — often more than all the code, fonts, and scripts combined. If a site feels slow, oversized or badly-formatted images are the first place to look, and usually the easiest to fix.

Format: WebP first, JPG as the fallback

WebP is the best default for web images today — it typically produces the smallest file for a given visual quality of any widely supported format, which translates directly into faster page loads. JPG remains a safe universal fallback if you need to support very old browsers or tooling. PNG should generally be reserved for graphics that need transparency or flat colors (logos, icons, UI elements), not photos, since it produces much larger files for photographic content. See JPG vs PNG vs WebP for the full comparison.

Dimensions: match the actual display size

This is the single most common mistake: uploading a camera- or phone-resolution photo (often 3000-4000px wide) when the page only ever displays it at 800px. The extra resolution is invisible to visitors but fully downloaded by every one of them. A good rule of thumb is to size images at roughly 1.5-2x their largest CSS display size, to account for high-density (retina) screens, and no larger.

Compression: aim for "visually identical," not "smallest possible"

Pushing quality settings as low as possible technically produces the smallest file, but once compression artifacts become visible, it starts working against the site — a blurry or blocky image looks worse than a slightly larger, clean one. A quality setting around 75-85% for JPG/WebP is usually the point where file size has dropped substantially with no visible difference. If you have a specific page-weight budget, a target file size mode removes the guesswork. For the full breakdown of what actually shrinks a file, see how to reduce image file size without losing quality.

Why this matters beyond "feeling" fast

Page speed affects more than user experience — Google's Core Web Vitals, which factor into search ranking, are directly influenced by how quickly the largest visible content on a page loads (the "Largest Contentful Paint" metric), and that's very often an image. Optimizing images isn't just a nice-to-have; on image-heavy pages it's frequently the single biggest lever for improving a site's actual search performance.

Got a batch of images to optimize for a site? Quantize resizes, converts to WebP or JPG, and compresses to a target size — all in your browser, all at once.