# Icons, Images & Videos

## Icons, Images & Videos

**Folders:** `src/assets/images/`, `public/images/`, `public/videos/` · **Skill level:** Beginner

### Images
Image fields in content files use a path that starts with `/images/`:

```yaml
image: "/images/solution-details/contact.webp"
```

Consultiz looks for that path in two places:

| Put the file in…            | Path in content          | Result                                                      |
| --------------------------- | ------------------------ | ----------------------------------------------------------- |
| `src/assets/images/`        | `/images/…`              | Resized and compressed at build time, served in modern formats |
| `public/images/`            | `/images/…`              | Served exactly as it is                                     |

If a file with the same path exists in `src/assets/images/`, that one wins. So to replace an image, either overwrite the file in `src/assets/images/` with the same name, or add your file under a **new, unique name** and change the path in the content file. Match the spelling and capitalization exactly, and update the `imageAlt` (or `alt`) field next to it.

Images inside Markdown text (`![alt](/images/…)`) are read from `public/`.

<Aside type="tip">
  Prefer `src/assets/images/` for photos: the build creates smaller versions
  for each screen size, so you can upload good-quality originals.
</Aside>

### Useful Sizes
| Image                                   | Size or shape                     | Notes                                                    |
| --------------------------------------- | --------------------------------- | -------------------------------------------------------- |
| Page header backgrounds (`image` on inner pages) | 1920×565 or larger       | Dark overlay on top, so keep important detail away from the text |
| Banner slides (`bgImage` in `banner-slider.md`) | 1920 px wide or more      | Full-width background                                    |
| Social preview (`public/images/og-image.jpg`) | 1200×630                    | Used when a page has no `image`                          |
| Logo                                    | SVG                               | See [Site Identity & Logo](/consultiz/customization/site-identity-logo/) |
| Favicon source                          | Square SVG, or PNG ≥ 512×512      | Then run `npm run generate-favicons`                     |
| Client logos (`list` in `partner-marquee.md`) | Same height for every logo  | Transparent background                                   |

The cards crop images to fixed shapes (for example portrait team cards and blog cards), so check each changed image on a phone and a desktop.

### Alt Text
Most image fields have an `alt`, `imageAlt`, or `bgImageAlt` next to them. Describe what the image shows ("Two consultants reviewing a financial report"), not "image of…". Screen readers and search engines read it.

### Icons
Wherever a content file has an icon name (`icon:` in lists, `icon.name` in buttons), Consultiz looks the name up in this order:

1. **Brand icons**: `facebook`, `linkedin`, `twitter`, `instagram`, `youtube`, `github`, and other social networks.
2. **Your own SVG files** in `src/assets/images/icons/custom/`, by file name: `caret-right` is `custom/caret-right.svg`. A custom file wins over a Lucide icon with the same name.
3. **Any [Lucide](https://lucide.dev/icons/) icon**: `ArrowRight`, `arrow-right`, `Building2`, …

```yaml
icon:
  enable: true
  name: "ArrowUpRight"   # or "arrow-up-right"
```

Icons are drawn as inline SVG at build time, so they cost no extra downloads and follow the text color.

To add your own icon, save a single-color SVG in `src/assets/images/icons/custom/` and use its file name without `.svg`.

Some fields take an image path instead of a name, for example the rating badge (`icon: "/images/icons/rating-badge.svg"` in `solutions/english/-index.md`) and the social icons in `src/config/social.json`. Replace those files in `src/assets/images/icons/`.

### Videos And Downloads
Videos and files that visitors open directly live in `public/`:

| File                                       | Used by                                                     |
| ------------------------------------------ | ----------------------------------------------------------- |
| `public/videos/*.mp4`                      | Banner, testimonial, careers, and tax and accounting hero videos (`video`, `videoUrl`, `src` fields) |
| `public/videos/posters/`                   | Still images shown before a video plays (`videoPoster`, `poster`) |
| `public/company-desk.pdf`                  | The **Company Desk** footer link (`companyDesk` in `config.toml`) |
| `public/downloads/*.pdf`                   | Download buttons on case studies and the **Resources** menu |

Replace the demo files with your own, keep the paths or update them in the content files, and keep videos short and compressed: they are the largest files on the site. Video fields also accept a YouTube or Vimeo video where the field has a `provider` option.