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
The biggest wins come before compression. A camera photo is 4000+ pixels wide; a blog content column is maybe 800. Serving the full-size original wastes 90 percent of the bytes on pixels no one will ever see. Start with the image cropper: trim the frame to the composition you want and the aspect ratio the slot needs — 16:9 for hero banners and YouTube thumbnails, 1:1 for product grids and avatars, 4:5 for Instagram-style cards. Practical width targets: 1600 to 1920 px for full-width heroes, 800 to 1200 px for in-content images, 400 px for thumbnails. Resizing a 4 MB photo down to its display size alone often gets you to 300 KB before any compression at all.
Step 2: Compress to real-world file size targets
With dimensions right, run the file through the image compressor. Modern lossy compression at around 80 percent quality is visually indistinguishable from the original for photos, and typically shaves another 60 to 80 percent off the file size. Targets worth writing down: hero images under 200 KB, in-content images under 100 KB, thumbnails under 30 KB, and a whole page's images under 1 MB combined. The resize-then-compress order matters — compressing a 4000-pixel image and letting the browser scale it down keeps all the wasted pixels; resizing first means the compressor only works on pixels that will be seen. That one habit is the difference between a 2 MB page and a 500 KB page.
Step 3: Pick the right format for each job
Format choice is the third lever. Use JPG for photographs, PNG for screenshots and anything needing transparency, WebP where your platform supports it (smallest of the three for most content), and SVG for logos and icons. The classic mistake is a photo saved as PNG — often five times larger than the same image as JPG with zero visible benefit. The reverse mistake is a logo as JPG: fuzzy edges, no transparency, and it falls apart on retina screens. If you're unsure, the rule is simple: made with a camera, use JPG or WebP; made on a computer with flat colors, use PNG or SVG. The next three sections cover the conversions you'll actually need.
Dealing with WebP files you can't use
WebP is great for serving pages, but it's awkward as a working format: older email builders, some CMS uploaders, and most design software still choke on it — and every image you save from the modern web seems to arrive as .webp whether you like it or not. When a WebP file blocks your workflow, the WebP to PNG converter turns it back into a universally supported PNG in seconds, transparency preserved. The practical pattern for 2026: keep PNG or JPG as your editing and archival format, then let your site or CDN serve WebP to visitors. Convert inbound WebP files to PNG for editing; let the platform handle the outbound direction automatically.
Vectorize your logo: PNG to SVG for infinite sharpness
Logos and icons deserve special treatment. A raster logo is always the wrong size somewhere — pixelated in the retina navbar, bloated in the footer. An SVG is a vector: mathematically described shapes that render razor-sharp at any size, usually in just a few kilobytes. Run a one-colour logo or icon through the PNG to SVG converter to trace it into a scalable vector, or use the JPG to SVG converter if the source is a JPEG. The trace comes out in a single colour, which you can change by editing the SVG's fill. Two honest caveats: a multi-colour logo is better exported as SVG from its original design file, and photographs don't trace cleanly and should stay raster. Swapping a 150 KB navbar PNG for a 6 KB SVG is one of the best byte-for-byte trades in web performance.
Clean product shots: remove the background before you optimize
For stores and portfolios, background removal is optimization's best friend. Cutting a product onto a transparent background with the background remover does three things at once: the image looks professional on any page color, it drops straight into marketing layouts without a white box around it, and the file often compresses smaller because flat transparency encodes more efficiently than a busy background. The e-commerce pipeline in full: remove the background, square it up with the image cropper to a 1:1 ratio at 1000 px or so, then run the image compressor to land under 100 KB. Batch a whole catalog in an afternoon — no Photoshop license involved.
The complete pipeline, on one page
Here's the checklist to pin: crop and resize to display size with the image cropper; compress to targets — heroes under 200 KB, content images under 100 KB — with the image compressor; fix formats with WebP to PNG for compatibility and PNG to SVG for logos; and prep product shots with the background remover. Every tool is free online with files up to 50 MB, no account, no watermark — unlike most optimizer sites that meter you after a handful of images. Run your ten heaviest images through this pipeline today and re-test your page speed; it's usually the single biggest performance win available without touching code.
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.
