How to Optimize Images for Web

Why Image Optimization Is Important

Images often take up more than half of a webpage’s total size. When images are too large, they slow down your website and hurt user experience.

• Faster page loading on all devices
• Better SEO rankings and Core Web Vitals
• Lower data usage for mobile users
• Improved user engagement and trust
• Higher conversion rates for websites and stores

This guide is about the routine. If you want the detail on which format to reach for and why, the JPEG vs PNG vs WebP guide covers that side.

Step 1: Pick the Format

Decide the format before you compress, because it caps how small the file can get. A quick rule that covers most cases:

• A photograph, or a screenshot of one, goes to JPEG, or to WebP if your site can serve it.
• A logo, icon, diagram, or anything with a transparent edge goes to PNG, or again WebP for the smaller size.
• Flat vector art whose source file you have goes to SVG, which stays sharp at any size and is usually the smallest of all.

For the full picture, including AVIF and browser support, see the JPEG vs PNG vs WebP guide.

Step 2: Resize to the Display Size

Resize the image to the largest width it is actually shown at, then account for high-density screens by exporting at roughly twice that. A photo shown in an 800px column only needs to be about 1600px wide; anything past that is bytes the visitor downloads and never sees. Rough targets:

• Full-width banners: 1600–2000px wide
• In-article images: 1200–1400px wide
• Thumbnails and cards: 300–500px wide
• Icons and UI marks: SVG, or PNG under 100px

Step 3: Compress What Is Left

With the format and size settled, compression is the last squeeze. For photos, JPEG or WebP quality in the 60–80% range drops the file a lot while staying hard to tell apart from the original at normal zoom. Above 85% the file grows fast for a difference most people cannot see. Preview the result before you save it, and keep the original in case you need to redo it.

Step 4: Check It in the Page

• Add loading="lazy" to images below the fold, but not to the hero image.
• Serve different sizes with srcset and sizes so phones do not download the desktop image.
• Reserve width and height on every image so it does not shift the layout as it loads.
• Run the page through Lighthouse and confirm the image is no longer flagged.