How to optimize images for a website
Images are usually the heaviest part of a web page. Optimizing them is the quickest way to load faster, rank better and keep visitors.
Why it matters
Search engines measure loading speed through Core Web Vitals. The Largest Contentful Paint, often a hero image, should appear within 2.5 seconds. Heavy images slow it down, especially on mobile networks, and visitors leave slow pages.
1. Serve the right dimensions
Never upload a 4000 px photo to display it at 800 px. Resize to about twice the displayed width to stay sharp on high-density screens: 1600 px for a full-width content image, 800 px for a thumbnail. Batch processing resizes a whole folder in one pass.
2. Use WebP or AVIF
WebP is supported by every current browser and saves 25 to 35% compared to JPG; AVIF saves even more. Convert with Convert to WebP or Convert to AVIF. With the HTML picture element, you can serve AVIF with a JPG fallback.
3. Compress sensibly
Quality 75 to 82% suits most web photos. Check the result with the before/after comparison and keep a higher quality for product images that visitors zoom into.
4. Help the browser
- Always set
widthandheightattributes so the page does not jump while images load. - Add
loading="lazy"to images below the fold, but not to the main image at the top. - Use
srcsetto offer several sizes and let the browser pick the right one. - Write meaningful
alttext: it helps accessibility and image search.
5. Clean before publishing
Remove EXIF data from photos you publish: it adds weight and may reveal locations. Every tool on this site does it automatically.