How to Compress Images for the Web Without Ruining Quality

Compressing for the web is two different jobs that people mash together: make the pixel dimensions match the layout, and throw away detail the eye will not miss at that size. DevOkk’s Online Image Compressor does both in the browser - quality slider, optional max width and height, no account. It will not invent a design system for you. It will get a single file under a budget without parking a copy on someone else’s disk.

The file is large because the camera is large

Phones write 3000–4000 pixels on the long edge by default. That is correct for a print lab and wrong for a blog header. If you only drag the quality slider and leave the dimensions alone, you still ship a four-megapixel bitmap through a one-megapixel hole. The browser downloads all of it, then scales it down.

Turn resize on. Set max width to the largest CSS size you actually use, times two if you care about 2x screens (a 1200-pixel hero can justify a 2400-pixel source; it does not justify 4032). Then set quality. For photos, 80 is a sane first stop. Look at faces, sky gradients, and any type baked into the image. If the sky bands, nudge up. If the file is still 900 KB and the slot is a thumbnail, nudge down or shrink the max width again.

Screenshots are a different species. A PNG of a settings dialog is mostly flat color and sharp edges. JPEG will smear the text. Compress the PNG lightly or leave it; do not “optimize” it into a muddy JPG unless it is a photograph that someone exported as PNG by habit.

A check that takes thirty seconds

Keep the original. Download the compressed file with a new name. Open both at 100% on the laptop, then open the small one on your phone on the real page or in the real email draft. That is the only quality metric that matters. A slider labeled 92% is not a promise.

If the destination is Gmail, the pain number is often a few megabytes for the whole message, not one image. If the destination is a CMS with a 2 MB media cap, you have a hard ceiling. Hit the ceiling with resize first. Quality last.

When you are ready to run it, open the compressor. Add the photo, set resize if the dimensions are silly, pick a quality, download. The tool can also change output format. Do that only when you already know JPG is acceptable. Converting a transparent PNG to JPEG inside a compress pass will fill the hole with a background. That is a convert job, not a surprise.

When the format is the real problem

A 9 MB PNG screenshot of a webpage is usually a photo-like capture with no transparency. PNG to JPG will drop that to a few hundred kilobytes before you even touch the compressor. A logo with a transparent field should never take that path.

If the file will not open at all - HEIC on an old Windows box, WebP in a picky media library - convert first. Compression assumes the browser can decode the source. The format guide is the place to decide the destination. This page assumes you already have a JPG or PNG the web can use.

What people break

They compress, upload, then compress the upload again from the CMS. Each JPEG pass deletes different pixels. One pass at a sensible quality beats three passes at “high.”

They serve a compressed 4000-pixel image in a 320-pixel column and wonder why Lighthouse still complains. The audit is about bytes and decode cost. Size the file.

They treat a tiny logo as a photo and run quality 40. The edges halo. Logos want PNG (or SVG on the page). Photos want JPEG at a sane quality.

They upload the original to a cloud optimizer “just this once” because the local slider did not hit 80 KB. Sometimes the cloud tool is more aggressive. It also has a copy of the photo. If that photo is a client’s unreleased product or a kid’s face, the extra 30 KB is not free.

What a browser compressor will not do

It will not batch a folder of 8,000 SKUs. It will not apply a house ICC profile. It will not reconstruct detail you already deleted in-camera. Very large files can fail in the tab; that is a memory limit, not a prompt to find a shadier upload box.

DevOkk image tools process the file in the browser. Pages still load over the network. Analytics still exist. The claim is narrower: you do not send the photo to DevOkk’s application server to finish compress.

If you want the rest of the local toolkit - HEIC, WebP, SVG, type behind a subject - use the image tools roundup. For this file, on this page, resize to the slot, quality until it looks fine on a phone, keep the original, ship the small one.