IMA AI · Resources
IMA AI Website
Naming Standard
A consistent file and asset naming convention for every IMA AI web project — marketing sites, client sites, and group products. Applied without exception across all tiers.
Section 1
Core Rules
All file names across every IMA Group property must follow these rules without exception.
| Rule | Standard | Example |
|---|---|---|
| Case | Always lowercase — no uppercase letters | index-hero.webp NOT Index-Hero.webp |
| Separator | Hyphens only — no underscores, no spaces | about-team-img-1.webp NOT about_team_1.webp |
| Spaces | Never use spaces in any file name | product-banner.webp NOT product banner.webp |
| Numbering | If the type can ever have siblings — always number, even if only one exists today | index-sep-1.webp, index-who-we-are-img-1.webp |
| No numbering | If the type can only ever be one — never add a number | index-hero-1.webp, index-og-1.webp, about-ceo-avatar-1.webp |
| Descriptors | Use short, meaningful English words | index-who-we-are-img-1.webp |
| Extensions | Always include correct file extension | .webp .mp4 .svg .pdf |
| Versions | Add -v2, -v3 only for archived alternatives — live files have no version suffix | index-hero-1-v2.webp (archived draft only) |
Section 2
The File Name Formula
Every asset file follows one consistent pattern. The order is always page → descriptor → type → number.
[page]-[descriptor]-[type]-[number].[ext]
Examples: service-web-sep-2.webp · index-who-we-are-bg-1.webp · about-ceo-avatar-1.webp
[page]
Which page this file belongs to
Required
[descriptor]
Identifies the section or content on the page
When needed
[type]
What kind of asset — the role it plays
Required
[number]
Sequence number — always required, start at 1
Always
Critical order rule: The descriptor always comes before the type. index-who-we-are-bg-1.webp ✓ · index-bg-who-we-are-1.webp ✗
2.1 Numbering Rules
Always include a number. Every file. Every type. No exceptions.
Why always number? If you name today's only hero image index-hero.webp and later add a second for a slider, you are forced to rename the first file and update every reference in your code. If you start with index-hero-1.webp, adding a second is just adding index-hero-2.webp — nothing else changes. Rule of thumb: always start at 1. When you add a second file, just add 2. Nothing ever needs to be renamed.
| Scenario | Wrong ✗ | Right ✓ |
|---|---|---|
| Single hero image | index-hero.webp | index-hero-1.webp |
| Hero slider — first image | index-hero-1.webp | index-hero-1.webp |
| Hero slider — second image | index-hero-2.webp (forces rename of first) | index-hero-2.webp (no rename needed) |
| Single separator | index-sep.webp | index-sep-1.webp |
| Single OG image | index-og.webp | index-og-1.webp |
| CEO avatar | about-ceo-avatar.webp | about-ceo-avatar-1.webp |
| Product card | product-baju-kurung-moden-card.webp | product-baju-kurung-moden-card-1.webp |
| Product demo video | product-baju-kurung-moden-demo.mp4 | product-baju-kurung-moden-demo-1.mp4 |
2.2 Language Variant Suffix
When the same asset exists in more than one language, add a language code immediately before the number.
[page]-[descriptor]-[type]-[lang]-[number].[ext]
| Rule | Detail |
|---|---|
| Codes | ISO 639-1, two letters: en (English), zh (Chinese/Mandarin), ms (Malay) |
| When to use | Only when language variants actually exist. Single-language assets keep the plain pattern — English is the unmarked default, so no existing file needs renaming. |
| Position | Always between type and number. ✅ ...-gallery-en-1.webp ✗ ...-en-gallery-1.webp |
| No text in image | An image with no text is language-neutral — no suffix needed. The suffix only marks the language of text rendered inside the image. |
| Example file | What it is |
|---|---|
| social-platform-marketing-playbook-gallery-en-1.webp | IG carousel — cover card (English) |
| social-platform-marketing-playbook-gallery-zh-1.webp | RedNote carousel — cover card (Chinese) |
Section 3
Page Codes
Use these standardised short codes as the [page] prefix for all files.
| Code | Page | URL example |
|---|---|---|
| 404 | Error / not found page | /404 |
| about | About us / company page | /about |
| account | Customer account dashboard | /account |
| article | Individual article page | /article-[slug] |
| articles | Articles listing page | /articles |
| blog | Blog listing page | /blog |
| cart | Shopping cart page | /cart |
| case | Single case study detail | /portfolio/client-name |
| checkout | Checkout page | /checkout |
| collection | Product collection / category page | /collection/[category] |
| contact | Contact page | /contact |
| faq | Frequently asked questions | /faq |
| global | Shared across all pages — nav, footer, logos, fonts | — |
| index | Homepage / main landing page | / |
| landing | Campaign or ads landing page — separate from homepage | /promo/raya-sale |
| legal | Privacy policy, terms, returns policy | /privacy, /terms, /returns |
| login | Login / magic link page | /account/login |
| orders | Order history page | /account/orders |
| platform | IMA AI platform product and service pages | /platform-[product] or /platform-[product]-[service] |
| portfolio | Work / case studies listing | /portfolio |
| post | Individual blog post | /blog/[slug] |
| pricing | Pricing tiers page | /pricing |
| product | Individual product detail page | /product/[slug] |
| promo | Sale or promotions page | /promo/12-12 |
| resource | Single resource detail page | /resources/the-platform-marketing-playbook |
| resources | Resources, downloads, guides listing | /resources |
| service | Individual service detail page | /service/[slug] |
| social | Social media post assets — IG, RedNote, Facebook carousels | — |
| team | Team / people page | /team |
| thanks | Post-purchase thank you page | /thank-you |
Listing vs Detail: Some pages come in pairs. They share one image folder but use different prefixes. resources- = listing page. resource- = detail page. Same pattern applies to blog / post, articles / article, and portfolio / case.
Section 4
Type Codes
Use these standardised short codes as the [type] token in the file name.
4.1 Images
| Type code | Meaning | Typical usage | Example |
|---|---|---|---|
| hero | Full-width hero/banner image at top of page | Above the fold, primary visual | index-hero-1.webp |
| sep | Separator/divider image between sections | Visual breaks between content blocks | index-sep-1.webp |
| bg | Background image for a section | Sits behind text or overlaid content | about-values-bg-1.webp |
| card | Card or thumbnail image | Product cards, blog post thumbnails | product-main-card-1.webp |
| gallery | Gallery or detail image | Product image gallery (multiple shots) | product-main-gallery-1.webp |
| img | General content image within a section | Paired with text in a section | index-who-we-are-img-1.webp |
| avatar | Person photo or profile image | Team bios, founder, testimonials | about-ceo-avatar-1.webp |
| og | Open Graph / social share image | Meta tags for social previews | index-og-1.webp |
| thumb | Thumbnail image | Video thumbnails, small previews | blog-post-thumb-1.webp |
| pattern | Decorative pattern or texture | Background texture fills | global-pattern-1.webp |
| icon | Icon file (non-SVG raster fallback) | PNG icons when SVG is not possible | product-free-shipping-icon-1.png |
4.2 Videos
| Type code | Meaning | Typical usage | Example |
|---|---|---|---|
| hero | Hero/banner video (autoplay, muted) | Full-width background video above fold | index-hero-1.mp4 |
| sep | Separator video between sections | Animated visual break | index-sep-1.mp4 |
| demo | Product demo or explainer video | How it works, product walkthrough | product-main-demo-1.mp4 |
| bg | Background video for a section | Looping video behind content | about-values-bg-1.mp4 |
| story | Brand story or founder video | About page, brand values | about-brand-story-1.mp4 |
4.3 Documents & Other
| Type code | Meaning | Example |
|---|---|---|
| brochure | Downloadable product or company brochure | index-brochure-1.pdf |
| cert | Certificate, award, or accreditation | about-cert-halal-1.pdf |
| policy | Legal document — privacy, terms, returns | global-privacy-policy-1.pdf |
| data | Structured data file (JSON, CSV) | global-data-products-1.json |
| font | Custom web font file | global-inter-regular.woff2 |
Section 5
Full Examples — By Page
Reference file names for the most common page types. Follow these patterns exactly.
5.1 Homepage (index)
| File name | What it is |
|---|---|
| index-hero-1.webp | Main hero image at the very top of the homepage |
| index-hero-1.mp4 | Hero video version (if using video background) |
| index-sep-1.webp | First separator image (after hero section) |
| index-sep-2.webp | Second separator image (further down the page) |
| index-who-we-are-bg-1.webp | Background image for the Who We Are section |
| index-who-we-are-img-1.webp | Content image inside the Who We Are section |
| index-features-bg-1.webp | Background for the features/benefits section |
| index-features-img-1.webp | First image in the features/benefits section |
| index-features-img-2.webp | Second image in the features/benefits section |
| index-og-1.webp | Open Graph image for social sharing (1200×630px) |
5.2 About Page (about)
| File name | What it is |
|---|---|
| about-hero-1.webp | Hero banner at top of About page |
| about-story-img-1.webp | Image for the brand story / founding section |
| about-story-img-2.webp | Second image in brand story section |
| about-ceo-avatar-1.webp | CEO headshot photo |
| about-coo-avatar-1.webp | COO headshot photo |
| about-team-img-1.webp | Team group photo |
| about-sep-1.webp | Section separator on About page |
| about-values-bg-1.webp | Background image for values section |
| about-halal-cert-1.webp | Halal certification image |
| about-og-1.webp | Open Graph image for About page social sharing |
5.3 Product Page (product)
The descriptor is always the product slug — lowercase, hyphens only, no special characters. All products share one folder: images/product/.
| File name | What it is |
|---|---|
| product-baju-kurung-moden-gallery-1.webp | Primary photo of Baju Kurung Moden (main image) |
| product-baju-kurung-moden-gallery-2.webp | Second photo — angle 2 |
| product-baju-kurung-moden-gallery-3.webp | Third photo — detail shot |
| product-baju-kurung-moden-gallery-4.webp | Fourth photo — lifestyle shot |
| product-baju-kurung-moden-card-1.webp | Thumbnail shown on collection/category grid |
| product-baju-kurung-moden-og-1.webp | Open Graph image for social sharing |
| product-baju-kurung-moden-demo-1.mp4 | Product video (if available) |
| product-tudung-bawal-pleated-gallery-1.webp | Primary photo of Tudung Bawal Pleated |
| product-tudung-bawal-pleated-card-1.webp | Thumbnail for Tudung Bawal Pleated |
5.4 Service Page (service)
The descriptor is the service slug. All service images share images/service/.
| File name | What it is |
|---|---|
| service-web-design-hero-1.webp | Hero image for Web Design service page |
| service-web-design-process-img-1.webp | First image in the process / how it works section |
| service-web-design-process-img-2.webp | Second image in the process section |
| service-web-design-card-1.webp | Card thumbnail shown on services listing page |
| service-web-design-og-1.webp | Open Graph image for social sharing |
| service-seo-audit-hero-1.webp | Hero image for SEO Audit service page |
| service-seo-audit-card-1.webp | Card thumbnail for SEO Audit on listing page |
| service-ai-chatbot-demo-1.mp4 | Demo video for AI Chatbot service |
5.5 Global / Shared Files (global)
| File name | What it is |
|---|---|
| global-logo-1.svg | Primary full-colour logo (SVG — preferred) |
| global-logo-1.webp | Primary logo fallback (WebP — for email/OG use) |
| global-logo-white-1.svg | White version of logo (dark backgrounds) |
| global-logo-dark-1.svg | Dark version of logo (light backgrounds) |
| global-favicon.ico | Browser tab favicon (32×32) |
| global-favicon-192.png | PWA icon (192×192) — PNG required by spec |
| global-favicon-512.png | PWA icon (512×512) — PNG required by spec |
| global-og-default-1.webp | Default Open Graph image (used if no page-specific OG) |
| global-pattern-1.webp | Repeating decorative background pattern |
| global-inter-regular.woff2 | Custom web font — Inter Regular |
| global-inter-bold.woff2 | Custom web font — Inter Bold |
| global-privacy-policy-1.pdf | Downloadable privacy policy |
| global-returns-policy-1.pdf | Downloadable returns policy |
Favicon generation: Never create favicon files manually one by one. Use RealFaviconGenerator (realfavicongenerator.net): upload one high-resolution square logo (at least 512×512px SVG or PNG). It outputs the full package — global-favicon.ico, global-favicon-192.png, global-favicon-512.png, Apple Touch icon, and the HTML to paste into the site head. Rename the downloaded files to match this naming standard before adding to the repo.
5.6 Social Carousels (social)
IG and RedNote carousels are gallery sequences — same cards, language-tagged. The descriptor is the post slug; all posts share images/social/.
| File name | What it is |
|---|---|
| social-platform-marketing-playbook-gallery-en-1.webp | IG carousel — cover card (English) |
| social-platform-marketing-playbook-gallery-en-2.webp | IG carousel — card 2 |
| social-platform-marketing-playbook-gallery-zh-1.webp | RedNote carousel — cover card (Chinese) |
| social-platform-marketing-playbook-gallery-zh-2.webp | RedNote carousel — card 2 |
No text on a card? Drop the language suffix — social-[slug]-gallery-1.webp is shared across platforms. In a bilingual set that mixes text and neutral cards, tag every card (-en / -zh) so each platform keeps a complete 1→N sequence.
Section 6
Folder Structure
HTML files sit directly at root. All assets live in their matching subfolder. Maximum folder depth is always 2 subfolders — never create a third level.
/public/ │ ├── index.html ← homepage ├── about.html ← about page ├── resources.html ← resources listing page ├── resource-[slug].html ← each resource detail page ├── articles.html ← articles listing page ├── article-[slug].html ← each article page ├── platform-[product].html ← platform product overview page ├── platform-[product]-[service].html ← platform service page ├── service-[slug].html ← each service page ├── sitemap.xml ← always at root ├── robots.txt ← always at root ├── site.webmanifest ← always at root ├── favicon.ico ← always at root ├── apple-touch-icon.png ← always at root ├── web-app-manifest-192x192.png ← always at root ├── web-app-manifest-512x512.png ← always at root ├── .gitignore ← always at root │ ├── images/ │ ├── index/ ← homepage images │ ├── about/ ← about page images │ ├── resources/ ← resources listing + resource detail images (both share this) │ ├── service/ ← all service images (all slugs share this folder) │ ├── product/ ← all product images (all slugs share this folder) │ ├── articles/ ← articles listing + article detail images (share this folder) │ ├── platform/ ← all platform product pages (id, ca, ac, cs, etc.) │ ├── blog/ ← blog images │ ├── portfolio/ ← portfolio listing images │ ├── case/ ← case study images │ ├── landing/ ← campaign landing page images │ ├── promo/ ← sale / promotions images │ └── global/ ← logos, OG defaults, patterns │ ├── videos/ │ ├── index/ ← homepage videos │ ├── product/ ← product demo videos │ ├── service/ ← service demo videos │ ├── landing/ ← campaign landing videos │ ├── global/ ← shared / brand assets │ └── social/ ← IG / RedNote / FB post assets (all posts share, grouped by slug) │ ├── icons/ ← all SVG icon files ├── fonts/ ← web font files (.woff2) └── docs/ ← downloadable PDFs and documents
resources/ and resource/ share one folder. The prefix tells you which page the file belongs to. resources- (with s) = listing page. resource- (no s) = detail page.
images/resources/
├── resources-hero-1.webp ← listing page hero
├── resources-sep-1.webp ← listing page separator
├── resource-the-platform-marketing-playbook-hero-1.webp ← detail page hero
├── resource-the-platform-marketing-playbook-card-1.webp ← card shown on listing
└── resource-the-platform-marketing-playbook-og-1.webp ← OG for social sharing
├── resources-hero-1.webp ← listing page hero
├── resources-sep-1.webp ← listing page separator
├── resource-the-platform-marketing-playbook-hero-1.webp ← detail page hero
├── resource-the-platform-marketing-playbook-card-1.webp ← card shown on listing
└── resource-the-platform-marketing-playbook-og-1.webp ← OG for social sharing
Favicon files must stay at root. favicon.ico, apple-touch-icon.png, web-app-manifest-192x192.png, web-app-manifest-512x512.png, and site.webmanifest must all stay at the root — never move them to a subfolder. Browsers look for favicon.ico at yourdomain.com/favicon.ico automatically. iOS looks for apple-touch-icon.png at root when saving to home screen. Moving them breaks favicons on all browsers and iOS.
sitemap.xml and robots.txt must stay at root. Search engines look for them at yourdomain.com/sitemap.xml and yourdomain.com/robots.txt exactly. If they are in a subfolder, Google cannot find them.
All products share one folder. Do not create a subfolder per product. The product name in the file name is enough to group them. Sorting by name in any file manager will naturally cluster all images for the same product together. The same rule applies to services.
Folder depth rule
| Level | Example |
|---|---|
| Root | /public/ |
| Subfolder 1 — asset type | images/ |
| Subfolder 2 — page code | product/ |
| File | product-baju-kurung-moden-gallery-1.webp |
Section 7
Image Format & Compression Standard
All images must be exported as WebP. No JPG, PNG, or GIF — with the exceptions listed below.
7.1 Format Rules
| Format | When to use | When NOT to use |
|---|---|---|
| WebP | All photos, hero images, separators, backgrounds, cards, OG images, thumbnails | Never use for logos, icons, favicons, or fonts |
| SVG | All icons, logos, and simple illustrations — infinite scale, tiny file size | Never use for photos or complex images |
| PNG | Favicon (192px, 512px PWA icons) only — required by PWA spec | Do not use for anything else — use WebP instead |
| ICO | Favicon (.ico browser tab icon) only — generated by RealFaviconGenerator | Do not use for anything else |
| MP4 (H.264) | All videos — hero background, demo, separator | Do not use .MOV, .AVI, or .WEBM as primary format |
| WOFF2 | All custom web fonts | Do not use .TTF or .OTF on the web |
| Downloadable documents only | Do not use as display assets on web pages |
7.2 WebP Compression Standard
Use these quality settings when exporting. Lower quality = smaller file = faster page load. Always check visually after compression.
| Image type | Dimensions | WebP quality | Max file size | Notes |
|---|---|---|---|---|
| Hero image | 1920 × 900px | Q80 | 150KB | Focal subject centred — works for desktop and mobile crop |
| Hero video (poster frame) | 1920 × 900px | Q75 | 100KB | Shown before video loads — compress aggressively |
| Separator image | 1920 × 400px | Q75 | 80KB | Wide and short. Decorative — can compress harder. |
| Background image | 1920 × 1080px | Q70 | 120KB | Will be overlaid with content — compress hard |
| Product gallery (main) | 800 × 800px | Q85 | 80KB | Square. Highest quality — customer is evaluating product |
| Product gallery (additional) | 800 × 800px | Q80 | 60KB | Square. Slightly lower — supporting shots |
| Product card / thumbnail | 600 × 600px | Q75 | 40KB | Square. Shown in grid — many load at once |
| Feature / section image | 800 × 600px | Q80 | 60KB | 4:3 ratio. Pairs with text column. |
| Avatar / person photo | 400 × 400px | Q80 | 30KB | Square. Face centred. Compress moderately. |
| Open Graph image | 1200 × 630px | Q80 | 80KB | Used for social sharing previews — keep sharp |
| Pattern / texture | Tile size | Q70 | 20KB | Repeating tile — tiny file, repeated by CSS |
| Blog post thumbnail | 800 × 450px | Q75 | 50KB | 16:9 ratio for blog listings |
7.3 How to Export WebP — Use Squoosh
Squoosh is the primary tool for all manual compression at IMA AI. It is free, runs in the browser, and requires no installation. Go to squoosh.app. Squoosh processes everything locally — your images are never uploaded to any server.
| 1 | Open Squoosh | Go to squoosh.app in any browser — no login, no install |
| 2 | Upload | Drag and drop the image file onto the page, or click to browse |
| 3 | Select format | Click the format dropdown on the RIGHT panel — choose WebP |
| 4 | Set quality | Drag the Quality slider to the correct Q value for your image type (see table above) |
| 5 | Check visually | Use the centre slider to compare original vs compressed — check for blur or artefacts |
| 6 | Check file size | File size shows below the image — confirm it is within the max size for the image type |
| 7 | Resize if needed | Click Edit → Resize — enter the correct dimensions for your image type before downloading |
| 8 | Download | Click the Download button (bottom right) — file saves as .webp automatically |
| 9 | Rename | Rename the downloaded file immediately using the correct naming standard |
Bulk conversion tools (10+ images)
| Tool | Best for | Command / method |
|---|---|---|
| Squoosh (squoosh.app) | Standard tool — all manual one-off conversions | Browser — no command needed |
| Sharp (Node.js) | Automated bulk conversion in build pipeline | sharp('in.jpg').resize(1920,900).webp({quality:80}).toFile('out.webp') |
| ImageMagick (CLI) | Bulk terminal conversion | convert input.jpg -quality 80 -define webp:lossless=false output.webp |
| Figma export | Exporting design assets directly from Figma | Select frame → Export → WebP → set quality |
| Photoshop | Photo retouching workflow | File → Export → Export As → WebP → set quality |
Section 8
SVG Icon Naming
SVG icons stored in /icons/ follow a simplified naming convention — no page prefix needed as icons are shared across pages.
| File name pattern | Use | Example |
|---|---|---|
| icon-[name].svg | Single-colour UI icon | icon-cart.svg, icon-user.svg, icon-search.svg |
| icon-[name]-filled.svg | Filled variant of an icon | icon-heart-filled.svg |
| icon-[name]-outline.svg | Outline variant of an icon | icon-heart-outline.svg |
| icon-social-[platform].svg | Social media icon | icon-social-instagram.svg, icon-social-tiktok.svg |
| icon-payment-[provider].svg | Payment method logo | icon-payment-fpx.svg, icon-payment-visa.svg |
| icon-flag-[country].svg | Country flag icon | icon-flag-my.svg, icon-flag-sg.svg |
Section 9
What Not To Do
Common mistakes to avoid. Every example below has been seen in real projects.
| Wrong ✗ | Right ✓ | Rule broken |
|---|---|---|
| Hero Image Final v3 USE THIS.jpg | index-hero-1.webp | Spaces, uppercase, JPG, no page prefix, version in name |
| IMG_20240312_093412.jpg | about-ceo-avatar-1.webp | Camera auto-name — meaningless, wrong format |
| hero_banner.jpg | index-hero-1.webp | Underscore, JPG, no page prefix |
| HomepageBanner.jpg | index-hero-1.webp | CamelCase, JPG, no type code |
| photo1.jpg, photo2.jpg | product-baju-kurung-moden-gallery-1.webp | No page, no product name, wrong format |
| logo-FINAL.PNG | global-logo-1.svg | Uppercase, PNG instead of SVG |
| separator-section2.jpg | index-sep-2.webp | Verbose, JPG — use type code and WebP |
| bg_texture_dark.jpg | global-pattern-1.webp | Underscore, JPG, no page prefix |
| about-avatar-ceo.webp | about-ceo-avatar-1.webp | Wrong order — descriptor must come before type |
| index-bg-who-we-are-1.webp | index-who-we-are-bg-1.webp | Wrong order — section/descriptor first, then type |
Section 10
Code File Naming
For Next.js projects — pages, components, and utilities follow these conventions.
10.1 Pages (App Router — /app)
| File | Convention | Example path |
|---|---|---|
| page.tsx | Every route segment has a page.tsx | /app/page.tsx (homepage) |
| layout.tsx | Shared layout wrapper for a segment | /app/layout.tsx (root layout) |
| loading.tsx | Loading UI for a segment | /app/collection/loading.tsx |
| error.tsx | Error boundary for a segment | /app/product/error.tsx |
| not-found.tsx | 404 page | /app/not-found.tsx |
10.2 Components (/components)
| Convention | Pattern | Example |
|---|---|---|
| PascalCase filenames | ComponentName.tsx | HeroSection.tsx, ProductCard.tsx |
| Grouped by feature | /components/[feature]/ComponentName.tsx | /components/product/ProductGallery.tsx |
| Shared UI components | /components/ui/ComponentName.tsx | /components/ui/Button.tsx |
| Layout components | /components/layout/ComponentName.tsx | /components/layout/Navbar.tsx |
10.3 Utilities, Hooks & Types
| Type | Convention | Example |
|---|---|---|
| Utility functions | camelCase.ts in /lib | /lib/formatPrice.ts, /lib/getOrders.ts |
| Custom hooks | useCamelCase.ts in /hooks | /hooks/useCart.ts, /hooks/useIdentity.ts |
| TypeScript types | camelCase.ts in /types | /types/order.ts, /types/product.ts |
| API routes | /app/api/[route]/route.ts | /app/api/checkout/route.ts |
| Constants | SCREAMING_SNAKE_CASE in /constants | /constants/PAYMENT_METHODS.ts |
Section 11
Quick Reference Cheat Sheet
The most commonly needed file names at a glance.
| Scenario | File name |
|---|---|
| Homepage hero image | index-hero-1.webp |
| Homepage hero video | index-hero-1.mp4 |
| Homepage first separator | index-sep-1.webp |
| Homepage second separator | index-sep-2.webp |
| Homepage — Who We Are section image 1 | index-who-we-are-img-1.webp |
| Homepage — Who We Are background | index-who-we-are-bg-1.webp |
| Homepage OG image for social sharing | index-og-1.webp |
| About hero image | about-hero-1.webp |
| About — CEO photo | about-ceo-avatar-1.webp |
| About — team group photo | about-team-img-1.webp |
| About — brand story image 1 | about-story-img-1.webp |
| About — values section background | about-values-bg-1.webp |
| Product main gallery photo | product-baju-kurung-moden-gallery-1.webp |
| Product third gallery photo (3rd angle) | product-baju-kurung-moden-gallery-3.webp |
| Product card thumbnail | product-baju-kurung-moden-card-1.webp |
| Product feature icon (free shipping) | icon-free-shipping.svg |
| Product demo video | product-baju-kurung-moden-demo-1.mp4 |
| Service hero image | service-web-design-hero-1.webp |
| Service process section image | service-web-design-process-img-1.webp |
| Service card thumbnail | service-web-design-card-1.webp |
| Service demo video | service-ai-chatbot-demo-1.mp4 |
| FAQ page hero image | faq-hero-1.webp |
| Pricing page hero image | pricing-hero-1.webp |
| Team page — staff photo | team-ahmad-avatar-1.webp |
| Portfolio listing hero | portfolio-hero-1.webp |
| Case study hero image | case-bzubzu-hero-1.webp |
| Campaign landing hero | landing-raya-hero-1.webp |
| Promo / sale page banner | promo-12-12-hero-1.webp |
| Contact page hero image | contact-hero-1.webp |
| Blog listing hero image | blog-hero-1.webp |
| Blog post thumbnail | blog-post-thumb-1.webp |
| Platform product overview hero | platform-id-hero-1.webp |
| Platform CA service hero | platform-ca-livestream-hero-1.webp |
| Articles listing hero image | articles-hero-1.webp |
| Article page hero image | article-[slug]-hero-1.webp |
| Article card thumbnail | article-[slug]-card-1.webp |
| Main logo (SVG) | global-logo-1.svg |
| White logo (for dark backgrounds) | global-logo-white-1.svg |
| Favicon (browser tab) | global-favicon.ico |
| Default OG fallback image | global-og-default-1.webp |
| Cart icon SVG | icon-cart.svg |
| IG carousel card (English) | social-[post-slug]-gallery-en-1.webp |
| RedNote carousel card (Chinese) | social-[post-slug]-gallery-zh-1.webp |
| Instagram social icon SVG | icon-social-instagram.svg |
| FPX payment icon SVG | icon-payment-fpx.svg |
| Downloadable privacy policy | global-privacy-policy-1.pdf |
Questions about the standard?
Reach the IMA AI team directly.