Image Resizer Online — Resize Images by Dimensions or Percentage

Why Image Size Matters for the Web

Images are the largest contributor to page weight on most websites. A 2023 HTTP Archive report found that images account for an average of 53% of total page bytes transferred on desktop and 58% on mobile. Oversized images — images larger in pixel dimensions than the layout will ever display them — waste bandwidth, slow page loads, and hurt search rankings.

Google's Core Web Vitals framework measures three performance signals that directly affect search ranking. The most image-sensitive metric is Largest Contentful Paint (LCP) — the time it takes for the largest visible element on the page (usually a hero image) to load. An LCP under 2.5 seconds is considered Good; over 4 seconds is Poor. Oversized images are the most common cause of poor LCP scores.

The correct resolution for a web image is not the maximum resolution the camera can produce — it is the maximum resolution the layout will ever display. A hero image displayed at 1200px wide does not benefit from being 4000px wide. The browser scales it down anyway, but the user downloads three times as much data, and the browser expends unnecessary time decoding a larger image than necessary.

Image Resolution — Understanding the Numbers

Understanding image resolution terminology helps make informed resize decisions:

• Pixel dimensions — the width × height count in pixels. A 1200×800 image has 960,000 pixels. This is what determines how large the image renders on screen and how large the file is.
• PPI (pixels per inch) — pixels per inch, relevant when printing. For web display, PPI has no effect on how an image looks in a browser — only pixel dimensions matter.
• DPI (dots per inch) — a print term, equivalent to PPI for digital images. Web images are conventionally described as "72 DPI" or "96 DPI," but this metadata tag has zero effect on how they render in a browser.
• CSS pixels vs device pixels — on retina / HiDPI displays, one CSS pixel corresponds to 2 or 3 physical display pixels (the device pixel ratio, or DPR). A div that is 600px wide in CSS requires a 1200px-wide image to look sharp on a 2× retina display.

Resize by Dimensions vs by Percentage

Use By Dimensions when you have a specific slot to fill — a social media thumbnail, an email header, a product image slot. Use By Percentagewhen you want to reduce a batch of images by the same factor, or when you want to roughly halve file size without knowing exact target dimensions.

How to Use the Online Image Resizer

1. Open the tool. Navigate to the Image Resizer.
2. Upload your image. Drag and drop a JPEG, PNG, or WebP image onto the upload zone, or click to select a file. The image preview appears immediately.
3. Choose resize mode. Click By Dimensions to enter exact pixel measurements, or By Percentage to scale proportionally.
4. Enter dimensions. Type the target width, height, or percentage. Enable Lock Aspect Ratio (the chain link icon) to prevent distortion — when locked, changing width automatically recalculates height to maintain the original proportions.
5. Choose output format. Select JPEG, PNG, or WebP. Adjust the quality slider (for JPEG/WebP) if needed — 80–85 is the recommended range for web use.
6. Download. Click Download to save the resized image to your device. The file name is auto-generated with the new dimensions appended.

Aspect Ratio Locking — Preventing Distortion

Aspect ratio is the proportional relationship between an image's width and height. A 1200×800 image has a 3:2 aspect ratio. Resizing to 600×400 preserves this ratio (still 3:2) and the image looks correct. Resizing to 600×500 breaks the ratio and produces a vertically stretched, distorted image.

When aspect ratio locking is enabled:

• Enter a width → height auto-calculates to maintain the original ratio
• Enter a height → width auto-calculates to maintain the original ratio
• Enter a percentage → both dimensions scale by that factor

Disable aspect ratio locking only when you need a specific output size regardless of distortion — for example, when a design template requires a fixed 1:1 square crop and you will apply cropping afterward, or when the content in the image (an abstract pattern, a solid color background) is not affected by stretching.

How the Browser Resizes Images — Canvas API

The Image Resizer uses the browser's Canvas API to perform all resizing client-side. The process:

1. The uploaded image is decoded into a bitmap using createImageBitmap()or by drawing to a hidden <img> element.
2. A <canvas> element is created with the target width and height.
3. The image bitmap is drawn to the canvas using drawImage(), which scales the image to fit the canvas dimensions.
4. The canvas is exported to a data URL via toDataURL('image/jpeg', quality)or toBlob(), producing the resized image file.

Canvas resizing quality

The Canvas API uses bilinear interpolation for image scaling — a quality level appropriate for photographic content. When significantly downscaling (reducing to less than 50% of original dimensions), some browsers produce sharper results by downscaling in two steps rather than one (stepping through an intermediate resolution). The tool applies this multi-step approach automatically for large reductions.

For pixel art, screenshots, and images where sharp pixel edges are intentional, canvas bilinear interpolation can introduce blurring. These cases are better handled by image editing software with nearest-neighbor interpolation support.

Choosing the Right Output Format

WebP — the recommended web format

WebP produces files 25–35% smaller than JPEG at equivalent visual quality (using lossy compression) and 20–30% smaller than PNG at equivalent quality (using lossless compression). Browser support is universal as of 2023 (Chrome, Firefox, Safari, Edge, Opera — all major versions in active use support WebP).

The main reason to prefer JPEG over WebP: compatibility with upload systems and platforms that do not accept WebP files. Some older CMS platforms, email marketing tools, and product databases only accept JPEG or PNG. Check your target system's requirements before choosing the format.

JPEG quality settings

JPEG quality is a 0–100 scale controlling the trade-off between file size and visual quality. Recommended settings:

• 90–95: Very high quality, large file. Use for print-ready or archival images.
• 80–85: Recommended for web. Visually indistinguishable from higher quality at typical display sizes.
• 70–79: Acceptable for thumbnails and low-priority images.
• Below 70: Visible JPEG artifacts — blockiness and color banding — become noticeable.

Retina and HiDPI Display Considerations

Modern devices — MacBook Retina displays, iPhone screens, many Android phones — have device pixel ratios of 2× or 3×. This means one CSS pixel is rendered using 2 or 3 physical display pixels. An image that looks sharp on a standard display will look blurry on a retina display if its pixel dimensions are the same as its display size in CSS pixels.

The rule: provide images at 2× the displayed CSS size for retina displays. If an image displays at 600×400 CSS pixels, provide a 1200×800 pixel image for retina quality. At quality 80 JPEG, the additional file size is usually 30–50% larger — often worth the visual improvement for hero images and product photos.

Use the HTML srcset attribute to provide both sizes and let the browser choose based on the device:

<img
  src="hero-600.jpg"
  srcset="hero-600.jpg 1x, hero-1200.jpg 2x"
  width="600"
  height="400"
  alt="Hero image"
/>

Social Media Image Size Specifications

E-commerce Image Standards

Product images have specific requirements on major e-commerce platforms:

• Amazon: Minimum 1000px on the longest side (required for zoom); recommended 2000–3000px. White background (RGB 255,255,255) required for the main image. JPEG format.
• Shopify: Recommended 2048×2048px (square) for product images. Supports JPEG, PNG, and WebP up to 20MB. Square format standardizes the product grid.
• WooCommerce: Configurable; typically 800×800px minimum for catalog images, 1200×1200px for detail views. Square images fill the grid evenly.
• Etsy: Thumbnail displays at 570×456px; recommends 2000px minimum on the longest side. Allows any aspect ratio but square shows best in search results.

Core Web Vitals — LCP Optimization

The Largest Contentful Paint (LCP) metric measures how long it takes for the largest visible element on the page to render. For most websites, this element is a hero image. Common causes of poor LCP related to images:

• Oversized image files — a 3MB hero image takes 6 seconds on a typical 4G mobile connection. Resize to display dimensions and compress: a 1200×630 WebP at quality 80 should be under 150KB.
• Missing width and height attributes — without explicit dimensions, the browser cannot allocate space for the image before it loads, causing layout shifts (also measured by CLS, another Core Web Vitals metric).
• No preloading — LCP images benefit from a <link rel="preload">hint in the <head> to start downloading before the browser parses the image tag.
• Wrong format — WebP at equivalent quality is 25–35% smaller than JPEG. Switching from JPEG to WebP for the hero image directly reduces LCP time.

Privacy — No Uploads, No Storage

The Image Resizer uses the browser's Canvas API to perform all resizing on your device. The image bytes never leave your browser — nothing is sent to a server, nothing is stored between sessions, and the tool functions without an internet connection after the page loads (the JavaScript is already cached locally).

This is especially important for images containing personal or confidential information — medical images, ID documents, business documents, or photos of people. Unlike online tools that process images server-side, this tool provides a verifiable privacy guarantee: client-side JavaScript cannot transmit data to a server without your knowledge.

Frequently Asked Questions

Can I resize a PNG with transparency?

Yes — upload a PNG with transparency (PNG-24 with alpha channel) and select PNG as the output format. The transparency is preserved through the Canvas resizing process. If you select JPEG as the output format, transparency is lost (JPEG does not support alpha channels) and transparent areas are filled with white.

Is there a maximum file size?

No hard limit — the tool is limited by available browser memory. Very large images (files over 20–30MB, or pixel dimensions over 8000×8000) may run slowly or fail on devices with limited RAM. For such images, use a desktop image editor.

Why does my resized image look blurry?

Blurriness after resizing usually occurs when the output dimensions are larger than the input (upscaling). Enlarging a raster image always reduces sharpness — the interpolation algorithm creates pixels by averaging neighboring pixels, which smooths hard edges. For web use, always resize down (to smaller dimensions), not up. If you need a larger version of a small image, use AI upscaling tools that use neural networks to intelligently add detail.

How do I resize multiple images at once?

The current tool processes one image at a time. For batch resizing, use a desktop tool: macOS Preview (select all images → Tools → Adjust Size), Windows Photos or Paint (no native batch resize, but PowerShell scripts can automate it), or dedicated batch tools like IrfanView (Windows) or Photoshop's Image Processor (macOS/Windows).

Does resizing affect the EXIF metadata?

Canvas-based resizing does not preserve EXIF metadata — the output file will not contain camera data, GPS coordinates, or copyright information from the original. If preserving EXIF data is important (for photography archiving, copyright embedding, or geolocation data), use a desktop image editor that has EXIF preservation options.