Assets and images

Local assets are part of building a site properly: they are faster, they are private, and they still work in five years. The assets panel is there so that does not mean going back and forth to the file manager guessing at relative paths.

The panel

Your project’s real folders. Create one, drag files in from the desktop, rename, delete — all of it lands in the project directory.

Right-click gives you Copy path and, in an Astro project, Copy Astro import.

What each file is

Every image carries its format, pixel dimensions and weight beside it, in both the assets pane and the project panel.

These are read out of each file’s header rather than by decoding it, so a folder of photographs costs a short read apiece rather than a long wait.

Anything wider than 2560px or over a megabyte is marked in amber. Worth noticing, not an error — a large source is exactly right when a build pipeline is going to resize it, and exactly wrong when it is going straight into a page.

Looking at one

Click an image and it opens at a size that answers a question, with its format, dimensions, weight and path, and a note when there is something worth saying — like a 3000px PNG that no screen will ever show at that size.

Copying the path is a button on the row, so it can be aimed at deliberately rather than being one of the things a click might mean.

Optimising one image

The same modal has an Optimise screen.

A quality slider, an optional downscale, and WebP, JPEG or PNG out. The original and the result sit either side of a divider you drag, because a quality setting is judged by looking rather than by reading a number.

It says what it will write and where before it writes it, and whether the original survives. Replace the original is a checkbox, off by default.

Resizing is only ever downwards — an image is never scaled up.

Optimising a folder

The Optimise button in the assets panel acts on everything in the folder, or on just what you have Cmd-clicked. The label says which.

One quality, one max width, one format, applied down the list, with each file reporting what it saved as it goes. The button says where it has got to — Optimise all, then Optimising…, then Optimise again or Try again.

What to write is the decision that matters, and it is put as two choices rather than a checkbox:

• Alongside keeps the originals and writes the optimised files beside them. You change the references yourself.
• In place writes the same format under the same filenames, so every reference in your markup keeps working.

It also reports the folder’s own total, before and after, which is the honest number — optimising Alongside makes the folder bigger, every optimised file being written beside the one it came from. That reads in amber rather than green, before it happens rather than after.

A max width of 0 leaves every image at its own size.

Two deliberate absences

SVGs are skipped. There is no raster to re-encode, and putting one through a canvas would turn it into one.

AVIF is not offered. Chromium cannot encode it and does not say so — it hands back a PNG instead, which is worse than not offering it, because you would think you had an AVIF.

Fonts

The same panel. Local fonts, in the project, referenced from your globals.css like anything else.