Image Resizer & Compressor

What does this image resizer do?

An image resizer lowers a photo's pixel dimensions, its file size, or both. A 12 megapixel phone shot measures roughly 4000 × 3000 pixels and weighs several megabytes. Yet an application form, an email attachment or a web page usually needs only a fraction of that.

This tool combines two jobs:

• Resizing: it changes width and height in pixels, and the aspect lock keeps the photo from looking squashed or stretched.
• Compression: it sets JPG or WebP quality, or fits the file under the KB limit you choose.

My team and I do this most often right before a site goes live. In web design projects, the heaviest thing on a page is nearly always a beautiful photo nobody resized. The tool runs entirely in your browser, so your file never reaches a server.

What makes a file big: pixel count or quality?

Both matter, but not on the same scale. Pixel count is width times height, so halving both sides leaves a quarter of the pixels. For example, a 4000 × 3000 photo holds 12 million pixels; at 1280 × 960 you keep about 1.23 million, roughly a tenth.

Quality, on the other hand, decides how much detail each pixel keeps. Dropping quality from 90% to 70% makes the file smaller, but it rarely matches the jump you get from fewer pixels. The right order therefore looks like this:

1. First, find the largest width the image will actually appear at and resize to it.
2. Next, choose the format: JPG or WebP for photos.
3. Finally, lower the quality and check the preview.

The Change card shows the saving as a percentage. If you want to verify that figure by hand, the percent change mode of the percentage calculator gives the same result.

How much does the format change the file size?

The format decides how the same pixels sit on disk, and the difference is large. JPG uses lossy compression: it drops detail the eye barely notices, so photos come out small. PNG is lossless and keeps every pixel exactly. As a result, turning a photo into a PNG rarely shrinks it; the file often grows instead.

WebP is a newer format that supports both approaches. According to Google's own measurements, lossy WebP is 25-34% smaller than JPEG at equivalent quality, and lossless WebP saves 26% against PNG. MDN likewise reports that lossy WebP files are on average 25-35% smaller than JPEG.

• Photos and product shots: WebP, or JPG if WebP is not accepted.
• Screenshots, logos, graphics with text: PNG, which keeps sharp edges clean.
• Transparent backgrounds: PNG or WebP. JPG has no transparency, so the tool fills those areas with white.

The Result card updates on every switch, so trying all three formats and keeping the smallest takes a few seconds.

How do you get under a form's KB limit?

University portals, job sites, visa and government forms often cap the photo size. In that case, switch to Target file size, type the limit in KB and press Fit to Target. The tool tries quality between 50% and 95% first. If that is not enough, it shrinks the sides in 20% steps and reports the outcome in a green line.

There is a small but real trap here: KB does not mean the same number everywhere. Some systems count 1 KB as 1024 bytes, others as 1000. Apple, for instance, explains that macOS and iOS report storage capacity in decimal units. For that reason the tool aims at 1000 byte kilobytes. A file fitted to 200 KB then stays under the limit whichever definition the form uses.

Some forms also ask for exact pixel dimensions. Then pick 800 or 1280 in the Longest side at most row, or set the width in Size & quality to the value the form states. In short, read the form's instructions first and set the tool to those numbers.

Using an image resizer for website speed and SEO

On the web, every photo adds to load time. web.dev asks sites to keep Largest Contentful Paint (LCP) at 2.5 seconds or less for at least 75% of page visits, and for LCP images it recommends the right size, modern formats and compression. I explain that link in more depth in how site speed affects SEO.

This is the checklist I follow when I prepare images for a site:

• Resize each image to the largest width it appears at in the design; for a full screen hero, 1920 pixels is usually plenty.
• Use WebP for photos and PNG for logos and interface graphics.
• Give files descriptive names; Google's image guidance prefers a descriptive name over IMG00023.JPG, and the slug generator makes that quick.
• After publishing, run a Lighthouse performance test and check the image warnings.

Image optimization alone will not win rankings, but it lays the groundwork for speed. If your site has wider technical issues, we can tackle them together through SEO consulting.

What should you watch for with ID and document photos?

Sensitive images such as an ID card, a passport page or a signed document need two kinds of protection: privacy and legibility. On privacy, this tool has an edge, because your browser's own drawing engine does the work and the file never leaves your device. The share link also stores only your settings, never the picture itself.

On legibility, however, shrinking too far is a real risk. Small print is the first detail to break down at low resolution and low quality. That is why I suggest this order:

• Photograph the document flat and in good light; a skewed shot will not straighten itself later.
• Try lowering the width before you take quality below 75%.
• Zoom into the preview and make sure you can read the smallest line.
• For text heavy scans, JPG may smudge the edges of letters; if the limit allows, try PNG as well.

Also note that the new file does not carry the original camera and location data; the FAQ below covers the details.

Practical ways to keep quality while resizing

The first rule is to always start from the original. Every lossy save throws away a little more detail. So instead of compressing a reduced copy again and again, keep the original and export each new size from it.

The second rule is to compare. Press and hold the preview and the tool shows the original; release it and the result returns. On a keyboard, the space bar does the same. If faces, sky gradients or fine text look worse, nudge the quality up.

The third rule is to avoid upscaling. You can type a width larger than the original, but the tool cannot invent missing detail; you simply get a bigger, softer file. That is also why the quick size buttons never enlarge an image.

Finally, keep ecommerce images consistent. Preparing every product shot in a category at the same width and quality speeds up the page and keeps the catalog tidy. I cover this in visual language in ecommerce.