Your images stay on your device
The resizer is a script that runs in this page. It reads your files with the browser's File API, decodes them, draws them onto a canvas at the new size and encodes the result. There's no server step and no upload. Once the page has loaded you can go offline and it keeps working. The download links point at files held in your browser's memory, and they're released when you clear the results, resize again or leave the page.
A side effect worth knowing: the output keeps none of the original's metadata. Camera details and GPS location in the EXIF data are not copied. The photo's orientation is applied first, the same way your phone shows it4, so a portrait photo stays portrait.
Fit, cover or contain
Take a 4,000 × 3,000 camera photo (4:3) and the square product preset, 2,048 × 2,048:
| Mode | Output | What happens |
|---|---|---|
| Fit (pad) | 2,048 × 2,048 | The whole photo is scaled to 2,048 × 1,536 and centred, with 256 px of pad colour above and below. Nothing is cut. |
| Cover (crop) | 2,048 × 2,048 | The centre 3,000 × 3,000 of the photo is kept and scaled down; 500 px go from each side. |
| Contain (shrink only) | 2,048 × 1,536 | Scaled down to fit inside the box and left at its own shape. No padding. An 800 × 800 image stays 800 × 800; contain never enlarges. |
Fit suits product photos: every image in a collection grid ends up the same shape, which is what Shopify recommends1, and no part of the product is cut off. Pad with white or with the photo's own background colour. Cover suits banners and collection images, where a full-bleed crop looks right; pick which edge to keep if the subject isn't centred. Contain suits logos and oversized files, where you only want the image smaller.
Fit and cover enlarge an image that's smaller than the target. The tool warns you when that happens, because enlarging adds pixels and no detail. Tick "Don't enlarge small images" to keep a small photo at its size and pad around it instead.
Presets and where they come from
Each preset comes from our Shopify image sizes guide, which checks every number against Shopify's help pages and the Dawn and Horizon theme source.
| Preset | Size | Ratio | Why |
|---|---|---|---|
| Product image, square Fit (pad) | 2,048 × 2,048 | 1:1 | Shopify: 2048 x 2048 px square product images usually display best. |
| Product image, portrait 4:5 Fit (pad) | 2,048 × 2,560 | 4:5 | Dawn and Horizon crop portrait cards to 4:5 (ratio 0.8). 2048 px wide, like the square recommendation. |
| Collection image, square Cover (crop) | 2,048 × 2,048 | 1:1 | Dawn's collection list and Horizon's collection image block default to square. Same limits as product images. |
| Full-width banner or slideshow, 16:9 Cover (crop) | 3,840 × 2,160 | 16:9 | 3840 px is the widest image Dawn's image banner and slideshow, and Horizon's hero and slideshow, request. |
| Short full-width banner, 3:1 Cover (crop) | 3,840 × 1,280 | 3:1 | Same 3840 px width. A shorter ratio for 'Adapt to first image' banners that shouldn't fill the screen. |
| Horizon mobile hero, 4:5 Cover (crop) | 1,600 × 2,000 | 4:5 | Horizon's optional separate mobile image is requested up to 1600 px wide. |
| Logo for Dawn (fits 600 x 600) Contain (shrink only) | 600 × 600 | 1:1 | Dawn's logo width goes up to 300 px and its srcset asks for 2x, so 600 px wide stays sharp. |
| Logo for Horizon (fits 1200 x 300) Contain (shrink only) | 1,200 × 300 | 4:1 | Horizon sizes the logo by height, up to 100 px, and asks for 3x, so 300 px tall stays sharp. |
| Favicon Cover (crop) | 32 × 32 | 1:1 | Shopify: 32 x 32 px. Dawn and Horizon request the favicon at 32 x 32. |
| Blog featured image, 16:9 Cover (crop) | 3,840 × 2,160 | 16:9 | Dawn requests article images up to 3000 px wide, Horizon up to 3840. Shopify gives no pixel size. |
| Shrink under the 20 MP limit (fits 4000 x 4000) Contain (shrink only) | 4,000 × 4,000 | 1:1 | Shopify's own example resizes 5000 x 5000 (25 MP) to 4000 x 4000 (16 MP) to clear the 20 MP cap. |
Format and quality
What you upload isn't what shoppers download. Shopify re-encodes images on delivery and picks WebP, AVIF or another format for each browser3. So the upload format mostly decides how big the upload is and whether it clears the 20 MB limit1. JPEG at 80 to 90 is a good default for photos (the tool starts at 85). PNG is lossless and keeps transparency, so use it for logos, favicons and cut-out products on a transparent background. WebP gives smaller files at the same quality and also keeps transparency.
Not every browser can save every format. When a browser can't encode the format you asked for, the canvas falls back to PNG5. The tool checks the file it actually got, names it with the right extension, and tells you when it happened.
When you don't need to resize
Shopify makes the display sizes for you. Themes request each image at the widths they need, up to 5,760 px3, and Shopify's own advice is to upload the best quality you have, without compressing it first2. Resizing a good 2,048 px photo down to 800 px only throws detail away. Resize when one of these is true:
- The file is rejected: over 20 MB, or over 20 MP. The "Shrink under the 20 MP limit" preset fits it inside 4,000 × 4,000, the same fix Shopify's help page uses2.
- Your product photos are different shapes and the collection grid looks ragged. Fit them all to one ratio.
- A banner needs a set ratio, for example 3:1 for a section set to "Adapt to first image".
- You need an exact small file: a 32 × 32 favicon, or a logo at a size you control.
- You want smaller uploads over a slow connection.
Limits
- Source images up to 100 megapixels and 200 MB. Bigger images can run a phone's browser out of memory, so the tool stops and says so.
- Output up to 20 megapixels and 8,192 px on a side, which is Shopify's lowest megapixel limit. Some phones can't make canvases that large; if yours can't, the tool reports it rather than saving a blank file.
- HEIC and TIFF files open only in browsers that can decode them. If yours can't, export a JPEG first.
- Animated GIF and WebP files are saved as a still image of the first frame.
- Resizing is done with the browser's high-quality smoothing, halving in steps for big reductions. For print-grade work, a desktop editor gives you more control.
FAQ
Are my images uploaded anywhere?
No. Everything happens in your browser. The page makes no network requests with your files, and you can use it offline once it has loaded.
What size should I resize Shopify product images to?
2,048 × 2,048 px, the size Shopify says usually displays best for square product images. Use Fit so the whole product stays in frame. If your theme uses portrait cards, use the 2,048 × 2,560 (4:5) preset.
Does resizing lower the quality?
Making an image smaller keeps it sharp at the new size. Enlarging it doesn't add detail, and the tool warns you when a preset would enlarge. JPEG and WebP at quality 80 to 90 look the same as the original to most eyes; go higher for detailed product shots.
I chose WebP but got a PNG. Why?
Your browser can't encode WebP from a canvas, so it saved PNG instead. The tool names the file .png and tells you. Choose JPEG for a small file, or try another browser.
Can I resize a whole folder of product photos?
Yes. Select up to 50 files at once. They're processed one at a time to keep memory use down, and each gets its own download link.
Will Shopify resize my image again?
Yes. Your upload becomes the source, and the theme requests smaller copies for each screen. That's why you should upload a large, good image rather than a small one.
Does it remove GPS and camera data?
Yes. Canvas output carries no EXIF data, so the location and camera details in a phone photo are not in the resized file.