Web Performance
How to Compress Images for a Website
Images are typically the heaviest assets on a web page. A single uncompressed photo can outweigh all your HTML, CSS, and JavaScript combined. Here's how to compress them properly — including target file sizes, format decisions, and the impact on SEO.
Target file sizes for web images
Format guide: JPEG vs PNG vs WebP
Images and Core Web Vitals (SEO)
Google's Core Web Vitals are official ranking signals. The most image-sensitive metric is LCP (Largest Contentful Paint) — the time it takes for the largest visible element (usually an image) to render. Google targets LCP under 2.5 seconds.
Every kilobyte of image data adds time. A 2 MB hero image on mobile data (typically 10 Mbps) takes ~1.6 seconds just to download — before any rendering happens. Compress that image to 150 KB and it downloads in ~0.12 seconds. That improvement directly shows up in your LCP score.
Practical rules: compress everything, use modern formats where supported, set explicit width and height on every img element (prevents layout shift), and never lazy-load above-the-fold images.
Compress your website images now
Set the quality, see the exact file size savings, download. Free, private, no account.
Use it →Frequently asked questions
What file size should images be for a website?
As a general rule: hero images under 200 KB, product photos under 100 KB, thumbnails and icons under 30 KB. These aren't strict limits — context matters. A full-bleed background image on a fast network can be 300 KB without issue. A blog post with 10 uncompressed photos at 3 MB each will load slowly on any connection.
What image format is best for websites?
JPEG for photographs and images with many colours. PNG for graphics, logos, and anything with transparency. WebP for both — it's 25–35% smaller than equivalent JPEG or PNG and is supported by all modern browsers. AVIF is even smaller than WebP but support is less universal. When in doubt, use JPEG for photos and PNG for graphics with transparency.
How do large images affect website speed?
Images are typically the largest assets on a web page by file size. Uncompressed images directly increase page load time — a 5 MB hero image on mobile data can add 3–8 seconds of load time. Google's Core Web Vitals (LCP — Largest Contentful Paint) is directly impacted by how quickly the largest visible image loads. Slow LCP hurts both user experience and search rankings.
Does image compression affect SEO?
Yes, indirectly. Google uses page speed as a ranking signal. Slow pages — often caused by large images — score lower on Core Web Vitals. LCP (Largest Contentful Paint) and FID (First Input Delay) are official ranking factors. Compressing images improves LCP scores, which can improve rankings, especially for mobile search.
Should I use lazy loading for website images?
Yes for images below the fold (not visible on initial page load). Lazy loading defers image loading until the user scrolls near them, reducing initial page weight. In HTML, add loading='lazy' to any img tag that isn't immediately visible. Never lazy-load your hero image or the first visible image — lazy-loading visible images actually hurts LCP.
What is the best free tool to compress images for a website?
For browser-based compression with full quality control, an online image compressor lets you see the exact before/after file sizes before downloading. For automated build-pipeline compression, tools like sharp (Node.js) are commonly used. Squoosh (Google) is a powerful free tool with advanced format options including WebP and AVIF encoding.