Tool workflow

Optimize images for a website

Heavy images slow down pages and hurt Core Web Vitals. This workflow trims backgrounds when needed, fits images to your layout, shrinks file size, and exports modern WebP for browsers that support it.

Last updated: 2026-07-05

Steps (4 tools)

Work through each step in order. Your progress is saved in this browser (0 of 4 complete, 0%). Utilnivo does not save your files between tools.

Progress: 0 of 4 steps complete (0%)

1
Remove background
Remove Background
Cut out the subject when you need transparency or a clean product shot.
AI-powered
Browser-based
No signup
Stays on your device
Open Remove Background
🪄
2
Resize
Resize Image
Match pixel dimensions to how the image appears on your page.
Browser-based
No signup
Stays on your device
Open Resize Image
↔️
3
Compress
Image Compressor
Lower file weight while keeping acceptable visual quality.
Browser-based
No signup
Stays on your device
Open Image Compressor
🗜️
4
Convert to WebP
Image Format Converter
Export WebP (or JPG) for faster delivery to modern browsers.
Browser-based
Basic conversion
No signup
Stays on your device
Open Image Format Converter
🔁

When to use this workflow

Product photos need a clean transparent or white background.
Hero or blog images are wider than your content column.
Lighthouse or PageSpeed flags oversized image payloads.
You want WebP versions alongside JPG fallbacks.

Tips

Skip background removal for photos that already have a clean backdrop.
Resize to the maximum display width on your site—do not upload 4000 px images for a 800 px slot.
Compare WebP and JPG quality on a test page before bulk converting.

Frequently asked questions

Is background removal required?

No. Use it for product shots, portraits, or logos on busy backgrounds. Skip it for full-bleed photography.

Do these tools run locally?

Resize, compress, and convert run in your browser. Background removal uses an on-device model cached in your browser—images are not uploaded to Utilnivo servers.

What size should I resize to?

Resize to the largest width the image displays at, multiplied by 2× for retina screens if you want extra sharpness. A 400 px wide column often needs an 800 px asset.