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/:
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 () are read from public/.
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 |
| 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:
- Brand icons:
facebook,linkedin,twitter,instagram,youtube,github, and other social networks. - Your own SVG files in
src/assets/images/icons/custom/, by file name:caret-rightiscustom/caret-right.svg. A custom file wins over a Lucide icon with the same name. - Any Lucide icon:
ArrowRight,arrow-right,Building2, …
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.