How to upload and replace images in a Nudgesmart popup
Add product photos, hero images, and logos to your popup — at the right size for fast loading and a sharp display.
Images make or break popup conversion. Get the size and format right and your popup loads fast, looks sharp on retina screens, and stays accessible to every shopper.
TL;DR
Select an image element in the visual editor, click Upload image, then drag and drop (or pick) a JPEG, PNG, or WebP file under 3MB. Add Alt Text that describes the image so screen readers and search engines can understand it. To swap an image later, use Upload new to replace — or click Remove to clear it and upload a fresh one.
Recommended image sizes
The biggest mistake is uploading a 3000×2000px photo straight from a camera. The popup renders at maybe 400px wide — the browser still downloads the full file, slowing first paint.
Sizes that consistently work:
- Hero images (full-width banners): 1200×600px.
- Product thumbnails (small inline images, avatars): 400×400px square.
- Logos: 200px wide max. Use a transparent PNG.
General rule: export at roughly 2× the display size. A 300px-wide slot gets a 600px-wide file — sharp on retina, no 4K download on every visit.
Step 1 · Upload from your computer
In the visual editor, select the image element you want to populate. The right panel shows an Image Source section with an upload area.
Property panel with the Image Source section showing the empty Upload image drop zone
Screenshot coming soon
Drag a file into the upload area, or click Upload image to browse. Nudgesmart accepts JPEG, PNG, or WebP files up to 3MB. Anything bigger gets rejected — compress first (see Step 4).
If the upload area isn't visible, save the campaign once. Image uploads need a saved campaign to attach to.
Step 2 · Replace an existing image
When an image is already in place, the panel shows a thumbnail preview alongside two controls: Remove and a hint to Upload new to replace.
Image Source panel with a thumbnail preview, a Remove button, and the Upload new to replace prompt
Screenshot coming soon
Two paths:
- Upload new to replace — drop a new file onto the upload area. The new image takes the slot immediately; the old one is discarded.
- Remove — clears the slot back to empty. Use this when you want the image out entirely. The upload area reappears for a fresh file.
Replacing is the cleaner option for a swap — you keep alt text and layout positioning intact.
Step 3 · Add Alt Text for accessibility
Below the image preview, fill in the Alt Text field with a short description of what the image shows.
Alt text matters for three reasons, and skipping it costs you on all three:
- Screen readers announce alt text to shoppers who can't see the image. Empty alt text means part of your audience hits a silent gap.
- SEO uses alt text to understand image content, which can affect organic image search.
- Fallback display kicks in when the image fails to load. Alt text shows in place of the missing image so the popup still makes sense.
Keep it descriptive but tight — "Woman wearing the red Triest sweater" beats "image1." Aim for 5-12 words.
Step 4 · Compress for performance
Before uploading, run your image through a compression tool. A 2MB photo can usually drop to 200-400KB with no visible quality loss.
The fastest free options:
- squoosh.app — Google's in-browser compressor. Drag a file in, pick WebP, slide quality until you can't tell the difference, download.
- tinypng.com — bulk JPEG and PNG compression.
Prefer WebP when your audience uses modern browsers — Google's guide to modern image formats covers the trade-offs. WebP files are typically 25-35% smaller than JPEG with indistinguishable quality at popup sizes.
Common pitfalls
- Popup paints slowly after upload. The image was over 1MB. Compress with squoosh.app or tinypng — aim for under 400KB for hero images, under 100KB for thumbnails.
- Image looks blurry on retina. You uploaded at the exact display size. Re-export at 2× — file size goes up slightly, sharpness improves a lot.
- The upload area is missing. Save the campaign once and the Image Source section becomes active.
- Alt text is empty. Easy to skip — but it costs accessibility, SEO, and graceful fallback. Treat it as required.
Frequently asked questions
What's the largest file Nudgesmart accepts?
3MB per image. Most popup images should sit well under 500KB after compression — if you're hitting the ceiling, the source file is larger than it needs to be.
Can I upload an SVG logo?
SVG isn't supported directly. Export your SVG to PNG at 2× the display size, then upload the PNG.
Why does my image look different on mobile?
Image elements scale to fit the popup width on mobile, so a hero designed for desktop may look cropped or oversized on a 375px phone. Switch to mobile preview and adjust. See Customize mobile layout.
What to read next
How to change fonts, colors, and spacing in your popup
Customize typography, theme colors, and spacing in the Nudgesmart visual editor — match your brand's look across every popup.
How to customize the mobile layout of a Nudgesmart popup
Override fonts, sizes, and spacing for mobile shoppers using desktop-first inheritance — without breaking your desktop design.