# A photo, a logo, a screenshot — the pictures on your site, and what they weigh.

> See what the pictures on your site weigh and how to make them light. Read how a new picture goes live and what it costs.

Source: https://customhosted.com/images/

№ 01 Images

Three other pages each name a heavy image with nowhere to send you. This page is that place: what a picture costs, what makes it light, and how a change to one ships.

№ 02 Three kinds of picture

## Design, content, and upload

Almost every picture on a site is one of these three.

1. 1 — A picture in the design — A logo, an icon, a background — checked into the repository and shipped with the build, the same as any other file in it.
2. 2 — A picture in the content — A hero photo, a screenshot, a diagram — swapped in as a briefed change, alongside the words around it. See [Content](https://customhosted.com/content).
3. 3 — A picture a visitor uploads — An avatar, an attachment, a photo added while the site runs. It needs a writable disk, which a static build does not have. See [Files](https://customhosted.com/files).

№ 03 What a picture costs a page

## Measured against the same budget

The figures below are read straight from [Performance](https://customhosted.com/performance) 's own measured build — never a second copy.

- Page-weight budget — 60.0 KB per route, enforced on every deploy.
- Heaviest route measured — 35.6 KB, across 87 routes on this site.
- An unoptimised image — A single uncompressed photo can outweigh everything else on a page put together. Brief it — "compress the hero image" — and the pull request that resizes and re-encodes it is ready to review.

№ 04 Where a picture goes, hop by hop

## From the repository to the browser

1. 1 — Source file in the repository — Committed the same way any other file is, at whatever size and format it arrived in.
2. 2 — Build — Bundled into the site by the same pipeline that ships every other change.
3. 3 — Content-hashed filename — A changed picture gets a new address instead of overwriting the old one, so a cached copy anywhere is always safe.
4. 4 — Edge cache — Held close to the visitor asking for it, the same as any other file whose name changes with its content.
5. 5 — Browser — Decoded and painted onto the page, reserving the space its declared width and height ask for.

**Files whose name changes with their content.** Your stylesheets and scripts get the content written into their filename. A changed file gets a new address instead of overwriting the old one, so holding onto a copy of it anywhere is always safe.

№ 05 What holds a picture, by hosting shape

## A picture in the design needs no disk at all

| Shape | Plan | Disk | Detail |
| --- | --- | --- | --- |
| Static | Static Starter | None | A static site has no writable disk. There is nowhere to put an upload. |
| Dedicated | Dedicated S | 40 GB SSD | The instance's own disk, sized into the tier's flat rate. Not a metered add-on. |
| Dedicated | Dedicated M | 60 GB SSD | The instance's own disk, sized into the tier's flat rate. Not a metered add-on. |
| Dedicated | Dedicated L | 80 GB SSD | The instance's own disk, sized into the tier's flat rate. Not a metered add-on. |
| Custom | Custom | Sized to the workload | Durable storage sized and priced for what you actually keep, the same as any other Custom shape. |

№ 06 What makes a picture light

## Four things, each a briefed change

None of this happens automatically. Brief it, and the pull request comes back ready to review.

- The right dimensions for the space — A photo shown at 400 pixels wide should not ship at 4000. Brief the size the design actually uses.
- A modern format — A format built for the web compresses further than an older one at the same visible quality. Brief the swap; the pull request re-encodes it.
- Real compression — Most images leave a camera or a design tool uncompressed. Briefing "compress this" is most of the work on its own.
- Lazy loading, with width and height set — A picture far down the page can wait to load. Declaring its width and height in advance stops the page jumping once it arrives.

№ 07 The words a screen reader speaks

## Alt text ships with the picture, not after it

Swapping a picture without swapping its alt text leaves a screen reader describing the old one. Briefing the two together is what keeps them matched.

№ 08 How a picture change ships

## Brief it, and a pull request comes back

Brief "compress the hero image," and the pull request that resizes and re-encodes it comes back ready to review.

1. 1 — You notice it — You — A hero image that takes a moment to appear, or a photo that dwarfs the page around it. A person looks at the page and sees it.
2. 2 — You brief the picture — You — Say which picture, and what it should do — "compress the hero image", or "this photo only ever shows at 400 pixels wide".
3. 3 — Briefed as a change — CustomLabs — Written up the same way any other change request is. The iteration add-on is what covers it.
4. 4 — An agent opens the pull request — CodeHerder — The resized picture lands as a real pull request against the repository, with the test suite run against it.
5. 5 — A human reviews and merges — CustomLabs — Someone reads the diff before it goes anywhere near production — nothing here is auto-applied blind.
6. 6 — It ships through the same pipeline — CustomHosted — The same pipeline that deploys everything else on your stack ships this too — no separate process to babysit.
7. 7 — You're told it's done — CustomHosted — A note confirming what changed and that it merged, in the same shape as every other note on this site.

№ 09 What it costs

## Nothing new on the invoice

- No separate line item — A picture change is a briefed change like any other, covered by the same Agentic iteration — CodeHerder add-on ($25/mo).
- Its weight counts toward transfer — The bytes a picture ships still draw from the same fair-use transfer allowance every other file does. Static Starter allows ~100 GB transfer/mo, and Static Pro allows ~500 GB transfer/mo. See [Billing](https://customhosted.com/billing).

№ 10 This site's own pictures

## Every image this site ships

Both numbers below are counted or enforced, not hand-typed.

- Every image this site ships is a generated social card, rendered from one component at 1200×630 and re-rendered whenever a design token changes. This build ships 66 of them.
- Each one is checked against a per-image ceiling of 90 KB on every deploy. A picture over that ceiling fails the build before it ships.

№ 11 Four ways it goes wrong

## And the route out of each

- An unresized image — Serving a large photo at a small width burns transfer and memory for no visible gain. Resizing it at build time often does more than moving up a tier would. See [Scaling](https://customhosted.com/scaling).
- A picture too heavy for the page budget — A large image can push a page past its own published weight budget. Resizing it before it ships is part of the same briefed change. See [Performance](https://customhosted.com/performance).
- A picture that jumps the layout as it loads — A picture with no declared width and height gives the browser nothing to reserve space with, so the text around it jumps once it arrives.
- A picture swapped without its alt text — The new picture ships, and a screen reader keeps describing the one it replaced. See [Accessibility](https://customhosted.com/accessibility).

№ 12 Said plainly

## The honest limits

- No image resizing service — A picture is not resized, converted, or compressed for you at the moment a visitor requests it. Every change to a picture ships as a briefed pull request.
- No format conversion at request time — The format a picture ships in is the format it was briefed and built with, not one chosen per visitor.
- No media library or asset browser — There is no screen to log into and pick a picture from. Every picture is a file in the repository.
- No stock photography — We host and ship the pictures you brief us. Sourcing a picture to use is yours.

№ 13 Answers

## Image questions

Do you compress or resize images for us automatically?

No. See the honest limits above — a picture change ships as a briefed pull request, the same as any other change.

What image formats can we use?

Whatever format the picture is briefed in. A modern format usually compresses further at the same visible quality — see "What makes a picture light" above.

How big can an image be before it is a problem?

Weight is measured against the whole-page budget on Performance, not against a single-image number of its own. A single uncompressed photo can still outweigh everything else on a page put together.

Does a picture on our site slow it down?

It can, more than almost anything else on a page. See "What a picture costs a page" above for the measured budget it counts against.

What happens to alt text when we swap a picture?

Swapping a picture without swapping its alt text leaves a screen reader describing the old one. Briefing the two together is what keeps them matched.

Can we upload images through a dashboard?

No. See the honest limits above — there is no media library or asset browser. A picture in the design or the content is a file in the repository.

What about pictures visitors upload, like an avatar?

That is a file your app writes while it runs, not a picture in the design or content. See Files for where that goes by hosting shape.

Do you provide stock photography?

No. See the honest limits above — sourcing a picture to use is yours; we host and ship the one you brief us.

№ 14 Keep reading

## What images connects to

- [Content The change to what a page says — a picture swap included. This page owns only the bytes behind it.](https://customhosted.com/content)
- [Files A file your app writes while it runs, like an avatar a visitor uploads — a different thing from a picture in the design.](https://customhosted.com/files)
- [Performance The whole-page weight budget this page's own figures are measured against.](https://customhosted.com/performance)
- [Delivery The cache rules a picture meets once it is a URL.](https://customhosted.com/delivery)
- [Accessibility The WCAG self-assessment this page's alt-text section is one part of.](https://customhosted.com/accessibility)
- [Brief a change How to write the brief that describes a picture change, before an agent ever opens a branch.](https://customhosted.com/brief)

## Got a picture that needs to lose weight?

Brief it, and it comes back as a pull request — one fixed monthly rate, in writing.

[Get a quote →](https://customhosted.com/contact)