Compress, resize, convert & export images in your browser

How this browser-based image compressor works

The compressor uses the HTML canvas element as a lightweight image lab. When you select a file, the script reads it with a FileReader, constructs an Image object, and draws that image onto an off-screen canvas at its original resolution. Once the pixels are in the canvas, the tool can ask the browser to export them again as a JPEG, PNG or WebP file with a particular quality level. That new encoding often stores the same visible information in fewer bytes, especially for photographs and gradients where some compression artefacts are acceptable.

The canvas pipeline keeps everything on the user’s side. No upload takes place; the browser only reads the local file, processes it in memory, and generates a blob representing the compressed image. This blob is handed to a temporary download link, which is then triggered programmatically so the output appears in your downloads folder without additional interaction. The original file stays on your machine untouched, which is important when dealing with photos that you might want to edit again in the future.

Understanding the compression profiles

The “Balanced” profile targets common web usage: article thumbnails, gallery images, and cover photos. Internally it maps to a medium-high JPEG quality factor, which keeps edges clean while discarding subtle noise and invisible colour variations. The exact quality value is chosen so most modern displays will not reveal artefacts at normal viewing distances, yet the file size shrinks significantly compared to a camera-original JPEG.

The “Soft compression” profile uses a slightly higher quality factor. This is appropriate when the image contains fine text, interface screenshots, or technical diagrams where crispness matters more than aggressive size reduction. Even in that mode, the canvas re-encoding often removes redundant detail from uniform areas such as flat backgrounds or gradients.

The “Strong compression” profile is intended for situations where the primary goal is small file size and minor artefacts are acceptable: preview images for messaging apps, quick mock-ups, or background pictures in presentations. The visual result remains usable, but close inspection will reveal slightly softer edges and more visible block patterns in uniform regions. For important assets such as portfolio work or product photos, it is safer to stay with the balanced or soft profiles.

Why JPEG shrinks more than PNG

The tool preserves the original format in order to avoid breaking transparency or introducing unexpected behaviour. That means JPEG uploads stay JPEG and PNG uploads stay PNG. In practice, this leads to different results: JPEG files often shrink dramatically because the lossy compression scheme can discard decoded detail, while PNG compression is lossless and mainly optimises how pixel patterns are stored. A scanned logo with sharp edges and transparency might only shrink a little as PNG, even after re-encoding, which is expected.

When you need strong reduction and do not rely on transparency, it can be more effective to convert a PNG to JPEG on purpose using the format-conversion tool on this page. That change does sacrifice lossless reproduction, but it mirrors how most websites already handle photographic content and banners, and it keeps download sizes under control.

Practical tips for everyday use

A simple workflow is to keep a high-quality version of an image in a personal archive and generate publication versions using this compressor. Use the soft profile for diagrams and screenshots, balanced for general web images, and strong for supporting visuals that do not require close inspection. After each run, check the compressed file in an image viewer at the size it will appear online. If artefacts stand out, step back to a gentler profile and re-run the process.

Resizing images for predictable display and weight

Many images used on websites and documents arrive from cameras or phones with resolutions far beyond what the layout requires. A photo taken at 4000×3000 pixels and dropped directly into a blog post will be scaled down visually by CSS, but the browser still downloads the full original data. The resizer addresses this by creating a new image with a smaller pixel grid, aligning physical dimensions with how the image will actually appear on screen.

When you upload a file, the script loads it into an Image object and reads its original width and height. Based on the inputs you provide, it computes target dimensions and allocates an off-screen canvas at that size. A single draw call scales the original picture onto this canvas. Modern browsers apply sensible filtering algorithms when downscaling, so diagonal lines, gradients and small details are softened in a controlled way rather than becoming jagged.

Choosing dimensions with aspect ratio in mind

The “Preserve aspect ratio” mode is designed to avoid unintended stretching. If you enter only a width, the tool calculates the height using the ratio of the original image: newHeight = originalHeight × newWidth ÷ originalWidth. If you enter only a height, it solves the inverse relationship. This approach ensures that circles remain circular and faces do not appear squashed.

The “Free” mode accepts both width and height literally. It is useful when you need fixed dimensions to match a layout grid or thumbnail frame, and you are comfortable with potential distortion. In that case, consider preparing the image composition in a dedicated editor first, then using the resizer as the final step to produce the exact pixel size needed for output.

Balancing clarity and weight

Resizing often pairs naturally with compression. A large camera original reduced to half the width and height contains one quarter of the original pixels. When this smaller grid is then stored as JPEG with reasonable quality, the file can become dramatically smaller. The visual effect on modern screens is usually beneficial because the image matches the display context instead of being scaled down on the fly.

A good strategy is to think in terms of content width. If your main column on a website is 900 pixels wide, there is rarely a reason to keep inline images wider than that. For full-width banners that span the entire viewport, target values between 1600 and 1920 pixels often provide a solid compromise between clarity and bandwidth usage.

When not to upscale

The resizer allows you to specify dimensions larger than the original resolution, but that rarely improves quality. Upscaling spreads the same pixel information across a larger grid, which can make edges appear softer and textures less crisp. If you must deliver a higher-resolution file for a particular system, it is better to work from the highest quality original you have rather than repeatedly scaling up intermediate versions.

For archival purposes, keep at least one version of each important photo at or near the native camera resolution. Use the resizer for distribution copies: web-optimised, email-friendly, and tuned to the specific placements where the images will be seen.

Choosing the right image format for each use case

JPEG, PNG and WebP each address different needs. JPEG excels at storing photographic content. It uses lossy compression that discards fine detail the human eye struggles to notice, reaching much smaller file sizes for complex scenes compared to lossless schemes. PNG prioritises exact reproduction and transparency. It shines when storing logos, interface elements, diagrams and any asset that should remain pixel-perfect. WebP sits between these two worlds with modern compression techniques that often outperform JPEG at the same visual quality while offering both lossy and lossless modes.

The converter relies on the same canvas pipeline used by the other tools. The uploaded image is rendered onto a canvas of matching size. From there, the browser encodes that pixel grid into the requested format using canvas.toBlob(). For JPEG and WebP, a quality parameter guides how aggressively the encoder compresses, while PNG focuses on patterns and does not apply a quality factor in the same way.

Converting PNG with transparency

When you convert a transparent PNG to JPEG, the transparent regions must be replaced by actual colour data because JPEG does not support an alpha channel. The canvas fills those areas with a default background, which is typically solid and matches the browser canvas background. This behaviour matters if you rely on overlays or expect the underlying web page colour to show through the graphic. In such cases, staying with PNG or switching to WebP in lossless mode keeps transparency intact.

On the other hand, when a PNG image is purely photographic without any transparent pixels, converting to JPEG often yields substantial savings in file size while maintaining practical visual quality. This is common when screenshots are saved as PNGs by default: text and gradients may look excellent, but the weight is disproportionate for web delivery. Converting to JPEG or WebP with a sensible quality level corrects that.

WebP as a modern default

WebP can be treated as a modern default for browsers that support it. It offers better compression for photographs than classic JPEG in many cases and can also store graphics losslessly with alpha transparency. This makes it a flexible choice when building a new site or refreshing image assets. The converter lets you generate WebP versions of existing JPEG and PNG files in a single step without installing additional software.

The main limitation is compatibility with older systems and non-browser environments. Some email clients, document editors and legacy devices still expect JPEG or PNG. For those channels, it is safer to maintain a compatibility set of images, using WebP where you control the rendering environment and JPEG/PNG where you do not.

Managing file naming and organisation

The tool constructs output filenames by keeping the base name of the source file and replacing the extension with the appropriate one for the target format. This avoids long chains of extensions such as “photo.jpg.png” and keeps directory listings coherent. When preparing assets for a website, it can be helpful to group them into folders by role (banners, thumbnails, icons) and run format conversions inside each group so you always know which version belongs where.

For long-term storage, keep at least one high-quality master in a lossless or near-lossless form. Use the converter to derive delivery formats depending on whether you optimise for interoperability, size or visual fidelity in a specific context.

Why convert images to PDF for submissions

Many upload systems only accept PDF files, even when the content being submitted is inherently an image: a signed form captured with a phone, a photograph of a certificate, or a scan of an invoice. Converting such images to PDF allows them to pass validation checks without altering the essential content. This conversion is structural rather than interpretive: the pixels are embedded into a single-page PDF canvas, and no optical character recognition or content rewriting occurs in the process.

Using a browser-based tool for this step offers convenience and control. You do not need to install a virtual printer or full desktop suite just to create one-page PDFs. Instead, the image bytes are embedded directly into a PDF document through the pdf-lib library, and the finished file is downloaded straight away. The original image remains untouched, which lets you keep a master copy for archiving or further editing.

How the embedding process works

When you select an image, the script reads it as a binary buffer using file.arrayBuffer(). A new PDF document is created in memory. Based on the MIME type of the file, the code chooses an appropriate embedding method: JPEG images are passed to embedJpg, while PNG images go through embedPng. WebP files can be handled by first routing them through the canvas pipeline if needed or by treating them as JPEG where support allows.

Once embedded, the image object exposes intrinsic width and height in PDF units. The script creates a single page with a matching aspect ratio and draws the image so it fills the page. That way, shapes and proportions appear exactly as in the original. If you plan to print the resulting PDF, it is wise to start with an image captured at a sufficient resolution so printed text remains legible.

Managing scale and readability

A high-resolution photo of an A4 sheet can contain more pixels than necessary for on-screen review. If you use such captures extensively, consider combining this tool with the resizer. First, resize the image to a practical resolution where text remains clear at 100% zoom in a PDF viewer. Then convert that resized copy into PDF. This sequence keeps file sizes under control while preserving readability.

For documents containing fine print or complex stamps, avoid aggressive downscaling or lossy re-compression before conversion. The more margin you keep in terms of resolution and quality, the more forgiving the viewing conditions will be on different screens and devices.

Integration into administrative workflows

In practice, image-to-PDF conversion often becomes part of a routine when dealing with administrative tasks. For example, you might photograph receipts during a business trip, then later convert each image into a PDF before uploading them to an expense management system. Likewise, students and professionals frequently need to upload handwritten solutions or diagrams to learning platforms that accept only PDF submissions.

Keeping this tool at hand reduces friction in those workflows. You can create submission-ready files from any device that runs a modern browser, without relying on printer drivers, temporary accounts, or ad-heavy online services. Combined with the compression utilities, it forms a compact chain: capture, adjust, convert, and upload.