Bookmarks for Devs

Image converter — WebP, AVIF, JPEG and PNG

Convert and resize images to WebP, AVIF, JPEG or PNG at the quality you choose, see exactly how many bytes each one saved, and download them one at a time or as a zip. Everything happens in your browser — no image is uploaded.

Free · no sign-up · runs in your browser

Pick files or drop them here. Nothing is uploaded.

In pixels. Images narrower than this are left alone.

Converted

Converted images will appear here.

Files are read, converted and zipped in this page. Nothing is uploaded — check your network tab.

Most image converters ask you to upload the file to someone else's server, which is a strange thing to do with a screenshot of unreleased work. This one does the whole job in the page: your files are read locally, drawn to a canvas, re-encoded by the browser's own encoders, and zipped in JavaScript. Nothing is sent anywhere, and you can watch the network tab to check.

How it works

  1. 01Pick files, or drop them in. Each one is decoded, drawn into a canvas at the size you asked for, and re-encoded in the format you chose.
  2. 02Resizing keeps the aspect ratio and never enlarges. A source narrower than your limit is left alone — upscaling adds bytes and invents detail that was never there.
  3. 03Quality applies to the lossy formats. PNG ignores it, so the control disappears when PNG is selected rather than sitting there doing nothing.
  4. 04AVIF is offered only if your browser can actually *encode* it. Some browsers display AVIF but cannot write it, and canvas quietly hands back a PNG when asked for a format it cannot produce — so the encoder is probed once and the option is disabled rather than producing a mislabelled file.
  5. 05Each row shows the original and converted sizes and the change between them, including when the result is larger — which happens with small or already-optimised images and is worth seeing rather than hiding.
  6. 06Download files individually, or all at once as a zip assembled in the page.

Use cases

  • Converting screenshots to WebP before putting them in a repository.
  • Getting a hero image under a page-weight budget without opening a design tool.
  • Resizing a batch of photos to a maximum width for the web.
  • Comparing WebP against AVIF on your own images rather than trusting a benchmark.
  • Converting an image you would rather not upload to an unknown server.
  • Producing a JPEG fallback alongside a modern format.

Frequently asked questions

WebP or AVIF — which should I use?

AVIF is usually 20–30% smaller than WebP at visually similar quality, and both are supported by every current browser. WebP encodes far faster and is the safer default for a large batch; AVIF is worth it for a hero image where the bytes matter most. Convert one image to both here and compare the actual numbers — the ranking depends on the picture, and photographs behave differently from flat graphics.

Are my images uploaded?

No. Files are read with the FileReader API, drawn to a canvas, and encoded by your browser. The zip is built in JavaScript in the page. There is no server round trip at any point, which you can confirm in your browser's network tab.

Why is my converted file bigger than the original?

Usually because the original was already optimised, or because it is a small flat graphic where a lossy format's overhead outweighs its compression. Screenshots of text often do better as PNG than as JPEG. The size change is shown for every file, positive or negative, so you can tell rather than assume.

What quality setting should I use?

For WebP and AVIF, 0.75 to 0.85 is usually indistinguishable from the original at normal viewing size. Below 0.6 artefacts start showing in gradients and flat areas. JPEG needs a slightly higher number than WebP for the same apparent quality. There is no universally correct value — compare at the size the image will actually be displayed, not zoomed in.

Does converting lose quality?

Converting to a lossy format (WebP, AVIF, JPEG) always discards some information, and re-encoding an already-lossy file compounds it. Convert from the highest-quality original you have rather than from a JPEG that has been through this before. PNG is lossless, so converting to it never degrades the image — though it will usually be much larger.

Is there a file size or count limit?

No imposed limit, but everything runs in your browser's memory, so very large images or very long batches will be slow and can exhaust a tab. Large photographs are the usual culprit. If a batch stalls, do it in a few smaller passes.

Related resources

Related reading

More tools

Tailwind CSS color palette generator

Open →

Turn one hex code into a full Tailwind color scale — 11 OKLCH-tuned shades from 50 to 950, with contrast ratios, ready to paste into Tailwind v4's @theme block or a v3 config. Free, no sign-up, runs in your browser.

CSS clamp() calculator for fluid typography

Open →

Generate a responsive CSS clamp() font size from a minimum and maximum size and the viewport range they should grow across — with the slope and intercept shown, a live preview, and the rendered size at every common screen width. Free, no sign-up.

SVG to JSX converter for React components

Open →

Paste an SVG and get a React component back — attributes camelCased, class turned into className, style strings converted to objects, xmlns removed, with optional currentColor, a size prop and TypeScript output. Runs entirely in your browser; nothing is uploaded.

Meta tag generator with Google SERP preview

Open →

Fill in a title, description, canonical and Open Graph image and get the complete <head> snippet — with a live Google result preview that measures your title and description in pixels, not characters, so you can see exactly where they will be cut.

Favicon generator — .ico, PNG set and manifest

Open →

Turn a PNG or SVG, or just a couple of letters, into the full favicon set: 16, 32, 48, 180, 192 and 512 PNGs, a real multi-size favicon.ico, a web app manifest and the <head> tags. Everything runs in your browser — nothing is uploaded.

JSON-LD schema generator and validator

Open →

Build valid JSON-LD structured data for Article, FAQPage, Product, Organization and BreadcrumbList from a form, or paste existing markup to have it pretty-printed and checked for the mistakes that stop a rich result appearing. Free, runs in your browser.

robots.txt generator with validation

Open →

Build a robots.txt from user-agent groups, allow and disallow rules, crawl-delay and sitemap URLs — with presets for allowing everything, blocking AI crawlers, or locking down a staging site, and warnings for the mistakes that quietly block your whole site.

UTM link builder and campaign URL generator

Open →

Build correctly encoded UTM tracking links from a URL and your source, medium and campaign — with the existing query string and fragment preserved, values properly percent-encoded, and warnings for the capitalisation and spacing that split one campaign across several rows in an analytics report.

Colour contrast checker with WCAG suggestions

Open →

Check any two colours against WCAG 2 — normal text, large text and UI components — see the ratio and live samples, and get the nearest passing colour when a pair fails, adjusted in OKLCH so the hue stays yours. Free, runs in your browser.

JSON formatter and validator — free, in your browser

Open →

Format, minify and validate JSON in your browser. Broken documents get the exact line and column of the error. Nothing is uploaded, and there is no size limit but your machine.

JSON to TypeScript — generate interfaces from a payload

Open →

Paste a JSON payload and get TypeScript interfaces: merged array shapes, optional properties, and real unions instead of any. Runs in your browser — nothing is uploaded.

OG image generator — free 1200×630 social cards

Open →

Generate an Open Graph image for any page: type a title, pick a theme, download a 1200×630 PNG. Runs entirely in your browser — no account, no upload, no watermark.