Images are often the first thing visitors notice in your popup, and a common reason a popup looks broken on mobile. Use these guidelines to keep your images sharp, fast to load, and correctly sized on desktop and mobile.
Tip: Want to fix an image without adjusting sizes yourself? Select the image and ask Lia, Alia's built-in AI assistant, something like "Make this image fit the mobile layout without stretching it." Lia makes the change for you, with no CSS required.
For the steps to upload, swap, resize, or move an image, see Editing your current popup.
Where to place images
Logo: Put it at the top of the content container, above the offer. Keep it small so it doesn't push the offer down.
Desktop layout: Split the popup, with text on one side and the hero image on the other.
Mobile layout: Use a single column with the content centered. Anchor the image to the top or bottom, not behind the text.
Close button: Keep the close button, usually in the top-right corner, clear of any image, mask, or clipping path.
Text over images: Avoid placing text visitors need to read over a busy photo. If you have to, add an overlay and check that the text is easy to read.
Masks and clipping paths: These cut off corners and edges, so keep the main subject and key content away from them. See How to use masks and clipping paths.
Number of images: Use no more than 1 hero image per step, so your offer stays the focus.
How to size images
Set the width, not the height. The height then follows the image's shape automatically. Setting both a fixed width and a fixed height is the most common cause of stretched or badly cropped images.
Image | Recommended size | Why |
Logo | 80–140 px wide | Visible without crowding the offer |
Desktop hero image | About 40–55% of the popup width | Leaves the text column at least 45% of the width |
Mobile hero image | About 30–45% of the screen height | Keeps the headline, form or quiz answers, and buttons visible without scrolling |
If your text gets long, shrink the image rather than letting visitors scroll to reach the form.
Upload files at the right size
Upload each image at about twice the size it's shown, so it stays sharp on high-resolution screens:
A logo shown at 130 px wide needs a file about 260 px wide.
A hero image shown at 55% of a 1,000 px popup needs a file about 1,100 px wide.
Files much larger than that slow your popup down without looking any better. A 3,000 px photo shown at 100 px is a common example. Save images as WebP, compress them, and keep each file under about 200 KB. When you upload an image in the popup editor, you can convert it to WebP and choose its quality. For more on load time, see Popup is lowering my site speed or PageSpeed score.
Which unit to use
When you enter a size in the Size section, choose the unit next to the value. The unit decides how the image behaves on different screens.
Unit | Use for | Example |
| Logos and icons that should look the same size on every device | A logo at 120 px wide |
| Images that fill an area of the popup and scale with it | A desktop hero at 55% width and 100% height |
| Rarely. They size to the browser window, not the popup | Use |
| Spacing, not image sizes. It scales with text size, which images rarely need | Margins around an image |
Use 1 unit per image. A px width with a vh height, for example, behaves differently on every device.
Note: On phones, 100vh is taller than the visible screen because it includes the space behind the browser toolbar. Never use vh for a width.
How desktop and mobile layouts work
Your popup has a separate desktop layout and mobile layout, and each image exists once in each. A change you make in one layout doesn't carry over to the other, so make every image change in both.
Set the size that works for mobile first, then change it for desktop only where you need to.
Size the container, not the image
It's easier to control an image's container than to size every image separately:
In the left-hand panel, select the container that holds the image.
In the Size section, set the container's Width, and set its Max width under Min/max. In the Layout section, set Overflow to Hidden.
Select the image and set its width and height to 100%, so it fills the container.
Set the image to fill the space without stretching.
Put any masked or clipped image inside a container set this way, so no stray edges show.
How to prevent stretching, cropping, and overflow
Image spills past the edge on small screens: Give any image with a
pxwidth a Max width of100%(under Min/max in the Size section), so it shrinks on narrow screens.Image fills a set area, like a hero panel: Set it to cover. It crops the edges instead of distorting the picture.
Whole image must stay visible, like a product shot: Set it to contain.
Wrong part of the image is cropped: Change the image's focus point. For example, center top keeps faces in frame.
How to choose and finish your images
Photos: Use photos of your real products, customers, or lifestyle, with a clear subject and uncluttered edges.
Placeholders: Replace every template image, such as a sample logo or another store's photos, on every step and in both layouts.
Different photos per layout: Using different photos on mobile and desktop is fine, and often better, as long as both are your own.
Consistency: Keep the same color tone and style across steps, so your popup feels like one piece.
Alt text: Describe what the image shows, such as "Acme logo" or "Model wearing the linen shirt," not "Logo" or "Image." Background images don't support alt text, so add an image that needs it as an image element. See Editing your popup background.
Check your work before publishing
Save your changes.
Select Preview and check your popup on desktop.
Check it on mobile. Long text and image sizes affect each other, especially on small phones.
Check every step, not only the first. Steps share a layout, but each step has its own content.
Repeat these checks after every image change.
Common image issues and fixes
Issue | Fix |
Image spills off the screen on small phones | Set its Max width to |
An element is wider or taller than the screen on mobile | Replace |
Image looks stretched | Set the image to cover, and set only its width. |
The subject is cropped badly | Change the image's focus point. |
Popup loads slowly | Re-upload images at about twice their display size, as compressed WebP files under about 200 KB. |
Image looks soft or blurry | The file is too small for its display size. Upload a larger one. |
Mask or clipping path edges look jagged or show gaps | Put the image in a container with Overflow set to Hidden. |
Text is pushed off screen on short phones | Reduce the image or logo height, or its margins, in the mobile layout. |
Template or stock images are still showing | Check every step in both the desktop and mobile layouts. |
White areas show around a transparent image in the editor | This only shows in the editor. Select Preview to see how the image looks to visitors. |
You can't replace or delete an image while setting up a new popup | Images and text can't be edited during the first setup flow. Finish setup, then open your popup from Campaigns to edit it. |
Still stuck?
Ask Lia in the popup editor to make the change, or start a chat with Alia Support in the Alia app or from the Help Center. Include your popup's name, the step and layout (desktop or mobile) where the issue shows, and a screenshot.