Images

Every image on your website is listed in one file: src/config/assets.ts. Each image has a short name (like hero), and pages refer to images by that name. Change the file in one place and it updates everywhere that image is used.

What an image entry looks like

hero: {  src: "/images/hero.jpg",  alt: "A woman in a soft ivory robe stands calmly against a warm oak-panelled wall",  position: "22% 30%",},

• hero: the image's name. Do not change it, because pages use it to find the image.
• src: where the image file is.
• alt: a short description of the photo for people using screen readers, and for Google.
• position: which part of the photo stays visible when it is cropped (optional).

Replace an image

1. Prepare your photo

   Use JPG or WebP for photos. About 2400 pixels wide is plenty for large photos; 1200 pixels is enough for smaller ones. Try to keep each file under about 500 KB. Free tools like Squoosh can shrink files without visible quality loss.

2. Copy it into public/images

   Use simple file names: lowercase, no spaces. For example front-desk.jpg, not IMG 4031 (final).JPG.

3. Point the entry at your file

   In src/config/assets.ts, find the image you want to replace and change its src. Start with /images/ (the public part is left out):

   src/config/assets.tsCopy

   hero: {  src: "/images/front-desk.jpg",  alt: "Our bright reception desk with fresh flowers",  position: "50% 50%",},

   You can delete the credit lines from demo images. They only describe the demo photos.

4. Describe the photo

   Update alt so it describes your new photo. If an image is purely decorative, use an empty description: alt: "".

Control cropping

Images fill their frame, so some edges may be cropped on different screen sizes. position sets the focus point as left-right then top-bottom:

• "50% 50%": keep the center (default)
• "50% 20%": keep the top area, good for portraits so faces are not cut off
• "80% 50%": keep the right side

Photos for team members, services and articles

Content lists in src/data refer to images by name. For example, a team member has image: "teamCamille". To give a new team member a photo, add a new entry in assets.ts (copy an existing one and give it a new name), then use that name in the data file.

Clean up after replacing all photos

The demo loads its photos from Unsplash. When none of your images use an images.unsplash.com address any more, you can remove that permission from next.config.ts: delete the remotePatterns block inside images.

Using images hosted elsewhere

If your images live on another website or service (for example a CDN), allow that address in next.config.ts, then use the full web address as the src:

images: {  remotePatterns: [    { protocol: "https", hostname: "cdn.your-domain.com" },  ],},

Restart the website (stop it with Ctrl + C, then run npm run dev) after changing next.config.ts.