Image Optimizer for Web

Image Optimizer for Web

Convert and optimize images for different uses with this image optimizer for web. Transform images between formats while maintaining quality.

When to Use This Tool

Optimizing images specifically for website performance.

Key Benefits

• Better PageSpeed scores
• Faster load times
• Lower bounce rates
• Improved SEO

Pro Tip

Aim for images under 100KB for most web use. Hero images can be 200-300KB maximum.

Supported Formats

Format	Best For	Supports
JPEG	Photos	Lossy compression
PNG	Graphics, screenshots	Transparency, lossless
WebP	Web images	Both lossy and transparency
GIF	Animations	Limited colors

Optimization Tips

1. Use JPEG for photos to reduce file size 2. Choose PNG when you need transparency 3. Consider WebP for modern browsers 4. Compress images before uploading to websites

Sizing Images for the Web

Images are usually the largest thing on a page and the most common cause of a poor Largest Contentful Paint score.

Purpose	Max width	Format	Quality
Hero banner	1920px	WebP	80
Content image	1200px	WebP	80
Thumbnail	400px	WebP	75
Icon	SVG where possible	—	—

Three things matter as much as the compression:

• Serve responsive sizes. A 1920px hero delivered to a 375px phone wastes about 96% of the

bytes. Use srcset and sizes.

• Set width and height. Without them the page reflows when the image lands, which is a

Cumulative Layout Shift penalty.

• Lazy-load below the fold, and explicitly *do not* lazy-load the LCP image —

loading="lazy" on a hero delays the exact element the metric measures.

Target under 200 KB for a hero and under 100 KB for content images.

Sizing Before Compressing

Resizing beats compressing. Halving an image's dimensions removes 75% of its pixels, which no quality setting can match, and a 4000px photo displayed at 800px is wasting 96% of what it downloads.

Displayed at	Serve (1×)	Serve (2× for retina)
400px	400px	800px
800px	800px	1600px
1200px	1200px	2400px

Above 2× there is no visible benefit on any current display, and the file size keeps rising.

Quality Settings That Hold Up

Setting	Looks	Use for
95–100	Indistinguishable, large	Masters and print
80–90	Very good	Hero images, product photography
70–80	Good	Most web content
50–70	Visible artefacts on detail	Thumbnails
Below 50	Obvious	Nothing

Around 75–85 is where the curve bends: below it quality falls quickly, above it file size rises quickly for no visible gain.

Everything Runs Locally

Conversion and compression here use a canvas in your own tab. No file is uploaded, nothing is stored, and the work continues offline once the page has loaded. That is worth knowing for anything containing faces, documents or unreleased work — most online image tools upload by necessity, because they process server-side.

Getting the Rest of the Win

• Serve modern formats with a fallback. with AVIF, then WebP, then JPG.
• Always set width and height. Without them the page reflows on load, which

Google measures as Cumulative Layout Shift.

• Lazy-load below the fold — and never the hero, since loading="lazy" on it delays

the exact element Largest Contentful Paint measures.

• Strip metadata. EXIF can carry GPS coordinates and adds weight to every copy.