Images are the heaviest thing on almost every web page — typically half the total page weight — and they're the first place to look when a site feels slow. The stakes are concrete in 2026: Google's Core Web Vitals punish slow-loading hero images, and every extra second of load time measurably cuts conversions. Yet most oversized images aren't a technical problem; they're a workflow problem. Someone uploaded a 4000-pixel photo straight from a phone into a 800-pixel slot.
The fix is a simple three-step pipeline: size the image for where it will actually display, compress it to a sensible file size, and serve it in the right format. Here's the full workflow, with real size targets, using free browser tools that need no sign-up and never watermark your files.
Step 1: Crop and resize to the display size first
Step 2: Compress to real-world file size targets
Step 3: Pick the right format for each job
Dealing with WebP files you can't use
Vectorize your logo: PNG to SVG for infinite sharpness
Clean product shots: remove the background before you optimize
The complete pipeline, on one page
Frequently Asked Questions
What file size should website images be?
Aim for under 200 KB for full-width hero images, under 100 KB for regular in-content images, and under 30 KB for thumbnails, with all images on a page totaling under 1 MB. You get there by resizing to the actual display dimensions first, then compressing at around 80 percent quality.
Should I resize an image before compressing it?
Yes, always resize first. Compression can only shrink the pixels that exist, so a 4000-pixel photo compressed and displayed at 800 pixels still wastes most of its bytes. Crop and resize to display size, then compress — the combination routinely cuts files by 90 percent or more.
Which image format is best for a website?
Use JPG or WebP for photos, PNG for screenshots and images needing transparency, and SVG for logos and icons. WebP is smallest for serving pages, while SVG stays sharp at every size and is usually only a few kilobytes for a logo.
