Get an image ready for the web
You have a raw image — a phone photo, a screenshot, a design export — and it isn't ready to ship: wrong format, far too heavy, carrying metadata that shouldn't be public, and served as one giant file to every device. These eight tools take it from that state to a responsive, privacy-clean asset, all in your browser.
The short answer
To get an image ready for the web: convert it to a modern format (WebP or AVIF are usually smaller than JPEG at the same visual quality) and compress it to a sensible width, make any edits — a colour effect, or removing the background to a transparent PNG — then check it before shipping by reading its EXIF metadata (phone photos often embed GPS coordinates) and diffing before against after. Finally, generate a responsive srcset so browsers download only the size they need. Everything runs in your browser; nothing is uploaded.
Convert and compress it
the right format, the right sizeThe format and quality settings you choose on the way in decide how heavy the page is for everyone who visits it. Get this right first — every later step operates on a smaller, saner file.
Edit it
effects and cleanupOnce the format and size are settled, the pixels themselves usually need work — a colour or tone effect, or removing the background entirely so the subject drops onto anything.
Check it before you ship it
metadata and visual regressionsAn edited image can carry problems you can't see on screen — data embedded in the file that shouldn't be public, or a compression pass that quietly wrecked the detail you cared about.
Deliver it responsively
not one giant file to every deviceThe last step is making sure the browser downloads only the size it actually needs, whatever screen it's on — and that any vector assets going alongside are as small as the raster ones.
Format and size are the whole game
Almost everything that makes an image slow on the web is decided before you touch a single pixel: what format it's in, and how big it is. A 4000-pixel-wide phone photo saved as a PNG can be several megabytes; the same image at 1600 pixels as WebP can be a few dozen kilobytes and look identical in the slot it fills. That's not a small optimisation — it's the difference between a page that loads and one that doesn't.
Start by picking the right format with Image Converter, which moves between JPG, PNG, WebP, AVIF, GIF, TIFF, BMP, HEIC, SVG and PDF. WebP and AVIF generally produce smaller files than JPEG at equivalent visual quality, so a modern photo almost always wants one of those rather than the JPG it came as. Then hand it to Image Compressor to set a quality level and cap the width or height, so you're not shipping a 4000-pixel image into a 800-pixel column.
Editing: effects and clean backgrounds
With the file the right shape, the pixels are cheap to work on. ImageKit is a set of browser-based photo effects — sepia, sharpen and others — for the tonal adjustments that make a photo sit right on a page rather than looking like a raw camera dump.
The bigger lever is the background. Background Remover pulls the background out automatically and hands back a transparent PNG, which is what you want whenever the subject has to drop cleanly onto something else: a product photo on a white listing, a portrait on a coloured card, a cut-out for a composite or a template. A transparent subject composites onto any background; a photo with its original backdrop baked in only ever works on the one it was shot against.
- 1Compressing after removing the background
A transparent PNG re-saved as JPEG loses its transparency — JPEG has no alpha channel and fills it with a solid colour. If you need the cut-out to stay transparent, keep it as PNG (or WebP) through the rest of the pipeline.
- 2Sharpening a heavily-compressed image
Sharpening amplifies whatever is already there, including compression artifacts. Do tonal effects on the highest-quality version you have, and compress last.
Check it before it goes public
An image can look finished and still carry two problems you can't see by looking at it. The first is metadata. Image Metadata Viewer reads an image's format, pixel dimensions, file size and embedded EXIF directly from the file's bytes — camera make and model, orientation, the date it was taken, and, critically, GPS coordinates. Photos taken on a phone routinely embed the exact spot they were shot. Publish that image and you publish the location with it — someone's home, a private address, a place you'd rather not pin on a map. Check for it before anything with a camera's original EXIF goes public.
The second is damage from your own pipeline. A compression or effect pass can introduce banding, blocking or a colour shift that's obvious in a before/after but invisible when you're only looking at the after. Compare Images diffs two images at the pixel level and gives you a mismatch percentage, so you can confirm the aggressive compression you just applied didn't cross the line from 'smaller' into 'visibly worse'.
- Start
- 4000px HEIC straight off a phone, ~5 MB, GPS in EXIF
- Convert
- Image Converter to WebP so it's a web-native format
- Compress
- Image Compressor caps it at 1600px and drops quality to ~80
- Verify size
- Compare Images against the original confirms no visible artifacts
- Verify metadata
- Image Metadata Viewer confirms the GPS coordinates are gone
Five steps, a file dozens of times smaller, and no home address riding along inside it.
Serve the right size to each device
One optimised file is still the wrong answer if you send the same one to a phone and a desktop. A phone doesn't need the 1600-pixel version, and a desktop shouldn't be handed a blurry 400-pixel one. The fix is responsive images: several sizes, and a browser that picks.
Responsive Image srcset/sizes Generator builds the srcset and sizes attributes from a base filename pattern and a list of target widths, and hands back a ready-to-paste <img> tag with loading="lazy" and decoding="async" already set. While the real image is still loading — or while you're mocking up a layout — Image Placeholder Generator produces a lightweight SVG stand-in with the dimensions written across it.
Raster images aren't the only thing on the page. Icons, logos and illustrations usually ship as SVG, and exported SVGs are full of editor cruft. SVG Optimizer runs the real SVGO — stripping comments and metadata, dropping default attributes, rounding coordinate precision and minifying path data — and shows you the before and after size. It's the same discipline as compressing a photo, applied to the vectors sitting next to it.
Which one do I want?
Several tools here overlap. The short version:
| Image Converter vs Image Compressor | You need a different format — HEIC to JPG, PNG to WebP. | You need a smaller file at (roughly) the same format. |
|---|---|---|
| ImageKit vs Background Remover | You want a tonal effect — sepia, sharpen — over the whole image. | You want the subject cut out onto a transparent background. |
| Image Metadata Viewer vs Compare Images | Checking what's embedded in the file — EXIF, GPS, dimensions. | Checking whether an edit visibly changed the pixels. |
| Srcset Generator vs Image Placeholder Generator | Serving the real image at the right size per device. | A stand-in for a mockup or a loading state before the real one exists. |
Why this set
Conversion, compression, background removal and EXIF reading all run in your browser. The image — and the location coordinates it might be carrying — never leaves your machine.
Modern formats and real compression, plus responsive srcset and SVGO minification, cut page weight dramatically — with no desktop editor to buy for the one image you need to fix.
Convert, edit, verify and deliver hand off cleanly to each other, so a raw camera-roll photo comes out the far end as a responsive, privacy-clean asset.
Questions
What format should I use for images on the web?
For photographs, WebP or AVIF — both generally produce smaller files than JPEG at equivalent visual quality, and Image Converter moves your file into either. Keep PNG (or WebP) only when you need transparency, such as a cut-out from the background remover. For icons, logos and illustrations, use SVG and run it through the optimiser.
Are my images uploaded to a server?
No. These tools process the file in your browser, so the image never leaves your computer. That matters most at the metadata step: a phone photo can embed the exact GPS location it was taken, and reading it locally means you're not handing that to a third party to find out.
Why should I check an image's metadata before publishing?
Because images carry EXIF data you can't see on screen — camera model, the date taken, orientation, and often GPS coordinates. Publishing a photo taken at home or another private location can publish that address with it. Image Metadata Viewer shows you exactly what's embedded so you can decide before it goes public.
Convert first or compress first?
Convert first, then compress. Move the image into a modern format like WebP or AVIF with Image Converter, then use Image Compressor to set the quality and cap the dimensions to the size the page actually uses. Doing it in that order means you're compressing a format that's already efficient.
What are srcset and sizes for?
They let the browser download only the image size it needs for the current screen instead of one large file for everyone. The srcset lists the available widths, sizes tells the browser how much space the image occupies, and it picks. The generator writes both, plus a ready-to-paste <img> tag with lazy loading already set.