LiteBox guide

1. Why browser-local tools?

How LiteBox is built

Pros

Cons

Good when

Watch out

Examples

2. Image compression

JPEG, WebP, and PNG

Rough pattern (browser canvas)

const bitmap = await createImageBitmap(file);
const canvas = document.createElement("canvas");
canvas.width = bitmap.width;
canvas.height = bitmap.height;
canvas.getContext("2d").drawImage(bitmap, 0, 0);
bitmap.close();
canvas.toBlob(
  (blob) => { /* download blob */ },
  "image/webp",
  0.82
);

Memory and browser limits

When it fails

Decoded width × height × 4 bytes (RGBA) must fit in available RAM — split very large files first.

Good fits

3. Color conversion

CSS snippets

CSS variables

:root {
  --brand: #3366ff;
  --brand-rgb: 51, 102, 255;
}

.button-primary {
  background: rgb(var(--brand-rgb));
  color: #fff;
}

hsl() hover (conceptual)

.link {
  color: hsl(220 100% 56%);
}
.link:hover {
  color: hsl(220 100% 48%);
}

Accessibility & contrast

Check pairs, not isolated hues

Foreground #0f1218 on background #f4f6fb → run a WCAG contrast tool before shipping.

4. URL encoding & JWT

URL encode/decode patterns

JavaScript · single value

const q = encodeURIComponent("hello world");
// "hello%20world"
const back = decodeURIComponent(q);

JavaScript · build query string

const params = new URLSearchParams({
  name: "Lee & Co",
  next: "https://example.com/callback?x=1",
});
const s = params.toString(); // application/x-www-form-urlencoded rules

JWT: decode vs verify

Shape

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHl0w5N_XgL0n3I9PlFUP0THsR8U

Node (verify — illustrative only)

import jwt from "jsonwebtoken";
const payload = jwt.verify(token, secret); // needs secret / public key

5. Base64 images

How it works here

Advantages

Disadvantages

Use Base64 when

Avoid Base64 when

Real-world examples

HTML usage

HTML

<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." alt="Logo">

HTML · favicon

<link rel="icon" href="data:image/png;base64,iVBORw0KGgo..." type="image/png">

JavaScript

const logo = document.getElementById("logo");
logo.src = "data:image/png;base64,iVBORw0KGgoAAAANS...";

CSS backgrounds

CSS

.hero-section {
  background-image: url("data:image/jpeg;base64,/9j/4RiDRXhpZgAATU...");
  background-size: cover;
  background-position: center;
}

CSS · pseudo-element

.btn-download::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...") no-repeat center;
  background-size: contain;
}

6. Icon / SVG generation

7. AI image check

8. Limits & privacy

Privacy Policy