How do I install the Embed Assets skill?

Run npx skillmds@latest add rebyteai/embed-assets in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Embed Assets safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Embed Assets?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Embed Assets free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Embed Assets?

rebyteai (@rebyteai) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Embed Assets by rebyteai — Agent Skill

Name: Embed Assets
Author: rebyteai

Embed Assets

Embed images, audio, and other assets into a single HTML file using base64 data URIs. Use when building self-contained HTML widgets or pages that need inline media. Triggers include "embed image", "embed audio", "inline asset", "base64 embed", "self-contained HTML", "single-file HTML with media".

rebyteai 89b6dd0 2.1 KB Updated Sep 17, 2026

File contents

Embed Assets into Single HTML

Total size limit: 5 MB per widget. Compress first, embed second.

Step 1: Compress

Images — convert to WebP, resize to display dimensions:

# Best: WebP lossy (tiny, good quality)
ffmpeg -i input.png -vf scale=800:-1 -quality 75 output.webp

# Or with ImageMagick
convert input.png -resize 800x -quality 75 output.webp

Audio — convert to low-bitrate MP3 or Opus:

# MP3, 64kbps mono (voice/narration)
ffmpeg -i input.wav -ac 1 -b:a 64k output.mp3

# Opus in WebM container (smaller, modern browsers)
ffmpeg -i input.wav -ac 1 -b:a 48k -c:a libopus output.webm

Video — avoid embedding video. Deploy to rebyte.pro instead.

Step 2: Embed as base64 data URI

# Encode to base64
base64 -w0 output.webp > output.b64   # Linux
base64 -i output.webp -o output.b64   # macOS

Then use in HTML:

<!-- Image -->
<img src="data:image/webp;base64,PASTE_HERE" alt="description">

<!-- Audio -->
<audio controls src="data:audio/mpeg;base64,PASTE_HERE"></audio>

<!-- Audio (Opus/WebM) -->
<audio controls src="data:audio/webm;base64,PASTE_HERE"></audio>

MIME types

Format	MIME type
WebP	`image/webp`
PNG	`image/png`
JPEG	`image/jpeg`
SVG	`image/svg+xml`
MP3	`audio/mpeg`
Opus/WebM	`audio/webm`
WAV	`audio/wav`

Size guidelines

Asset	Target	Approach
Icon/thumbnail	< 20 KB	WebP, 128px
Chart/diagram	< 100 KB	SVG preferred
Photo	< 200 KB	WebP, 800px, q75
Voice clip (30s)	< 250 KB	MP3 64kbps mono
Total page	< 5 MB	Hard limit for inline widgets

If total exceeds 5 MB, deploy to rebyte.pro with assets in the static/ directory instead.

---name: embed-assetsdescription: Embed images, audio, and other assets into a single HTML file using base64 data URIs. Use when building self-contained HTML widgets or pages that need inline media. Triggers include "embed image", "embed audio", "inline asset", "base64 embed", "self-contained HTML", "single-file HTML with media".---# Embed Assets into Single HTMLTotal size limit: **5 MB** per widget. Compress first, embed second.## Step 1: Compress**Images** — convert to WebP, resize to display dimensions:```bash# Best: WebP lossy (tiny, good quality)ffmpeg -i input.png -vf scale=800:-1 -quality 75 output.webp# Or with ImageMagickconvert input.png -resize 800x -quality 75 output.webp```**Audio** — convert to low-bitrate MP3 or Opus:```bash# MP3, 64kbps mono (voice/narration)ffmpeg -i input.wav -ac 1 -b:a 64k output.mp3# Opus in WebM container (smaller, modern browsers)ffmpeg -i input.wav -ac 1 -b:a 48k -c:a libopus output.webm```**Video** — avoid embedding video. Deploy to rebyte.pro instead.## Step 2: Embed as base64 data URI```bash# Encode to base64base64 -w0 output.webp > output.b64 # Linuxbase64 -i output.webp -o output.b64 # macOS```Then use in HTML:```html<img src="data:image/webp;base64,PASTE_HERE" alt="description"><audio controls src="data:audio/mpeg;base64,PASTE_HERE"></audio><audio controls src="data:audio/webm;base64,PASTE_HERE"></audio>```## MIME types| Format | MIME type ||--------|-----------|| WebP | `image/webp` || PNG | `image/png` || JPEG | `image/jpeg` || SVG | `image/svg+xml` || MP3 | `audio/mpeg` || Opus/WebM | `audio/webm` || WAV | `audio/wav` |## Size guidelines| Asset | Target | Approach ||-------|--------|----------|| Icon/thumbnail | < 20 KB | WebP, 128px || Chart/diagram | < 100 KB | SVG preferred || Photo | < 200 KB | WebP, 800px, q75 || Voice clip (30s) | < 250 KB | MP3 64kbps mono || Total page | < 5 MB | Hard limit for inline widgets |If total exceeds 5 MB, deploy to rebyte.pro with assets in the `static/` directory instead.

Frequently asked questions