> ## Documentation Index
> Fetch the complete documentation index at: https://www.lettercamp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Image component
> Upload and display images in Lettercamp. Learn about automatic optimization, responsive sizes, alt text, captions, links, and layout settings.
Use `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.
```mdx theme={null}
```
Replace `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 at
`public/images/cover.jpg` and reference it as `/images/cover.jpg`:
```mdx theme={null}
```
[`lettercamp deploy`](https://www.lettercamp.com/docs/publishing/deploy#local-images-and-cloud-assets) 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](https://www.lettercamp.com/docs/cli/upload.md):
```bash theme={null}
npx lettercamp upload cover.png
```
The CLI prints the image's permanent URL. Use that URL in an `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](https://www.lettercamp.com/docs/cli/upload.md#let-an-agent-upload-assets) 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](https://www.lettercamp.com/docs/react-components.md) that manage their own responsive images retain that behavior.
## Properties
| Property | Type | Default | Description |
| - | - | - | - |
| `src` | String | Required | Hosted image URL or a local image path for CLI previews, builds, and automatic deployment uploads. |
| `alt` | String | `""` | Accessible description. Describe meaningful images; use an empty string for decorative images. |
| `width` | `"regular"`, `"wide"`, or `"full"` | `"regular"` | Layout width. |
| `caption` | String | None | Plain text displayed below the image. |
| `href` | String | None | Destination when a reader clicks the image. |
| `newTab` | Boolean | `false` | Opens `href` in a new tab. |
| `title` | String | None | Native image title text. |
| `pixelWidth` | Positive number | Inferred when available | Image width in pixels. |
| `pixelHeight` | Positive number | Inferred when available | Image height in pixels. |
## Dimensions
For a manually sized image, keep `width` at its default and supply pixel dimensions:
```mdx theme={null}
```
The image stays within the available column. With `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.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.