Image Resizer & WebP Converter Resize and Convert Images Without an Upload

What this tool actually does

The image resizer does three things. It reads a picture into memory, it draws that picture onto an HTML canvas at whatever pixel dimensions you set, and it re-encodes the canvas as a new file in WebP, JPEG, or PNG. Nothing else. There is no server involved, no account, no session, and no upload. The whole pipeline runs inside your browser tab, and the moment you close it, the file disappears from memory.

That simplicity is the point. Most image resizing on the web happens on a server, which means sending the original file over the network and receiving the result back. That works fine for holiday photos but is a poor fit for anything sensitive, and it adds a round trip that can be slow on a mobile connection. Doing the work in the browser removes both problems at once.

What the tool does not do is edit your image. It does not crop, rotate, sharpen, adjust colours, or remove objects. It scales the whole picture to the new dimensions you give it and changes the file format. For anything more involved, you want a proper image editor. For a quick resize or format conversion before uploading something, this is faster than opening one.

How the browser resizes an image

The browser has a built-in drawing surface called a canvas, and the canvas API includes a method for drawing images at a chosen size. The sequence this tool follows is straightforward. First, the file you selected is read into memory as a blob. Second, the blob is loaded into an image element. Third, a canvas is created with a width and height equal to the output dimensions you set. Fourth, the image is drawn onto that canvas, which scales it in the process. Fifth, the canvas is asked to produce an encoded image file at the chosen quality.

Because the browser is doing the drawing, the resampling method is whatever the browser chooses internally. In practice every modern browser uses a decent interpolation algorithm that produces a clean result when scaling down and an acceptable one when scaling up. That is why a resized photo looks sharp at the output dimensions, and why an enlarged photo looks soft. The canvas can only work with the pixels it already has.

What the canvas does not preserve is most of the original metadata. When an image is drawn onto a canvas and re-encoded, the EXIF block is generally stripped. That includes the camera model, the shooting date, and, most importantly for privacy, any GPS coordinates that were embedded by the phone or camera. If you are posting a photo online and want to remove that information, running it through this tool is one way to do it. The other way is to use a dedicated metadata stripping tool, but the effect on the visible image is the same.

Choosing between WebP, JPEG, and PNG

The three output formats cover most of what you would need, and the choice between them comes down to a simple trade off between file size, quality, and features.

WebP is the modern default. It was released by Google in 2010 and is now supported by every major browser, including all versions of Chrome, Firefox, Safari, and Edge from the last several years. WebP typically produces files twenty five to thirty five per cent smaller than an equivalent JPEG at the same visual quality, and it supports both lossy and lossless compression as well as an alpha channel for transparency. For most website images, it is the format to choose unless you have a specific reason not to.

JPEG remains the safe, universal choice. It is a lossy format, which means it discards information to save space, and it has been optimised for photographs for over thirty years. It does not support transparency, so a logo or icon saved as JPEG will come out with a white background. Its main advantage is compatibility with older systems, older email clients, and software that was never updated to handle WebP.

PNG is a lossless format, which means the file preserves the original pixel data exactly. It supports full transparency and is the right choice for logos, icons, screenshots with sharp text, and any graphic where edges matter more than file size. The trade off is size: a PNG photograph can easily be four or five times larger than the same image saved as JPEG at high quality. For photographs, PNG is usually the wrong choice unless transparency is essential.

What the quality slider changes

The quality slider only affects lossy formats, which are WebP and JPEG. At a setting of one hundred, the encoder tries to preserve as much information as possible, which produces the largest file. At a setting of ten, it discards aggressively, which produces the smallest file and the most visible artefacts.

The artefacts of over-compression show up first in fine detail. Text becomes fuzzy at the edges, hair and fabric lose definition, and smooth gradients like skies or skin tones develop visible bands. Because these artefacts are usually most obvious at one hundred per cent zoom, which is not how an image is normally viewed on a page, a lower quality setting can look fine in practice even when it looks poor at full magnification.

The right setting depends on the image. For a large hero image on a landing page, eighty or eighty five is a safe default that produces a small file with no obvious loss. For a small thumbnail, seventy five is often indistinguishable from one hundred. For an image where sharp text needs to survive compression, like a product screenshot, ninety is worth trying. PNG is a lossless format, so the slider does not change PNG output in the same way; a PNG saved from the same canvas will have the same file size regardless of the quality setting.

A worked example with real numbers

Take a photo straight out of a phone camera. It is 4032 pixels wide and 3024 pixels high, which is the standard output from a twelve megapixel sensor. The file size on disk is about 4.2 megabytes, saved as JPEG at the phone's default quality.

Now suppose the image is going onto a blog post where the maximum display width is 1200 pixels. Resizing to 1200 by 900 (keeping the aspect ratio) reduces the pixel count to about one tenth of the original. Encoded as WebP at quality eighty five, the resulting file is around 180 kilobytes. Encoded as JPEG at the same quality, it is around 260 kilobytes. Encoded as PNG, it is around 1.8 megabytes, which is why PNG is rarely the right choice for photographs.

The difference between the WebP and the original is roughly twenty three times smaller. On a mobile connection, that is the difference between a page that loads in a second and a page that takes twenty. Multiply it by four or five images on the same page, which is typical for a blog post or product listing, and the effect on loading time becomes dominant.

What matters here is not the exact numbers, which vary by image and by encoder, but the shape of the change. Reducing dimensions has a bigger effect on file size than changing format, because pixel count scales with the square of the linear dimensions. Halving the width and height reduces the pixel count to a quarter, which usually reduces the file size by a similar amount before any format change is applied. Getting the dimensions right is the first job. Choosing the format is the second.

Everyday uses for resizing

Image resizing shows up in more places than most people expect. Here are the ones that come up most often.

Preparing images for a website. This is the classic case. You have a folder of original photos and you need versions sized for a hero banner, a card thumbnail, and a profile avatar. Running each through this tool at the target dimensions produces the files you need without opening Photoshop or uploading anything to a third-party service.

Meeting a size limit on an upload form. Government portals, university application systems, and job boards frequently impose a maximum file size on uploaded documents. A passport photo that is 3 megabytes on your phone has to be under 500 kilobytes to go through. Resizing to a smaller dimension and converting to WebP usually clears the limit in one step.

Reducing attachment size for email. A single phone photo can be too large for some email systems. Resizing to a display resolution of around 1600 pixels on the long edge is usually sufficient for anything that will be viewed on a screen, and it cuts the file size dramatically.

Preparing images for social media. Different platforms have different preferred aspect ratios and maximum file sizes. Resizing to the platform's recommended dimensions before uploading gives the platform less work to do and usually produces a sharper result than letting it resize automatically.

Removing location metadata before sharing. Because canvas re-encoding strips EXIF data, a quick resize is one way to strip GPS coordinates and camera model information from a photo before it goes online. This is not a substitute for a proper privacy tool, but it does clear the most common metadata that people would rather not share.

Common mistakes when resizing for the web

Six mistakes come up repeatedly when people resize images for the web, and each one is easy to avoid once you know it is there.

Enlarging a small image to fill a large space. A thumbnail scaled up to a hero banner will look soft and slightly blurry, because the canvas has to invent pixels that do not exist. The rule is simple: you can always make an image smaller without problems, but you cannot make it larger without losing sharpness. Always start from the largest version you have.

Using PNG for photographs. PNG is lossless, which means it preserves the exact pixel data, and for a photograph that means a very large file. If you need transparency, fine, use PNG. If you do not, WebP or JPEG will be a fraction of the size at a visual quality that no one can tell apart.

Setting quality to one hundred out of habit. Quality one hundred on WebP or JPEG doubles or triples the file size for a difference that most people cannot see. Eighty to eighty five is the sweet spot for almost everything, and for small thumbnails seventy five is fine.

Ignoring aspect ratio. Stretching a portrait into a square, or squashing a landscape into a tall banner, distorts everything in the image, and the distortion is often subtle enough that it is not noticed until someone points it out. Keep the aspect ratio locked unless you have a specific reason to change it, and if you need a different shape, crop first in an image editor.

Forgetting to test the output. A converted file can look fine in the preview and behave differently when uploaded to a specific platform. Some content management systems re-encode images on upload and can undo your work. Some email clients strip certain formats. Download the file, open it in the app where it will actually be used, and confirm the result before you replace the original.

Deleting the original. Once you have resized an image down, the original is the only record of the full resolution. Keep it. Disk space is cheap, and you never know when you will need a larger version for a new use case.

What the tool does not do

This tool resizes and converts images. It does not edit them. There is no crop tool, no rotate control, no colour adjustment, no watermark, no text overlay, and no way to draw on the image. If you need any of those, use an image editor. GIMP is free and runs on Windows, macOS, and Linux. Snapseed and Photoshop Express run on mobile. Figma and Canva handle the web side.

It also does not handle animated files properly. When a browser loads an animated GIF or animated WebP into an image element, only the first frame is available. The output from this tool will be a static image of that first frame, with all subsequent frames discarded. If you need to resize an animation and keep every frame, use ImageMagick, GIMP, or an online tool that explicitly advertises animated format support.

And it does not preserve metadata. The EXIF block, the colour profile, the ICC information, and any embedded thumbnail are all stripped when the canvas re-encodes the image. For most web use that is a benefit. For archival work, professional photography, or anything where you need to preserve the original metadata alongside the resized version, keep the original file and treat the resized copy as a separate output.

Finally, the tool does not upload anything. Your image is not sent to AfriWidget, to a cloud service, or to any third party. Everything runs in your browser, and the only data that leaves your device is the anonymous byte summary that goes to the AI service if you press the AI insight button. The image itself never leaves your machine.

Sources

The technical details behind this tool come from the HTML specification, the canvas API documentation, and Google's published research on the WebP format. The sources below are the ones that carry the most weight for this subject.