Image to place an image in your article and keep its caption, link, and size in one readable tag. Upload through the visual editor or CLI to host your images and prepare optimized versions automatically.
src with your uploaded image’s URL, an absolute HTTPS URL from another
image host, or a local path as described below.
Local images
For local preview and standalone builds, put an image atpublic/images/cover.jpg and reference it as /images/cover.jpg:
lettercamp deploy uploads
referenced local JPEG, PNG, WebP, and GIF images automatically and substitutes
hosted URLs in the deployment copy. Your local content keeps its original paths.
For GitHub publishing, upload the images and commit their hosted URLs first.
Upload images
Upload an image through the visual editor, or use the CLI:Image component, a Markdown image, your page’s cover or author fields, or your site settings. Both upload methods use the same automatic optimization. An agent can reuse your CLI login to upload needed images and write the returned URLs into your publication.
Uploads support JPEG, PNG, WebP, AVIF, and GIF files, subject to your site’s file-size limit.
Automatic optimization
Lettercamp processes eligible static JPEG, PNG, and WebP uploads in the background. It prepares responsive sizes in AVIF, with WebP or JPEG fallbacks, preserving the image’s proportions and keeping the original file and URL. The upload completes before optimization does, so the returned URL is usable immediately. The target widths are 64, 394, 668, 786, and 1536 pixels. Images are never enlarged. For example, a 1000-pixel-wide upload has target sizes of 64, 394, 668, 786, and 1000 pixels. When a generated version would be larger than the original, Lettercamp keeps the original. GIFs, animated PNG or WebP files, and AVIF uploads also keep their originals. Lettercamp’s published layouts use available optimized versions for covers, article images, logos, and author portraits. The browser selects a size for the image’s displayed width and the reader’s screen density. Keep using the original URL in your content; you don’t need to select or link to individual sizes yourself. You can publish while optimization is running. If optimized versions aren’t ready or available, the page uses the original image. Publish again to include versions that finish processing later. Images linked directly from another host aren’t automatically copied or optimized. Upload those files to Lettercamp to enable optimization. Custom React components that manage their own responsive images retain that behavior.Properties
Dimensions
For a manually sized image, keepwidth at its default and supply pixel dimensions:
width="wide" or width="full", the layout setting controls its displayed width; the pixel dimensions preserve its aspect ratio. The editor can retain dimensions automatically when you upload or resize an image.
Image corners
design.imageRadiusPercent rounds covers, thumbnails, and
article images as a percentage of the shorter edge. Use 0 for square corners;
the range is 0–20, with a default of 2.
Use the visual editor
The image block retains upload, crop, drag-to-resize, alt text, caption, destination link, and width controls. Image corner rounding follows your site’s design settings. Ordinary Markdown images such as remain supported and use the same optimization for Lettercamp uploads. The editor can save them as Image components when you edit the page.