DEV Community

Magill Anway
Magill Anway

Posted on

Resize Images Before You Upload: A Local Checklist for Faster Pages and Fewer Leaks

Answer first: If you are about to drop a phone photo or a 4K screenshot into WordPress, Drive, or a ticket system, resize (and lightly compress) in your browser on your machine first. Cloud optimizers are convenient — and they are also a third party that briefly holds the exact pixels you care about. Below is a practical checklist plus a local workflow.

Why this keeps showing up

Indie builders keep shipping the same pattern: Canvas / WASM tools that refuse to upload. Roundups of “compress before upload” and WordPress Media Library horror stories circulate every few months. The useful takeaway is not another brand name — it is a habit: treat the image as sensitive until it is the right size, then send it once, to the destination you chose.

Pre-upload checklist (2 minutes)

  1. Know the destination size. Featured image, OG card, avatar, product tile — pick a max width before you open any tool.
  2. Prefer local resize over “upload then hope the plugin fixes it.” Fewer hops means fewer copies and fewer upload-limit failures.
  3. Watch the Network tab. Open DevTools → Network, clear the log, process a non-sensitive test image. Pass = no multipart POST carrying your photo to a third-party API.

  4. Airplane-mode sanity check. After page assets load, go offline and retry. If resize still works, upload-to-server architecture is off the table for that action.

  5. Name the output clearly. hero-1200w-2026-09-18.jpg beats IMG_4832.jpg when you attach it later.

A local resize workflow

Step 1 Cap the long edge

Most blog heroes do not need 4000px. Cap to 1200–1600px on the long edge unless print quality matters.

Step 2 — Resize in the tab

Change dimensions locally. Closing the tab should clear in-memory copies; the downloaded file is the artifact you keep.

Step 3 — Optional light compress

If the file is still huge, compress lightly after resize — still local — then upload once to Media Library / Drive / the real destination.

Step 4 Send once

Skip the detour through a random “free online compressor” host for photos you would not email to a stranger.

One browser-local starting point

When you need an on-device resizer without creating an account, this Image Resizer runs in the tab (files stay on your device):

https://www.lizecheng.net/image/image-resizer/?utm_source=devto&utm_medium=article&utm_campaign=lizely_daily_20260918&utm_content=image-resizer

(That is the only product link in this post.)

What “good enough” looks like

Scenario Local move
Phone photo → blog hero Resize to ~1200w → upload once
4K screenshot → ticket Cap long edge → optional compress → attach
Hit upload_max_filesize Resize first; do not fight PHP limits with a cloud hop
Sensitive ID / face photos Never use a cloud compressor “just this once

Closing

Image resize is a solved UX problem. The open question is whether the bytes leave your device on the way. Prefer tools you can verify with Network + offline checks — and keep cloud converters for files you would not mind a stranger viewing.

Top comments (0)