How do I resize an image for my store and popups?
Last updated
JPG, PNG, WebP or GIF. The image stays in this browser tab and is never uploaded.
For JPG and WebP. 1 to 100; blank uses 85.
Choose an image to see it at the size you pick.
Sizes, modes and formats
An image resizer changes the pixel size of a picture so it fits a slot such as a popup background, a social share card or a square product tile, so a 4032 by 3024 phone photo cropped to a 1200 by 630 share image keeps the centre 70 percent of the frame and loses a strip from the top and bottom.
Everything happens in your browser tab. The image is not uploaded to Nudgesmart or anywhere else, and closing the tab discards it.
Pick a size, decide what happens when the picture is a different shape from the slot, then choose the file type. The preview shows the result before anything is saved.
- Presets
- Ready sizes: popup background 1600 by 1000, popup side image 800 by 1000, announcement bar icon 96 by 96, social share image 1200 by 630, square product image 2048 by 2048, vertical story 1080 by 1920. The popup sizes are our suggestions for a clean fit on a phone and a laptop, not a platform rule.
- Custom size
- Any width and height from 1 to 8000 pixels. Very large outputs are refused because phone browsers silently fail to draw them.
- Crop to fill
- Fills the whole slot and trims whatever overhangs, keeping the centre. Best for backgrounds, where empty bands would look like a mistake.
- Fit inside
- Keeps the entire picture and adds bands of background colour where the shapes differ. Best for logos and products that must not lose an edge.
- Stretch
- Forces the picture into the slot shape. Only safe when the shapes already match, otherwise faces and products look squashed.
- JPG, WebP and PNG
- JPG is the smallest for photos and has no transparency. WebP is smaller again and keeps transparency. PNG is lossless and keeps transparency, but photo files come out large.
- Quality
- For JPG and WebP, a percentage from 1 to 100. Around 80 to 85 is usually hard to tell from the original at a fraction of the file size; lower values show blocky edges first.
Nudgesmart is available on the Shopify App Store. Browse the template library or see what it costs.
Six pictures, six slots
Sample source sizes, run through the same sizing logic the tool above uses. Each row says how much of the picture survives and whether it gets enlarged.
| Picture | Slot | Mode | What happens |
|---|---|---|---|
| Phone photo, landscape, 4032 by 3024 | Social share image, 1200 by 630 | Crop to fill | Keeps the centre 70% of the picture |
| Phone photo, landscape, 4032 by 3024 | Popup side image, 800 by 1000 | Crop to fill | Keeps the centre 60% of the picture |
| Product shot, portrait, 1500 by 2000 | Square product image, 2048 by 2048 | Fit inside | Whole picture kept, with bands of background added; enlarged 2%, so it may look soft |
| Logo, 400 by 120 | Announcement bar icon, 96 by 96 | Fit inside | Whole picture kept, with bands of background added |
| Small banner, 800 by 500 | Popup background, 1600 by 1000 | Crop to fill | Nothing is cut off; enlarged 100%, so it may look soft |
| Square product image, 2048 by 2048 | Vertical story, 1080 by 1920 | Stretch | Squashes or stretches the shape by 44% |
What resizing cannot fix
Enlarging adds no detail
A small picture made bigger stays soft. The tool says when a size will enlarge the image; the fix is a larger original, not a different setting.
The crop always keeps the centre
If the subject sits near an edge, crop mode can cut it off. Fit inside keeps everything, or crop the original yourself first so the subject is central.
Colour profiles and metadata are dropped
The saved file carries no camera data, location or embedded colour profile. That is usually what you want for the web, but a print file needs a proper image editor.
Big files can be slow on a phone
A very large photo takes memory to decode. Files over 20 MB get a warning and very large ones are refused, because a browser tab can run out of memory without saying so.
Sizes change
Social networks and themes change the sizes they display. Check the current size for the place the picture is going if it has to be exact.
Image resizing questions
Are my images uploaded anywhere?
No. The picture is opened, resized and saved entirely inside your browser tab. There is no server behind this tool, so nothing is uploaded, stored or seen by anyone.
What size should a popup background image be?
A landscape image around 1600 by 1000 pixels covers a popup on a laptop and crops cleanly on a phone. For a split layout with the picture on one side, a portrait image around 800 by 1000 works. Keep the subject near the centre so the phone crop keeps it.
What is the right size for a social share image?
Common share cards display at 1200 by 630 pixels, which is the preset here. Keep text and faces away from the edges, since some apps trim them.
Should I save as JPG, WebP or PNG?
JPG for photos where file size matters and nothing is transparent. WebP when the place you are uploading accepts it, since it is usually smaller. PNG for logos, icons and anything with transparency or sharp flat colour.
Why does my resized image look blurry?
Either the original was smaller than the size you chose, so it was enlarged, or the quality was set low. The preview warns about enlargement; raise the quality or start from a bigger file.
A well-sized image is still just a file on your desktop.
Nudgesmart popups start from ready-made templates with the image slot already laid out, grouped by industry and campaign type.
