Graphics and Images

1. Overview

Image assets are produced from original files in the media/ directory by a script:

npm run prepare:images

The script (scripts/prepare-images.mjs) crops photos to the aspect ratio of the slot they fill, extracts the winged brand mark from the logo SVG, and renders the favicon set and the social sharing image. Re-run it whenever a file in media/ changes, then commit the generated output.

Icons and illustrations inside the pages are inline SVGs in the Astro components and need no image files.

Source (in media/) Output Used by

Logo Title Square.svg

src/assets/logo-mark.svg, public/favicon.svg, public/favicon.ico, public/apple-touch-icon.png

Header, footer, browser tab, iOS home screen

Logo Title Rect.svg + hero2.jpg

public/og-image.jpg

Social sharing preview (Open Graph / Twitter tags in BaseLayout.astro)

hero2.jpg

src/assets/images/hero-home.jpg

Home page hero background

about.jpg

src/assets/images/about-team.jpg

About page, "Our Story"

event-setup.jpg

src/assets/images/service-event-management.jpg

Event Management service page highlight

timing-results.jpg

src/assets/images/service-timing-results.jpg

Timing & Results service page highlight

event-websites-helderberg.png

src/assets/images/service-event-websites.jpg

Event Websites service page highlight (screenshot placed in a browser frame)

Photos in src/assets/images/ are rendered through Astro’s <Image> component, which produces WebP files and a responsive srcset at build time. Files in public/ are served as they are.

2. Logo and Brand Mark

The logo is the winged mark with the "MYRIAD EVENTS" wordmark set as vector paths. Two originals are kept in media/:

  • Logo Title Rect.svg — landscape lockup, 919 x 484 units

  • Logo Title Square.svg — square lockup, 920 x 920 units, with the mark and the text on separate layers

The script extracts the eight wing paths from the square file into src/assets/logo-mark.svg with fill="currentColor", so the same file renders in primary blue in the header and in white in the footer. The header and footer import it as an SVG component:

import LogoMark from '../assets/logo-mark.svg';

<LogoMark class="h-7 w-auto text-primary-600" />

3. Favicon Set

File Format Dimensions Purpose

public/favicon.ico

ICO containing PNG entries

16, 32 and 48 px

Browser tab icon for all browsers

public/favicon.svg

SVG

Scalable

Vector icon for modern browsers

public/apple-touch-icon.png

PNG

180 x 180 px

iOS / iPadOS home screen icon (square corners; iOS rounds them)

All three show the white wing mark centred on a primary-blue (#3C5D7A) tile. To change the tile colour, edit PRIMARY in scripts/prepare-images.mjs and re-run the script.

They are linked in src/layouts/BaseLayout.astro:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

4. Social Sharing Image

public/og-image.jpg (1200 x 630 px, JPEG) is shown when a page URL is shared on WhatsApp, Facebook, LinkedIn or X. It is composed from a darkened crop of media/hero2.jpg, the full logo in white, the tagline and the site address.

The Open Graph and Twitter tags in BaseLayout.astro point every page at this one image. Keep the file under 300 KB so WhatsApp previews still render.

5. Photo Slots

Page Slot Supply Notes

Home

Hero background

16:9, at least 2400 x 1350 px

The brand gradient is laid over the photo; the headline sits on the left third, so keep the subject centre-right. Object position is set in src/pages/index.astro.

Service pages

Highlight photo beside the highlight text

16:9, 1200 x 675 px or larger

Passed to ServicePage through the image and imageAlt props. Pages without a photo show a grey placeholder. Registration and Equipment Rental still need one.

About

"Our Story" photo above the text

Wide landscape, about 3:1

The team photo is used as supplied (1864 x 640 px).

5.1. Adding a Photo to a Service Page

  1. Copy the original into media/.

  2. Add an entry to the PHOTOS list in scripts/prepare-images.mjs with the output name and aspect ratio, and run npm run prepare:images.

  3. Import the output in the page and pass it to the template:

    import highlightPhoto from '../../assets/images/service-registration.jpg';

const pageData = {
  // ...
  image: highlightPhoto,
  imageAlt: 'Describe the photo for screen readers',
  // ...
};

6. Asset Index

Asset File Location Dimensions Format Status

Logo mark

src/assets/logo-mark.svg

Scalable

SVG

Exists

Browser favicon

public/favicon.ico

16 / 32 / 48 px

ICO

Exists

SVG favicon

public/favicon.svg

Scalable

SVG

Exists

Apple touch icon

public/apple-touch-icon.png

180 x 180 px

PNG

Exists

Social sharing image

public/og-image.jpg

1200 x 630 px

JPEG

Exists

Home hero photo

src/assets/images/hero-home.jpg

2400 x 1350 px

JPEG

Exists

About team photo

src/assets/images/about-team.jpg

1864 x 640 px

JPEG

Exists

Service highlight photos

src/assets/images/service-*.jpg

1600 x 900 px

JPEG

3 of 5 (Registration and Equipment Rental outstanding)

Inner page hero banners

not yet added

1920 x 640 px

JPEG

Planned