14 Free Image and Design Tools That Run in Your Browser

Image work has a specific problem: the job is usually small, and the tools on offer are enormous. You need to shave 400 KB off a hero image, or get a hex value your designer mentioned, or generate a favicon nobody has made yet. That does not require a subscription.

The fourteen tools below cover preparing images, working with colour, generating CSS effects, and the small production assets that fall through the cracks. Every one runs locally, which matters more for images than for text: the photo you just compressed is often a photo you have not published yet.

Most image problems are really weight problems. A page that feels slow is usually carrying images that are larger than their display size, in the wrong format, at a quality setting nobody ever questioned.

How much should you compress? The honest answer is: until it looks wrong, then back off one step. For a photographic hero image, 70 to 80 percent quality is usually indistinguishable from the original at normal viewing size. For a logo, a screenshot or anything with flat colour and hard edges, use PNG and compress harder — these gain more and lose less.

A practical rule of thumb: anything under 200 KB is fine for a hero image, under 80 KB for a thumbnail, and if you cannot get under 300 KB you probably have a dimension problem rather than a quality problem.

Converting an image to a Base64 data URI removes an HTTP request, which sounds like a pure win. It usually is not. The encoded string is roughly a third larger than the binary file, it cannot be cached separately, and it bloats your CSS or HTML.

Inline only when the image is small — under a few kilobytes — used once, and critical. A tiny icon in a single email template is the classic case. For anything repeated across pages or larger than a few kilobytes, serve it as a file and let the browser cache it.

Be clear about what this does. It removes or obscures the visible mark. It cannot reconstruct the underlying pixels — information that was painted over is gone, and no filter invents it back. Results range from invisible, when the mark sits over a plain background, to an obvious smear when it sits over detail.

One more thing worth saying plainly: removing somebody else's watermark and publishing the result is a copyright problem in most jurisdictions, and a licensing violation regardless of whether you would get caught. Removing marks from your own images, or from stock you have licensed, is the case this tool is for.

Colour is where small mistakes become very visible. A contrast ratio that fails accessibility, a hex value that is actually an HSL triple, a palette that looks coherent on your monitor and muddy on a projector.

One caveat on colour tools: they all assume your monitor is calibrated and that the person viewing your page has working eyes. Neither assumption is safe. That is a reason to prefer contrast-checked combinations over subjective ones.

Writing a gradient or a layered shadow by hand is a genuinely unpleasant task. The syntax is fiddly, you cannot see what you are producing, and the difference between a good shadow and a bad one is a few pixels of blur.

The trick to all four is restraint. Two shadows — a tight dark one and a wide soft one — read as physical elevation. One shadow reads as a website from fifteen years ago. Generate, copy, then delete until you cannot tell it is there.

Here is the whole cluster doing one real job. A page needs a hero with a background image, a heading and a button, and none of it has been built yet.

Five tools, no design suite, and every output is a value you can paste straight into code.

Are my images uploaded anywhere? No. Compression, resizing and Base64 conversion all happen in your browser, which is the reason there is no file-size limit and no upload queue.

Will compressing an image lose quality? Always, by definition. The question is whether it is visible. At 70 to 80 percent quality and correct dimensions, it usually is not.

Why does my resized image still look large? Nine times out of ten you compressed before resizing, or you are saving as PNG when a photo is better as JPEG.

Can I use these for client work? Yes, with no attribution and no commercial restriction.

Do they work on a phone? Yes, though resizing and compressing large photos on a phone depends on your device's memory rather than a server.

Resize before you compress, check contrast before you argue about colour, keep shadows subtle, and never forget the favicon. That is most of what a design suite was doing for you anyway.