DocsWebsite EditorEditor basics

Images

Upload, select, frame, and reuse images in the Cordially website editor.

Overview

Image fields connect template sections to your media library.

Home-page decorations use the same site-scoped library, so you can reuse an uploaded image as a decorative asset without uploading it again.

Key concepts

The image library loads uploaded image assets for the current site. You can upload image files, select an existing image, delete assets, and adjust framing for desktop and mobile.

How it works

When you open an image field, Cordially shows the library panel. The current draft image is highlighted. Selecting an image updates the section field, and framing controls let you tune focus points for different viewport sizes.

Image quality and upload limits

JPEG, PNG, and WebP files up to 4 MB are stored exactly as uploaded. Larger photographs are optimized toward a 2–4 MB master using a few quality settings and, when needed, modest resizing. Each accepted result must pass a visual-similarity check and save at least 5%. The target is not a hard limit: if it cannot be reached, Cordially keeps the smallest acceptable result or the original. Cordially stores one master per image.

All selected image files must be 20 MB or smaller. JPEG, PNG, and WebP files above 4 MB may be optimized; if optimization does not meet the savings and quality checks, the original is kept. GIF, AVIF, and SVG files pass through without re-encoding. Browser support and available memory can affect whether a large image can be optimized.

Visitors receive responsive image sizes, with the highest delivery-quality setting for hero photographs. Previously uploaded images are unchanged; re-upload an original to recover detail lost during an earlier upload.

Common workflow

  1. Open a section with an image field.
  2. Choose an existing image or upload a new one.
  3. Adjust desktop and mobile framing.
  4. Save the draft when the preview looks right.

Home-page asset composer

On the Home page, choose Assets beneath the page selector to add decorative artwork over the live preview. Choose a built-in decoration or an item from Your uploads, then select a highlighted block or component. Every Home block—including a newly added or duplicated block—can be selected. Templates may also expose more precise text, image, card, and component targets. The decoration stays attached as that target moves or adapts across screen sizes.

Attached decorations can sit behind or above their component. Drag and resize directly in the preview, or use the Size, rotation, and opacity controls for fine adjustment. Attached and freely placed decorations share the same 5–200 Size range, and attaching an existing decoration preserves its Size. You can place an image anywhere around its target; alignment guides provide a gentle snap near the target edges and center without constraining placement. Enable Mobile adjustment only when the phone layout needs a different treatment. The same phone, tablet, or desktop placement canvas is used when the site is published, including on screens wider than the editor preview.

For large flourishes, backgrounds, or artwork meant to cross section boundaries, choose Place freely in section. Free decorations retain the canvas-style drag controls and independent desktop, tablet, and mobile placement options.

Notes and limitations

Uploaded media is intended for public website use. Do not upload files that need to remain private.

The asset composer accepts PNG, JPEG, and WebP images from your media library. Decorative assets are available on the Home page only and are not interactive for guests. Smart Attachments are structured template relationships, not a general-purpose freeform page builder.

Media upload is paid-workspace behavior.

Deleting and replacing images

You can delete an image even when it is in use. The confirmation lists its locations and explains that deletion also removes it from your saved website, inactive designs, and email cover selections. Deleted files cannot be recovered. Email templates whose custom cover is deleted fall back to their website image.

When replacing an image used in multiple website locations, select a different image and open the dropdown beside Save image. Choose Replace all and save, then confirm. This updates matching locations across your website, including settings, decorations, and inactive designs. Other locations retain their own framing. Save your website to persist these editor changes. The option is hidden when adding a new image, keeping the same image, or replacing an image used only once.