DEV Community: gatekey

E-commerce Image Sizes in 2026: A Practical Cheat Sheet for Amazon, Etsy, eBay, Shopify & TikTok Shop

gatekey — Mon, 02 Nov 2026 02:59:46 +0000

E-commerce Image Sizes in 2026: A Practical Cheat Sheet for Amazon, Etsy, eBay, Shopify & TikTok Shop

If you sell online, you have probably resized the same photo a dozen times today — once for Amazon, once for Etsy, once for your Shopify product page, and once more for a TikTok Shop video thumbnail. Each marketplace has its own pixel requirements, and getting them wrong means cropped text, rejected listings, or blurry zoomed-in images.

Here is the practical cheat sheet I keep coming back to, plus a faster way to apply it.

The numbers that actually matter

Amazon

Main product image: 1600 × 1600 px (minimum 500 × 500, zoom requires 1000+)
Aspect ratio: 1:1 square
Format: JPEG, PNG, GIF, TIFF — but 85% of buyers use zoom, so go 1600+

Etsy

Listing image: 2000 × 2000 px recommended (3000 × 3000 max)
Aspect ratio: 1:1 or 4:3
Format: JPEG, PNG, GIF (no WebP, no HEIC)

eBay

Gallery / product images: 1600 × 1600 px (minimum 500 × 500)
Aspect ratio: 1:1 square
Format: JPEG, PNG, BMP, GIF, TIFF

Shopify

Product images: 2048 × 2048 px ideal
Aspect ratio: 1:1 works best for the theme grid
File size: Shopify auto-compresses, so upload the largest you have

TikTok Shop

Product listing image: 800 × 800 px or larger
Video cover: 1080 × 1920 px (9:16) for organic content
Format: JPEG, PNG

Pinterest (often overlooked for e-commerce)

Pins: 1000 × 1500 px (2:3) perform better than squares
Product boards: 600 × 900 minimum

Why getting the size right is worth the effort

Amazon and eBay reject or demote listings with images below the minimum.
Etsy's zoom viewer needs 2000+ px or buyers see a blurry close-up.
TikTok Shop thumbnails are cropped aggressively — the wrong aspect ratio cuts off your product.
A consistent 1:1 or 2:3 export also keeps your brand feed looking professional across channels.

The faster workflow

Instead of opening Photoshop or a web compressor for every channel, I keep one browser tab open for this: imgsize (https://www.imgsize.cc) — a free, browser-only image resizer with 85+ presets covering these exact marketplaces. You pick the platform (Amazon, Etsy, eBay, Shopify, TikTok Shop and more), and it resizes and crops your photo to that platform's required pixel size, max file size, and accepted format. Everything runs locally in your browser, so product photos never get uploaded anywhere — which also matters if you work with unreleased designs.

You can even export one photo at all 17 marketplace specs at once as a ZIP, instead of manually duplicating tabs.

TL;DR

Platform	Size	Ratio
Amazon	1600×1600	1:1
Etsy	2000×2000	1:1 / 4:3
eBay	1600×1600	1:1
Shopify	2048×2048	1:1
TikTok Shop	800×800+	1:1
Pinterest	1000×1500	2:3

Save the table, resize once per listing, and stop losing time to pixel-requirement guesswork.

Resize and Crop Images in the Browser with the Canvas API — No Server, No Upload

gatekey — Thu, 29 Oct 2026 15:06:42 +0000

Why process images on the client at all

Most image tools upload your file to a server, resize it there, then send a new file back. That works, but it has three downsides: your photos leave the device (privacy), every request costs round-trip latency (speed), and the operator pays storage and bandwidth (cost).

You can do the whole resize and crop inside the browser with the Canvas 2D API. Nothing is sent over the network, processing finishes in milliseconds, and there is no backend to scale. That is exactly how imgsize works: pick a platform preset, drop the file, get the sized image back locally.

The pipeline in five steps

The flow stays the same whether you resize to a preset, a free crop, or a custom width and height:

Read the selected File from an <input type="file">.
Decode it with createImageBitmap().
Create a canvas sized to the target dimensions.
Draw the cropped source region onto it with the nine-argument drawImage().
Export a Blob, make an object URL, and trigger a download.

A minimal, runnable example

const file = document.querySelector('input[type=file]').files[0];

// 1. Decode the file on the client
const bitmap = await createImageBitmap(file);

// 2. Target canvas: 1080 x 1080 (square social post)
const canvas = document.createElement('canvas');
canvas.width = 1080;
canvas.height = 1080;
const ctx = canvas.getContext('2d');

// 3. High-quality smoothing
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';

// 4. Crop the source region, then scale it to the target.
//    drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
ctx.drawImage(
  bitmap,
  sx, sy, sw, sh,   // source crop rectangle in original pixels
  0, 0, 1080, 1080  // destination rectangle on the canvas
);

bitmap.close(); // release decoder resources

// 5. Export and download
const blob = await new Promise((resolve) =>
  canvas.toBlob(resolve, 'image/png')
);
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'resized.png';
a.click();
URL.revokeObjectURL(url); // free the object URL after use

That is the core. Everything else is around these five calls.

The nine-argument drawImage() is doing two jobs at once

drawImage() with nine arguments combines cropping and scaling in one call:

The first four numbers describe which rectangle of the source image to take (sx, sy, sw, sh).
The last four describe where it lands on the destination canvas (dx, dy, dw, dh).

If sw/sh does not match the target aspect ratio, the browser stretches the crop into dw/dh. For a clean output you calculate the crop yourself so there is no distortion — for example, take a centered square out of a landscape photo before drawing it onto a square canvas.

Real-world details that break a naive version

These are the details that a tutorial snippet usually skips but a usable tool needs.

1. Map screen coordinates back to original pixels

When the user drags a crop box on screen, your coordinates live in a scaled preview. Before drawImage(), convert them back to source pixels using the preview's scale factor:

const sx = Math.max(0, (crop.x - imageRect.x) / imageRect.width * bitmap.width);
const sy = Math.max(0, (crop.y - imageRect.y) / imageRect.height * bitmap.height);
const sw = Math.min(bitmap.width - sx, crop.width / imageRect.width * bitmap.width);
const sh = Math.min(bitmap.height - sy, crop.height / imageRect.height * bitmap.height);

If you skip this, the crop drifts whenever the preview is zoomed or panned.

2. Fill an opaque background where transparency is not allowed

Marketplace listings (Amazon, Etsy) do not accept transparency. Before drawing, paint the canvas white (or neutral gray) so transparent edges do not turn black:

ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(bitmap, sx, sy, sw, sh, 0, 0, canvas.width, canvas.height);

Social presets, on the other hand, keep the source transparency, so the background fill should be conditional on the target format.

3. Watch for silent MIME downgrades

In some browsers and WebViews, canvas.toBlob('image/gif') silently returns a PNG instead. Before trusting the export, check blob.type against the requested MIME and surface a clear error rather than handing the user a mislabeled file.

4. Release resources

Close each decoded bitmap with bitmap.close(), and call URL.revokeObjectURL() on old preview URLs so memory does not accumulate across repeated resizes.

5. PNG ignores the quality argument

Only JPEG honors the quality parameter in toBlob() / toDataURL(). PNG compression losslessness does not take a quality number, so pass quality only when exporting JPEG.

When to reach for a ready-made tool

If you need 80+ platform presets, one-click background fill, and batch exports without writing this yourself, imgsize runs the same client-side Canvas pipeline in the browser: no upload, no login, no watermark. You can try it at https://www.imgsize.cc.

If you are building your own editor, the five-step pipeline above is the whole foundation — the rest is crop UI, preset metadata, and export options.

What part of client-side image processing have you run into trouble with? Drop it in the comments.

The 8 Image Dimensions Every Creator Actually Needs (And How to Get Them in Seconds)

gatekey — Mon, 26 Oct 2026 01:18:25 +0000

Every creator knows the frustration: you finish a perfect photo, then realize Instagram wants 1080×1080, TikTok wants 1080×1920, LinkedIn wants 1200×627, and Amazon's main image has to be exactly 2000×2000 or your listing gets penalized.

Instead of Googling each spec and opening an image editor every time, I keep a cheat sheet of the 8 dimensions I actually use. Here it is.

The 8 image dimensions every creator needs

Platform	Use case	Size (px)
Instagram Post	Feed post	1080 × 1080
Instagram Story	Story / Reel cover	1080 × 1920
TikTok	Video thumbnail / cover	1080 × 1920
YouTube Thumbnail	Video thumbnail	1280 × 720
LinkedIn Post	Article / feed image	1200 × 627
Facebook Cover	Page cover photo	1640 × 924
Amazon Main Image	Product listing	2000 × 2000
Etsy Listing	Product photo	2000 × 2000

These are the specs that actually matter. Everything else is a variant you'll rarely need.

Why resizing manually is a waste of time

Open an editor → import the image → find the canvas settings → enter the new dimensions → drag the image to fit → export → repeat for the next platform.

For one photo across five platforms, that's five separate exports. Multiply that by ten products a day, and you've just lost an hour.

The faster way: browser-only resizing

I built imgsize specifically for this workflow. It runs entirely in your browser — your photos never leave your device.

Here's the 10-second process:

Open imgsize
Pick the platform preset (Instagram, TikTok, LinkedIn, Amazon, Etsy, etc. — 70+ built in)
Drop your image
Download the perfectly sized result

No upload. No login. No watermark. No waiting for a server to process your file.

The best part: if you need the same image for multiple platforms, you can export them all in a ZIP — one drop, multiple exact sizes, done.

Stop guessing dimensions

Bookmark this post or save the imgsize link next time you're about to publish. The goal isn't to learn every spec by heart — it's to stop caring about the math and just get the right output.

What platform dimensions do you find yourself looking up most often? Drop it in the comments and I'll add it to the preset list.

Resize Images for Any Platform Without Uploading: A Browser-Only Guide

gatekey — Fri, 23 Oct 2026 08:12:50 +0000

Every creator knows the pain: each platform wants a different image size. Instagram 1080x1080, TikTok 1080x1920, Twitter 1600x900, YouTube 1280x720, LinkedIn 1200x627... Resizing one photo for five platforms usually means opening an editor, remembering each spec, and exporting five times. Worse, most online "resize" tools upload your image to a server first - which is slow, and a privacy concern if the photo isn't meant to leave your device.

That's why I built imgsize, a 100% browser-based image resizer. Your image never leaves your device. Pick a platform preset (70+ included), and it's resized instantly with the exact dimensions that platform wants.

Why browser-only processing matters

No uploads - your photos stay on your device. Great for personal documents, ID photos, or anything sensitive.
No login, no signup - just open the page and resize.
Fast - processing happens locally, so there's no waiting on a server round-trip.
Works anywhere - desktop, tablet, phone; no install needed.

A quick example

Say you need a cover for an Instagram post:

Open imgsize
Choose the Instagram Post preset (1080x1080)
Drop your image
Download - done. Nothing was uploaded.

Under the hood

It uses the browser's built-in canvas and image APIs, so everything runs client-side. No server, no tracking pixels, no file left behind.

If you're a web developer, you might also like the approach: it's a nice example of doing image processing entirely in the browser with the Canvas API.

Got a platform I'm missing? The preset list is always growing - let me know and I'll add it.