Image resizer

The Image Resizer is a powerful bulk image processing tool that resizes, crops, rotates, and watermarks images. It supports 10 input formats (JPG, PNG, WEBP, AVIF, GIF, BMP, TIFF, ICO, HEIC, HEIF) and 8 output formats. Choose from 3 resize methods: exact dimensions, percentage scaling, or 12 social media platform presets. Add global watermarks (text or logo) to all images, or apply individual watermarks per image. All processing happens in your browser - no uploads to any server.

The Image Resizer has a comprehensive interface with multiple panels for configuring resize settings, output options, and watermarks.

1

Drop zone (initial state)

Before adding images, you see a large drop zone for uploading files. This includes the upload icon, SELECT FILES button, supported format badges (JPG, PNG, WEBP, AVIF, GIF, BMP, TIFF, ICO, HEIC, HEIF), and capability badges (Multiple files, Any size).

Initial drop zone for uploading images

2

Resize method selector

After adding images, the Resize method section appears with 3 mode buttons:
• By dimensions: set exact width & height
• By percentage: scale by percentage
• Platform presets: social media sizes

3

Settings panels

Below the resize method, two main panels:
• Left panel: TARGET DIMENSIONS (or SCALE PERCENTAGE or PLATFORM PRESETS) + OUTPUT FORMAT
• Right panel: EXPORT OPTIONS with watermark settings

4

Add more files bar

A bar showing Drop more files or click to browse allows adding additional images to your batch at any time.

5

Image gallery

Below the settings, thumbnail previews of all uploaded images.
Each has action buttons: Crop, Rotate, Watermark, Download, and Delete.

6

Bottom bar

At the very bottom:
• RESIZE IMAGES button: processes all images with current settings
• Statistics: shows total images, original size, and estimated output size

7

Favorites tab

On the left sidebar (desktop) or bottom bar (mobile), a heart icon lets you add this tool to your favorites for quick access from the Command Palette.

Complete interface overview with all key sections

The initial drop zone accepts multiple images in various formats. You can drag and drop or click to browse.

1

Drop zone elements

The drop zone displays:
• Upload icon
• Drop images here: main instruction text or click to browse
• SELECT FILES button: opens file picker

2

Info badges

Two badges indicate capabilities:
• Multiple files: you can upload many images at once
• Any size: no file size restrictions

3

Supported input formats

10 input formats shown as badges at the bottom:
• JPG: most common photo format
• PNG: graphics with transparency
• WEBP: modern web format
• AVIF: newest efficient format
• GIF: animated images
• BMP: bitmap images
• TIFF: high-quality/print
• ICO: icon files
• HEIC: iPhone photos
• HEIF: high efficiency format

4

Upload methods

Three ways to add images:
• Drag and drop: drag files from your computer onto the drop zone
• Click SELECT FILES: opens your system file picker
• Click anywhere in the drop zone - also opens file picker

Drop zone for uploading images via drag-drop or file picker

5

Add more images

After initial upload, a Drop more files or click to browse bar appears below the settings. Use this to add additional images to your batch at any time.

The Resize method section offers three different approaches to resizing your images. Each method shows different controls below.

The TARGET DIMENSIONS panel lets you specify exact pixel dimensions for your resized images.

1

Panel header

The panel shows TARGET DIMENSIONS with a ruler icon in orange.

2

Width input

The first input field sets the width:
• Enter a number (e.g., "800")
• Value represents pixels by default
• Leave empty to auto-calculate from height (with aspect lock)

3

Multiply symbol

An × symbol separates width and height, indicating "width by height" (e.g., 800 × 600).

4

Height input

The second input field sets the height:
• Enter a number (e.g., "600")
• Value represents pixels by default
• Leave empty to auto-calculate from width (with aspect lock)

5

Unit selector

A dropdown next to height lets you select the unit:
• px: pixels (default, most common)
• mm: millimeters
• cm: centimeters
• inch: inches

6

Aspect ratio lock

The padlock button toggles aspect ratio lock:
• Locked: changing width auto-calculates height (and vice versa) to maintain proportions
• Unlocked: width and height are independent (may cause distortion)

Locked by default to prevent accidental distortion.

By dimensions mode with width, height, and aspect ratio lock

The SCALE PERCENTAGE panel provides a simple slider to resize images by percentage.

1

Panel header

The panel shows SCALE PERCENTAGE with a percent icon.

2

Percentage slider

A horizontal slider spans the panel:
• Drag left to reduce size (minimum 10%)
• Drag right to increase size (maximum 200%)
• The slider handle (orange dot) shows current position

3

Percentage display

The current percentage is shown in orange text on the right side (e.g., "100%"). This updates as you drag the slider.

4

How percentage works

The percentage is relative to the original image size:
• 100%: original size (no change)
• 50%: half the original size
• 200%: double the original size (maximum)
• 10%: one-tenth size (minimum)

5

Maintains proportions

Percentage scaling always maintains aspect ratio. A 1000×500 image at 50% becomes 500×250. No distortion possible.

By percentage mode with slider for proportional scaling

The PLATFORM PRESETS panel offers 12 pre-configured sizes for popular social media platforms. One click sets the perfect dimensions.

1

Panel header

The panel shows PLATFORM PRESETS with a grid icon in orange.

2

Instagram presets

• Instagram square: 1080 × 1080
• Instagram portrait: 1080 × 1350
• Instagram story: 1080 × 1920

3

TikTok preset

• TikTok video: 1080 × 1920

Vertical full-screen format for short-form video content.

4

Facebook presets

• Facebook post: 1200 × 630
• Facebook cover: 851 × 315

5

X/Twitter presets

• X/Twitter post: 1600 × 900
• X/Twitter header: 1500 × 500

6

YouTube preset

• YouTube thumbnail: 1280 × 720

Standard 16:9 HD thumbnail size.

7

LinkedIn preset

• LinkedIn post: 1200 × 627

8

Pinterest preset

• Pinterest pin: 1000 × 1500

Tall vertical format optimized for Pinterest feed.

9

Threads preset

• Threads post: 1080 × 1350

Vertical portrait format optimized for Threads feed.

10

Preset selection

Click any preset button to select it. The button highlights when selected. Your images will be resized to those exact dimensions.

12 platform presets for social media optimization

The OUTPUT FORMAT panel lets you choose the file format for your resized images. Eight formats are available.

1

Panel header

The panel shows OUTPUT FORMAT with an export icon in orange.

2

Format grid

8 format buttons arranged in 2 rows of 4:
• Row 1: JPG, PNG, WebP, AVIF
• Row 2: GIF, BMP, TIFF, ICO

3

JPG format

JPG (JPEG):
• Best for: photographs, complex images
• Lossy compression (smaller files)
• No transparency support
• Universal compatibility

4

PNG format

PNG (selected by default):
• Best for: graphics, screenshots, logos
• Lossless compression (larger files)
• Supports transparency
• Excellent quality

5

WebP format

WebP:
• Best for: web images
• Excellent compression (smaller than JPG/PNG)
• Supports transparency and animation
• Modern browser support

6

AVIF format

AVIF:
• Best for: cutting-edge web optimization
• Superior compression (smallest files)
• Supports transparency
• Newer browser support required

7

GIF format

GIF:
• Best for: simple animations, low-color graphics
• Supports animation
• Limited to 256 colors
• Transparency support (1-bit)

8

BMP, TIFF, ICO

Additional formats:
• BMP: uncompressed bitmap (large files)
• TIFF: high quality for print/archival
• ICO: favicon/icon format for websites

9

Selection

Click any format button to select it. The selected format is visually highlighted. All output images will use this format.

8 output format options with PNG selected

The EXPORT OPTIONS panel on the right side contains settings for watermarks, file naming, metadata, and GIF handling.

1

Panel header

The panel shows EXPORT OPTIONS with a gear icon in orange.

2

Global watermark section

At the top:
• Apply global watermark checkbox
• When enabled, shows TEXT and POSITION & STYLE settings
• Watermark is applied to ALL images in the batch

3

Auto rename outputs

Auto rename outputs checkbox (checked by default):
• Pattern field showing: [filename]_resized
• Variable tags available: [filename], [width], [height], [index], [date]
• Automatically renames output files based on pattern

4

Rename variables explained

Click any variable tag to add it to the pattern:
• [filename]: original filename without extension
• [width]: output width in pixels
• [height]: output height in pixels
• [index]: sequential number (1, 2, 3...)
• [date]: current date

5

Keep EXIF Metadata

Keep EXIF Metadata checkbox (unchecked by default):
• Description: "Preserves camera info, GPS location, and other metadata"
• When checked: original metadata is preserved
• When unchecked: metadata is stripped (recommended for privacy)

6

Export all GIF frames

Export all GIF frames checkbox (checked by default):
• Description: "Extracts individual frames when converting to non-GIF formats"
• When checked: animated GIFs export each frame as separate image
• When unchecked: only first frame is exported

Export options with watermark, rename, and metadata settings

The global watermark settings apply a watermark to ALL images in your batch. You can use text, an image logo, or both.

1

Enable global watermark

Check Apply global watermark to reveal the watermark settings. When enabled, the APPLY GLOBAL WATERMARK button becomes active.

2

TEXT section

The TEXT section:
• Input field with placeholder: "Your name"
• Enter your watermark text (e.g., your name, website, copyright)
• Leave empty if using only logo watermark

3

POSITION & STYLE section

The POSITION & STYLE section contains positioning and styling options.

4

Position grid

A 3×3 grid of position buttons (9 positions):
• Top row: top-left, top-center, top-right
• Middle row: center-left, center (default, orange), center-right
• Bottom row: bottom-left, bottom-center, bottom-right

Click any position to place your watermark there.

5

Font Size

Font Size setting:
• Input field showing size in pixels (default: 24)
• "px" label indicates pixels
• Adjust for larger or smaller watermark text

6

Opacity

Opacity setting:
• Input field showing percentage (default: 80)
• "%" label indicates percentage
• 100% = fully visible, 0% = invisible
• 50-80% is typical for subtle watermarks

7

Color

Color setting:
• Color swatch (default: white/light)
• Click to open color picker
• Reset button restores default color
• White or black work best on most images

8

Logo option

Or use image section on the right:
• Upload logo button
• Click to upload an image file as watermark
• Logo replaces or supplements text watermark
• Useful for brand logos

9

Apply button

APPLY GLOBAL WATERMARK button:
• Click to apply watermark settings to all images
• Updates preview thumbnails
• Settings are saved for the batch

Global watermark settings for batch processing

At the bottom of the interface, thumbnail previews show all uploaded images. Each thumbnail has action buttons for individual editing.

1

Thumbnail display

Each uploaded image appears as a thumbnail card showing:
• Preview of the image
• Filename below (e.g., "IMG_2986.jpeg")
• Action buttons overlaid on top

2

Action buttons

Four action buttons appear on each thumbnail (left to right):
• Crop: open crop modal
• Rotate: open rotate modal
• Download: download this image
• Delete: remove from batch

3

Crop button

Click the crop icon to open the Crop image modal. Crop this specific image before resizing. Covered in detail in the Crop modal section.

4

Rotate button

Click the rotate icon to open the Rotate image modal. Rotate or flip this specific image. Covered in detail in the Rotate modal section.

5

Download button

Click the download icon to download this single image with current resize settings applied. Useful for downloading one image without processing the entire batch.

6

Delete button

Click the red trash icon to remove this image from the batch. The image is deleted immediately - no confirmation dialog. Other images remain.

7

Individual watermark

Some tools also include a watermark button per image to add individual watermarks separate from the global watermark. This allows customizing watermarks per image.

Image gallery with per-image action buttons

The Crop image modal allows you to select and crop a specific area of an individual image before resizing.

1

Modal header

The modal shows Crop image with a crop icon. An X button in the top right closes without applying changes.

2

Image preview

The main area shows your image with a crop overlay:
• The selected area is fully visible
• Areas outside the selection are dimmed/checkered
• A rule of thirds grid (9 sections) helps with composition

3

Crop selection

The blue-bordered rectangle is your crop selection:
• Drag inside to move the selection
• Drag corners/edges to resize the selection
• Only the area inside will be kept

4

Aspect ratio buttons

5 aspect ratio buttons below the preview:
• Free: no constraint, any shape
• Square: 1:1 ratio (perfect square)
• 16:9: widescreen/video format
• 4:3: traditional photo format
• 3:2: DSLR photo format

5

Using aspect ratios

Click an aspect ratio to constrain the crop selection to that ratio. The selection maintains the ratio as you resize it. Click Free to remove constraints.

6

Action buttons

Two buttons at the bottom:
• CANCEL: close without cropping
• APPLY CROP: apply the crop and close

7

After cropping

Once you apply crop:
• The thumbnail updates to show the cropped version
• Resize settings are applied to the cropped area
• You can crop again if needed

Crop modal with aspect ratio presets and rule of thirds grid

The Rotate image modal allows you to rotate and flip an individual image before resizing.

1

Modal header

The modal shows Rotate image title. An X button in the top right closes without applying changes.

2

Image preview

The main area shows your image with current rotation applied. Black bars may appear on sides to show the actual bounds.

3

Rotation buttons

4 buttons for rotation and flipping:
• Rotate left: rotate 90° left
• Flip horizontal: mirror horizontally
• Flip vertical: mirror vertically
• Rotate right: rotate 90° right

4

Current rotation display

Below the buttons, the current rotation angle is shown in orange (e.g., "0°"). This updates as you click rotation buttons.

5

Using rotation

Click rotation buttons to transform the image:
• Each rotate click adds/subtracts 90°
• Flips toggle on/off
• Preview updates immediately
• Combine rotations and flips as needed

6

Action buttons

Two buttons at the bottom:
• CANCEL: close without rotating
• APPLY ROTATION: apply transformation and close

7

After rotating

Once you apply rotation:
• The thumbnail updates to show the rotated version
• Resize settings are applied to the rotated image
• You can rotate again if needed

Rotate modal with 90° rotation and flip options

The Add watermark modal allows you to add a watermark to a single image, separate from the global watermark. This gives you per-image customization.

1

Modal header

The modal shows Add watermark with a stamp icon. An X button in the top right closes without applying.

2

Image preview

The main area shows your image with watermark preview. The watermark (text or logo) is displayed in real-time as you adjust settings. In the example, "Sample Watermark" appears centered on the image.

3

WATERMARK TEXT section

Left column:
• Text input field (e.g., "Sample Watermark")
• Enter your desired watermark text
• Preview updates as you type

4

Text styling

Below the text input:
• FONT SIZE: slider + input (e.g., 24 px)
• FONT OPACITY: slider + input (e.g., 80 %)
• COLOR: color swatch + hex input (e.g., #ffffff)

Sliders have orange handles for easy adjustment.

5

OR USE LOGO section

Right column: OR USE LOGO:
• Upload logo button - click to upload a logo image
• Use an image file instead of text
• Good for brand logos

6

Logo styling

Below the upload button:
• LOGO SIZE: slider + input (e.g., 20 %)
• LOGO OPACITY: slider + input (e.g., 80 %)

Size is percentage of image dimensions.

7

Action buttons

Two buttons at the bottom:
• CANCEL: close without applying
• APPLY WATERMARK: apply and close

8

Global vs Individual

Key difference:
• Global watermark: applies same watermark to ALL images
• Individual watermark: applies only to THIS specific image

Use individual when you need different text/position per image.

Individual watermark modal for per-image customization