⚡
 Integration
Client-Side Accelerator • Zero Backend Changes

1-Line Drop-in Script Integration

Accelerate your web application in less than 60 seconds. Add the lightweight script to your document <head>, and ImageEngine automatically offloads all images to the global Edge CDN with built-in instant origin fallback.

1 Add to Your Website Header

1.2 KB Gzipped

Insert this snippet inside your HTML <head> tags. Replace acme with your approved tenant identifier and store with your subdomain (or main for root domain): 

<!-- ImageEngine Edge CDN Drop-in -->
<script 
  src="https://imagengine.grisma.info.np/engine.js" 
  data-tenant="acme" 
  data-subdomain="store" 
  async>
</script>

2 How It Works Under The Hood

01

DOM Interception

The script listens to page load and active DOM mutations using MutationObserver, capturing all newly inserted or existing <img> elements dynamically.

02

Smart URL Rewriting

Converts relative or origin paths to optimized edge URLs, computing responsive device pixel ratios (w=...) automatically without manual srcset generation.

03

Zero-Risk Revert

Preserves the original source in memory. If any network timeout or origin 404 occurs, the element instantly rolls back to its original src without broken images.

3 Script Attributes & Customization

Attribute Type Default Description
data-tenant string (required) — Your registered tenant identifier (e.g. acme).
data-subdomain string 'main' The target subdomain of your application (e.g. app).
data-avatar boolean 'false' When set to 'true', applies smart face-aware square cropping.
data-cdn string 'https://img.grisma.info.np' Choose CDN endpoint: https://img.grisma.info.np or https://img.topnepali.com.
4

Skipping Specific Images

If you have special icons, base64 inline images, or SVGs that you don't want processed through the edge, add the data-no-engine attribute: 

<!-- This image remains completely untouched -->
<img src="/assets/icons/logo.svg" data-no-engine alt="Company Logo">

5 Framework & Platform Guides

Next.js (App Router / Pages)

Add to your root app/layout.tsx or pages/_document.tsx:

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://imagengine.grisma.info.np/engine.js"
          data-tenant="acme"
          data-subdomain="app"
          strategy="beforeInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

WordPress (functions.php)

Insert in your active child theme's functions.php:

function add_imageengine_script() {
    wp_enqueue_script(
        'imageengine-client',
        'https://imagengine.grisma.info.np/engine.js',
        array(),
        '2.0',
        false
    );
    wp_script_add_data('imageengine-client', 'data-tenant', 'acme');
    wp_script_add_data('imageengine-client', 'data-subdomain', 'store');
}
add_action('wp_enqueue_scripts', 'add_imageengine_script');
🛡️

Zero-Disruption Fallback Guarantee

The drop-in client attaches an autonomous error listener to every rewritten image element before swapping the source. If our edge encounters an upstream downtime, DNS glitch, or rate limit quota, the browser instantly swaps back to your server's original asset within 5 milliseconds. Your end-users will never experience broken images.

Need Tenant Registration?

Submit your root domain and expected monthly traffic to activate your multi-tenant key.

Submit Onboarding Request ↗