Skip to content

[PROPOSAL] - Image Resizer & Format Converter #23

@github-actions

Description

@github-actions

Existing Coverage Check

Reviewed before proposing:

This is net-new. Image resizing and format conversion are within AGENTS.md's stated research focus ("Client-side image compression, SVG optimization, EXIF stripping") and the broader "Media Utilities" category. No existing spec, issue, or live tool in this repo covers static image resizing or format conversion. Spec draft created at specs/005-image-resizer-converter/spec.md.


Specify Draft Summary

Proposed spec path: specs/005-image-resizer-converter/spec.md

Problem: Resizing images and converting between formats (JPEG, PNG, WebP) is the most common image editing task non-technical users perform. The dominant free tools either upload to a server (Picresize, ResizeImage.net, ImageResizer.com) or impose tight file-count and file-size limits (Adobe Express free tier: 5 exports/month). A clean, private, batch-capable browser tool does not exist as a standalone open-source utility.

Users: Non-technical users preparing images for email, web upload, or social media; product managers creating screenshots; small business owners handling product photography; anyone dealing with "this image is too large / wrong format" situations.

Scope (3 prioritised stories):

Priority Story Description
P1 Resize Image Load image → set target dimensions or percentage scale → preview → download
P2 Convert Format Select output format (JPEG, PNG, WebP) → set quality → preview file size estimate → download
P3 Batch Process Load multiple images → apply uniform settings → download all as zip

Key requirements: aspect ratio lock (default on, unlockable), percentage scale input, JPEG/PNG/WebP output, quality slider with live file-size estimate, before/after preview, transparency-to-JPEG fill warning, batch processing, zip download for batches, per-file error reporting, clear/reset, 100% browser-local.

Acceptance criteria:

  • SC-001: Zero bytes of image content transmitted to any external server
  • SC-002: Single image resize + convert ready in under 3 seconds for files up to 10 MB
  • SC-003: Full single-image workflow completable in under 30 seconds without training
  • SC-004: Output dimensions match specified values exactly for whole-number inputs
  • SC-005: Batch of 10 images (each under 5 MB) packaged for download in under 30 seconds
  • SC-006: Functions in latest 2 major versions of Chrome, Firefox, Safari

The Gap

Resizing and format-converting images is a daily need for non-technical users — and nearly every mainstream tool for it either uploads files or puts core features behind a paywall or account:

  • ResizeImage.net: Server-side upload; free tier limits to one image at a time; no batch without account.
  • Picresize.com: Server-side upload, ad-heavy, dated UI; no batch.
  • Adobe Express (image resize): 5 free exports/month, then $9.99/month; requires Adobe account.
  • Canva: Account required for download; free tier adds Canva watermark on some exports.
  • Bulk Resize Photos (bulkresizephotos.com): Browser-based but no format conversion and limited WebP support; no file-size preview.

The core Canvas API resize + toBlob() export path is a few dozen lines of JavaScript. There is no technical justification for server upload or account requirements in this category.

Competitor Evidence

Tool Problem
ResizeImage.net Server upload required, one file at a time on free tier
Picresize.com Server upload, ad-heavy, no batch
Adobe Express resize 5 exports/month free, then $9.99/month, requires account
Canva resize Account required, watermark on some free exports
Bulk Resize Photos Browser-based but no format conversion, limited WebP

Search phrases users type: resize image online free, compress image size online, convert PNG to JPG online free, resize image without losing quality online, batch resize images free, convert image to WebP online free, reduce image file size online

The Tech

API / Capability Role
Canvas API Draw source image at target dimensions; apply background fill for transparency conversion
canvas.toBlob() Export canvas content as JPEG, PNG, or WebP binary with quality parameter
File API Load image files from disk without upload
Image element Decode source file into drawable bitmap
Blob + URL.createObjectURL Trigger local download of resized/converted output
JSZip (vendored) Package batch output files into a zip archive

Ships as tools/image-resizer-converter.html + tools/image-resizer-converter/main.js + tools/image-resizer-converter/style.css. No WASM or heavy dependencies — pure Canvas API. JSZip is already a candidate for the PDF Merger & Splitter tool, enabling shared vendoring.

Usability Controls

  • Aspect ratio lock: On by default; shows a lock icon; can be toggled to set width and height independently
  • Scale mode toggle: Switch between fixed pixels and percentage scale
  • Format selector: JPEG, PNG, WebP dropdown
  • Quality slider: 1–100 for JPEG and WebP; live file-size estimate updates as slider moves
  • Before/after preview: Side-by-side original vs. output at chosen settings, with dimension and file size labels
  • Transparency warning: Banner shown when converting PNG/WebP with alpha to JPEG, with a background color picker (default white)
  • Batch cards: Each loaded file shown as a card with thumbnail, original dimensions, and per-file override toggle
  • Batch progress: Visual progress bar during multi-file processing
  • Batch error summary: Post-processing report listing succeeded and failed files
  • Reset / Clear: Restore default settings; remove all loaded files
  • Safe defaults: Aspect ratio locked, JPEG quality 85, same dimensions as source

Complexity: 3 / 10

Canvas resize and format conversion is one of the simplest browser operations available — ctx.drawImage(img, 0, 0, w, h) + canvas.toBlob(callback, 'image/jpeg', quality). The moderate complexity comes from the batch UI (file cards, progress tracking, zip packaging) and the before/after preview layout. No WASM, no Web Workers, no binary pipeline required for typical use cases.

Generated by Market Research Discovery ·

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions