Images
Add an image
Section titled “Add an image”- Paste an image, such as a screenshot, into a post.
- Drop image files onto a post. Zeku takes PNG, JPEG, GIF, WebP, AVIF, and SVG, and copies each file rather than moving it.
- Paste or drop into a frontmatter field, such as
imageorcover. Zeku saves the image the same way and writes its path into the field. See Images in frontmatter. - Insert image (Ctrl+’) adds one from a file, from a URL, or from stock photo search, with fields for alt text and display size. It can also set the image as the post’s cover.
Zeku names each file in lowercase with hyphens, so My Photo.PNG becomes my-photo.png, and adds -1, -2 and so on instead of overwriting a file with the same name. An image you describe when you add it is named after the description’s first few words instead.
Alt text
Section titled “Alt text”When you paste or drop one image, Zeku asks you to describe it. The description becomes the image’s alt text, , which screen readers read aloud and browsers show when the image fails to load. Zeku fills in a guess from the file name when the name describes the image, and leaves it empty for names a camera or a screenshot tool made up, such as IMG_2034.jpg. Leave it empty for an image that is only decoration. Cancel cancels the image, and nothing is saved.
Dropping several images at once doesn’t ask for each one; each gets its file name’s guess instead. Turn the question off in Settings > Usability > Ask for alt text.
Large photos
Section titled “Large photos”A photo straight from a phone is often 4000 pixels wide and several megabytes, and every copy you commit stays in your repo’s history. Zeku shrinks pasted and dropped JPEG, PNG, and WebP images wider than 2400 pixels on the way in, which also removes location data from photos. Astro still sizes images for the page when it builds, so nothing on your site gets smaller than it needs to be.
Choose the width, or turn shrinking off, in Settings > Usability > Shrink large photos. GIF, SVG, and AVIF images always come in as they are.
Where images go
Section titled “Where images go”Settings > Usability > New images decides where a new image file is written:
| Option | Behavior |
|---|---|
| Auto (match this collection) | Follows the pattern the collection’s existing posts already use: beside each post, a folder inside it such as ./images, one shared folder such as src/assets or src/content/images, public/ for links like /images/photo.png, or an Obsidian-style folder at the root of the content folder. The default. |
| Beside the entry | Next to the post’s file. |
| In a fixed folder | In one folder you choose, linked relative to the post, such as ../images/photo.png. |
When a collection has no images yet, Auto puts the file beside the post and links it as ./image.png. Astro resolves image paths in markdown relative to the post’s file, so that link builds on any Astro site.
Images stay inside your content folder, where Astro can optimize them. The one exception is a frontmatter field whose values already point into public/, described next.
Images in frontmatter
Section titled “Images in frontmatter”Paste an image into a frontmatter field, or drop an image file onto one, and Zeku saves the file and writes its path as the field’s value. A list field, such as a gallery, gets the image as a new item. Date, number, checkbox, and tag fields don’t take images.
The path takes the form your collection’s other values for that field already use, so it works with your theme:
| Other values look like | The new value |
|---|---|
cover.png |
my-post.png |
./cover.png |
./my-post.png |
 |
 |
/images/blog/cover.png |
/images/blog/my-post.png, with the file saved in public/images/blog/ |
/public/images/cover.png |
/public/images/my-post.png, with the file saved in public/images/ |
The file goes where that field’s other images already are: in src/assets when they’re written ../../assets/cover.png, in an images folder beside each post when they’re written ./images/cover.png, or beside the post. When no other post has a value for the field yet, Zeku saves and writes it the way Insert image saves a cover, such as ./my-post.png. A field your schema takes as plain text, rather than through image(), gets the file in public/images instead, written /images/my-post.png, because the browser reads such a path exactly as it’s written. That includes the path inside a field shaped like { src, alt }.
To choose instead, open Settings > Content and set the collection’s Frontmatter image folder and Frontmatter image path. The folder can be ./ or ./images for beside each post, or a folder in your project, such as src/assets/blog or public/images. The path can be written cover.png, ./cover.png, or , and an image saved under public/ is always written as a site path, like /images/cover.png. Leave either one on its default to keep following the collection’s other images.
Zeku asks you to describe the image, as Vault CMS’s Image Manager does, and names the file after the description. When the collection keeps alt text in a field of its own, the description fills it too, whatever your theme calls it: heroImageAlt, heroAlt, imageAlt, altText or alt, and the same goes for the alt key inside a field shaped like { src, alt }, such as image_alt. If your theme uses a name Zeku can’t guess, set it in Settings > Content under the collection’s Image alt text field, or clear that setting to stop writing alt text to a field. With Ask for alt text turned off, there’s no question, and the file is named after the post. A large photo shrinks on the way in.
Move and edit images
Section titled “Move and edit images”A line that holds only images, one or several with spaces between them, shows just the pictures.
- Click a picture to select it. Delete or Backspace removes it, Ctrl+X cuts it so Ctrl+V can paste it somewhere else, and Alt+↑ and Alt+↓ move it up or down a line at a time. Enter or typing starts a new line below it, and Esc lets it go.
- Move the cursor onto the line, with the arrow keys or by clicking beside the pictures, to see and edit its Markdown. The pictures stay on screen below it, and take its place again when the cursor leaves.
- Click
</>on a picture, or double-click it, to go straight to that picture’s Markdown.
On a Mac, press ⌘ where this says Ctrl, and ⌥ for Alt.
Image grids
Section titled “Image grids”Some themes, including Astro Modular and Axis, show a paragraph of two or more images as a grid. When Zeku finds the plugin that does this, it draws such a paragraph as a grid too, with the columns, breakpoints, and cropping read from your theme’s own stylesheet, so the grid changes with Zeku’s window the way your site’s changes with the browser. Images on lines of their own, with no blank line between them, are one paragraph and make one grid. Image grids in Settings > Content shows what Zeku found, and corrects it.
Size and position
Section titled “Size and position”Drag the handle at an image’s bottom right corner to set a display width. Zeku writes the width into the alt text the way Obsidian does, , which your site needs a plugin to honor. A picture in an image grid takes its size from the grid, so it has no handle.
Stock photos
Section titled “Stock photos”Insert image searches Pexels, Pixabay, and Unsplash. Each needs a free API key from its site, entered in Settings > Content > Stock photo search. Insert photo credit in the same section adds the photographer’s credit under the image.
Remote images
Section titled “Remote images”Download remote images into the content folder in the command palette downloads every image a post links on another site, saves the files where new images go, and rewrites the links to point at them.