H. Kapginlian
Technical Guides••7 min read•Language: English

Asset Library Management & Client-Side WebP Pipeline

Technical documentation for image compression, asset uploads, markdown embeds, and reference safety guards

H. Kapginlian
H. KapginlianNorth-Eastern Hill University (NEHU), Shillong

High-resolution photographs are crucial for illustrating fieldwork dispatches, archival documents, and cultural essays. However, uncompressed raw photos often exceed several megabytes, slowing page render times on cellular connections.

The CMS Studio includes an automated client-side WebP image pipeline that prepares photographs for web delivery before they are committed to GitHub.

1. Why WebP?

WebP is a modern image format developed by Google that provides superior lossless and lossy compression for web assets:

  • File Size Reduction: WebP images are typically 80% to 95% smaller than equivalent JPEGs and PNGs at comparable visual quality.
  • Universal Browser Support: Supported natively by all modern web browsers (Chrome, Safari, Firefox, Edge).
  • Faster Page Loads: Smaller file sizes dramatically lower First Contentful Paint (FCP) and Largest Contentful Paint (LCP) performance metrics.

2. Client-Side Canvas Conversion Pipeline

Instead of relying on backend image processing servers or command-line CLI tools, the CMS Studio performs image compression entirely inside your web browser using the HTML5 Canvas API.

When you drag and drop an image into the Assets tab:

  1. FileReader Ingestion: The browser reads the raw image bytes into memory as a Data URL.
  2. Dimension Scaling: If the image width exceeds 1400px, it is scaled down proportionally to 1400px width.
  3. Canvas Rasterization: The image is drawn onto an offscreen <canvas> element.
  4. WebP Encoding: The canvas exports a compressed WebP Data URL via canvas.toDataURL('image/webp', 0.85).
  5. Efficiency Reporting: The studio calculates the exact byte difference between the original and converted file (e.g. 2.4 MB -> 180 KB (-92%)).

3. Uploading & Committing Assets

Once converted, clicking Commit WebP to GitHub triggers the following sequence:

  1. The studio cleans and slugifies the filename (e.g. my-photo.webp).
  2. The base64 data is extracted and dispatched to the GitHub REST API (PUT /repos/owner/repo/contents/public/images/posts/[filename].webp).
  3. The image is written directly to the repository and immediately becomes available across the website under /images/posts/[filename].webp.

4. Copying and Embedding Images in Markdown

Every asset card in the Assets tab provides one-click action buttons:

Copy Markdown

Copies standard Markdown image syntax ready to paste into any article body:

![Linguistic fieldwork notes and notebook](/images/posts/linguistic-fieldwork-notes.webp)

Copy Path

Copies the raw web path (e.g. /images/posts/linguistic-fieldwork-notes.webp), useful for custom HTML tags or frontmatter cover assignments.

Set Cover

Directly sets the chosen image as the cover photograph for the article currently open in the Write tab and switches back to the editor automatically.

5. Deletion Safety Guard

Accidentally deleting an image that is actively referenced in an essay creates a broken image on the live website. To safeguard against this, the CMS Studio implements a safety check:

  • Reference Scanning: Before allowing deletion, the studio inspects the cover images and markdown bodies of all publications across the entire repository.
  • Blocked Deletion Modal: If the asset is currently referenced anywhere, deletion is strictly blocked. An amber alert dialog displays the exact titles and slugs of the articles referencing the image.
  • Safe Removal: Only when an asset is verified as unreferenced across all publications does the studio permit deletion from the GitHub repository.