Images

In your download every photo is a grey placeholder with the right proportions. The photos in the live preview are for demonstration only and are not included. Here's how to add your own.

In the source files#

Copy your images into src/img/. Sub-folders are fine, e.g. src/img/rooms/garden-suite.jpg. Everything in src/img/ is copied to assets/img/ when you build.
In a page file or data.json, replace "placeholder" with the path starting at assets/:
JSON
```
"image": "assets/img/rooms/garden-suite.jpg"
```
Don't add ../; the build works out the right path for every page.
Save and rebuild.

You can also use a full address, "image": "https://…", for images hosted elsewhere.

In the HTML files#

Put your image in template/assets/img/ and change the image's src. Pages inside a demo folder need ../ in front:

HTML

&lt;img src="../assets/img/rooms/garden-suite.jpg" alt="The Garden Suite terrace at sunset" loading="lazy"&gt;

Some large images are backgrounds set in a style attribute. Change the address inside url('…'):

HTML

&lt;div class="hero-bg" style="background-image:url('../assets/img/hero.jpg')"&gt;&lt;/div&gt;

Always describe the picture in alt. It's read aloud by screen readers and helps search engines.

Recommended sizes#

Where	Size (px)	Shape
Full-screen hero and page-header backgrounds	2000 × 1200	Landscape; keep the subject away from the left if text sits there
Split and collage heroes, about and zigzag images	1200 × 1300	Close to square
Cards: services, blog, listings, portfolio	1200 × 900	4:3 landscape
Team and profile photos	800 × 1000	Portrait
Products	1000 × 1250	Portrait, same shape for every product
Avatars (testimonials, authors)	200 × 200	Square
Gallery	1600 on the long side	Mixed shapes make a masonry; the same shape makes even rows

Images are cropped to fit their frame, so exact sizes aren't required. Just use the right shape and keep the important part in the middle.

Keep pages fast#

Save photos as JPG or WebP at about 75–80% quality. Most should be under 300 KB; heroes under 500 KB.
Don't upload 6000-pixel camera originals. Resize first; free tools like Squoosh do this in the browser.
Images below the first screen already load lazily, only when scrolled into view.

Logos, icons and illustrations#

Client logos (logos section): give an image path (SVG or PNG with a transparent background), or plain text to show a wordmark.
Icons everywhere are Bootstrap Icons: set the name, e.g. "icon": "cup-hot".
Floor plans in the real estate demo are SVG files in src/img/; replace them with your own plans.