Media Library

The media library holds the images you use on landing pages. Upload an image once, make smaller or cropped versions of it, and pick it whenever you place or replace an image on a page. The Images panel in the page editor lists every image a page uses and flags the ones that are too large, too small, or stored where they could disappear.

Access: admins and marketers, from the page editor.

Open the media library

In the page editor's Content tab:

• Click Upload Media (on an empty page) or Media (on a page with content) to browse and manage images.
• Click Replace Image in an image's menu in the Design view, or a thumbnail in the Images panel, to pick an image for that spot.

The library opens in a side panel titled Media. See Landing Pages for the editor itself.

Page and shared media

The library has two tabs:

Tab	What it holds	When its images are deleted
Page	Images stored with the page you're editing.	When you delete them, or when the page is deleted.
Shared	Images available to every page in your organization.	Only when you delete them.

The library opens on Page. Use Shared for logos and other images you reuse across pages. When you save a page as a template, the images in its Page tab are copied into the template.

Upload images

Click Upload and choose one or more files, or drag images onto the panel. They go into the tab that's open.

Limit	Value
File types	JPEG, PNG, WebP and SVG
File size	Up to 10 MB per image
Dimensions	Up to 4096 pixels on either side (JPEG, PNG and WebP)

What happens on upload:

• JPEG, PNG and WebP images larger than 1920 pixels on either side are scaled down to fit within 1920 × 1920.
• Metadata, such as camera and location details, is removed.
• JPEG images are saved at quality 85, and WebP images are converted to PNG.
• SVG files are cleaned of scripts and event handlers. An SVG that contains script-like code is rejected.

Use an image

Each image card shows a thumbnail (click it to enlarge), the image's name, its size and format, and an In use badge when the page you're editing uses the image or one of its smaller versions.

• When you're picking an image for a spot on the page, click Select to use the full image, or click one of its smaller versions.
• When you're browsing, Copy URL copies the image's address so you can use it in your HTML.
• The eye icon previews the image, and the download icon opens the file in a new tab.

Make smaller versions

Large images slow pages down. To make a smaller version:

1. Click the scissors icon (Resize) on an image.
2. Click a width: 1280px, 960px, 640px or 320px, or type a width in Custom width... and press Enter. The width must be smaller than the image's.

The smaller version keeps the image's proportions and appears as a chip under the image, such as 640px. Use it like the original: select it, copy its address, preview it or download it. SVG images can't be resized.

Crop an image

1. Click the crop icon on an image.
2. Next to Aspect:, choose 16:9, 4:3, 1:1 or 3:4, or choose Custom and enter a width and height to set the shape.
3. Drag the image to position it, and use Zoom: to scale it. The size of the result, in pixels, is shown under the image.
4. Click Crop & Save.

The crop is saved as a new image in the same tab, named after the original with _crop_ and its size added. The original stays as it is. SVG images can't be cropped.

Delete images

• The trash icon on an image deletes it, with all its smaller versions, after you confirm.
• The trash icon on a version's chip deletes only that version.

Deleting an image breaks the pages that use it

Pages keep pointing at the image's address, so a deleted image disappears from every page that uses it. The In use badge only covers the page you're editing, so check your other pages before you delete a Shared image.

Manage the images on a page

The Images section of the editor's Content tab lists the page's images in order, on two tabs: Images (regular and responsive images) and Backgrounds (images set as CSS backgrounds). Images embedded in the HTML as data, and images whose address contains a template variable, aren't listed.

• Click a thumbnail to replace that image from the media library. An empty spot shows Empty — click to set.
• Sizes are measured in the Design view at the device width you've selected (Desktop, Tablet or Mobile).

The panel flags images that need attention:

Flag	What it means	What to do
Amber warning icon (External image)	The image is hosted on another website, which could change or remove it.	Click the download icon (Download & upload to page media) to copy it into this page's media.
Blue warning icon (From another page)	The image belongs to another page's media and disappears if that page is deleted.	Click the download icon (Copy to this page's media).
"{actual size}px, shown at {displayed size}px."	The image is more than twice as wide as it's displayed, so it loads more slowly than needed.	Click Optimize to {N}px to switch to a copy at twice the displayed width, stored in this page's media.
"Low res: …"	The image is smaller than it's displayed and may look blurry.	Replace it with a larger image.

Copying an image from another website works for JPEG, PNG, WebP and SVG images of up to 10 MB and 4096 pixels on either side.

Responsive images

For a regular image (not an SVG), Make responsive lets you show different images on different screens:

• The current image becomes Mobile / fallback.
• Add Desktop sets an image for screens at least 1024 pixels wide, and Add Tablet for screens at least 768 pixels wide.
• The × next to a screen size removes that image. Remove responsive goes back to a single image, the mobile one.

Changes you make in the Images panel edit the page in the editor. Click Save to keep them.

Cover images

A page's cover images, used for its thumbnail in the Pages list and for link previews, are set in the editor's Settings tab rather than in the media library. See Cover images.