Skip to content
Klyro Digital

Design & Media3 min read

How to Compress and Resize Images for Free

Most images on the web are far larger than they need to be. Here is how to cut the file size without the picture visibly suffering.

KLYRO TeamPublished

klyro / tools / image-compressorIn your browserBEFORE2.4 MBAFTER214 KB91% smallerQuality78FormatJPGPNGWebP

A photo straight from a phone is often three or four thousand pixels wide and several megabytes. Displayed at 800 pixels on a web page, almost all of that is wasted: the browser downloads every byte and then throws most of them away.

Compressing and resizing is the single easiest way to make a page faster. It costs nothing and it usually costs no visible quality either.

Resizing and compressing are different things

Resizing changes how many pixels the image has. An image displayed 800 pixels wide does not benefit from being 4000 pixels wide, so reducing the dimensions is pure saving.

Compressing changes how much detail is kept in each pixel. Lower quality means a smaller file and, past a point, visible blocks and smudges around edges.

Do both, and do the resize first. Compressing a 4000 pixel image and then shrinking it wastes the compression you just applied.

How to compress an image

  1. Add the image

    Drag in a JPG, PNG or WebP. It is decoded by your own browser and never uploaded.

  2. Set the maximum width

    Use roughly twice the size it will be displayed at, so it still looks sharp on a high-density screen. Height follows automatically.

  3. Lower the quality until you can see it

    Then go back up one step. The point at which a photograph starts to look wrong is usually a lot lower than people expect.

  4. Pick a format and download

    You can download the result as JPG, PNG or WebP regardless of what you started with.

QUALITY78MAXIMUM WIDTH1600 pxHeight follows automatically.OUTPUT FORMATJPGPNGWebPWebP is usually the smallest for photographs.
Quality, dimensions and format. Three settings, and they do nearly all the work.

Which format to choose

  • JPG for photographs. Decades of support everywhere, and it handles gradients and skin tones well.
  • PNG for anything with sharp edges, flat colour or transparency: logos, screenshots, diagrams. It is lossless, so it is larger for photographs.
  • WebP for either, and it is usually the smallest. Every browser in current use supports it.
Original PNG2.4 MBJPG, quality 78312 KBWebP, quality 78214 KBIllustrative figures for one photograph. Your results depend on the image.
Illustrative figures for one photograph. Your own results depend entirely on the image.

Common mistakes

  • Uploading a photo at full camera resolution and letting CSS shrink it. The browser still downloads all of it.
  • Using PNG for photographs. It is lossless, so the file stays large for no visible benefit.
  • Compressing the same image repeatedly. Each pass throws away detail that cannot come back. Always start from the original.
  • Pushing quality so low that edges break up. Text and logos inside an image show it first.
  • Forgetting that a hero image is downloaded before anything else on the page. It is the one worth being strictest about.

Questions

Does compressing lose quality?
JPG and WebP are lossy, so yes, some detail is discarded. At sensible settings it is not visible. PNG is lossless and loses nothing, but the file stays much larger for photographs.
What size should images be for a website?
As a rule of thumb, about twice the width they are displayed at. An image shown at 800 pixels looks sharp on a high-density screen at 1600, and there is nothing to gain beyond that.
Are my images uploaded to Klyro?
No. Everything happens in your browser, and the page says so. There is no upload and nothing to delete afterwards.

All guides · Browse every Klyro tool