AbsoluteJS

absolutejs-image-optimization-example

absolutejs-image-optimization-examplev0.0.1betaDev Tools

This project showcases the AbsoluteJS Image component across four frameworks — React, Vue, Svelte, and Angular — plus the data-optimized attribute for plain HTML and HTMX. Each demo page renders the same set of images so you can compare the developer experience and output across all six approaches.

#Installation

BASH
# Private workspace project: ~/abs/examples/image-optimization

#Capabilities

Overview

This project showcases the AbsoluteJS Image component across four frameworks — React, Vue, Svelte, and Angular — plus the data-optimized attribute for plain HTML and HTMX. Each demo page renders the same set of images so you can compare the developer experience and output across all six approaches.

Frameworks

Framework — Component / Attribute — Import

React — <Image> — import { Image } from "@absolutejs/absolute/react/components"

Vue — <Image> — import Image from "@absolutejs/absolute/vue/components/Image.vue"

Show 4 more

Svelte — <Image> — import Image from "@absolutejs/absolute/svelte/components/Image.svelte"

Angular — import { ImageComponent } from "@absolutejs/absolute/angular/components"

HTML — N/A — uses a build-time attribute on standard tags

HTMX — N/A — same build-time attribute, works with HTMX partial swaps

Image Component Props

All four framework components share the same prop interface:

Prop — Type — Default — Description

src — string — — — Required. Image source path (e.g. /assets/jpg/landscape.jpg)

Show 10 more

alt — string — — — Required. Alt text for accessibility

width — number — — — Intrinsic image width in pixels

height — number — — — Intrinsic image height in pixels

sizes — string — — — Responsive sizes descriptor (e.g. (max-width: 640px) 100vw, 340px)

priority — boolean — false — Adds a preload link, sets loading="eager" and fetchPriority="high"

fill — boolean — false — Image fills its parent container with object-fit: cover

unoptimized — boolean — false — Bypasses the optimization endpoint and serves the original file

quality — number — 75 — Output quality (0–100) for lossy formats

loading — string — "lazy" — Loading strategy — "lazy" or "eager"

fetchPriority — string — "auto" — Fetch priority hint — "auto", "high", or "low"

HTML / HTMX: data-optimized

For plain HTML and HTMX pages, add the data-optimized attribute to any tag. At build time AbsoluteJS will:

Rewrite src to the optimization endpoint (/_absolute/image)

Generate a responsive srcset with all configured sizes

Show 3 more

Add loading="lazy" and decoding="async" automatically

Serve AVIF/WebP variants based on browser support

To skip optimization for a specific image, omit the data-optimized attribute.

Configuration

Image optimization is configured in absolute.config.ts:

images options

Option — Type — Default — Description

Show 10 more

formats — string[] — ["webp"] — Output formats to generate (e.g. ["avif", "webp"])

The optimization endpoint (/_absolute/image) accepts these query parameters at runtime:

Parameter — Description

url — Source image path

w — Target width

q — Quality (0–100)

Built-in defaults

Device sizes: 640, 750, 828, 1080, 1200, 1920, 2048, 3840

Image sizes: 16, 32, 48, 64, 96, 128, 256, 384

Default quality: 75

Demo Pages

Each framework renders the same set of examples:

Responsive images — width, height, and sizes for automatic srcset

Priority loading — priority flag for above-the-fold images

Show 2 more

Fill mode — fill flag to cover a parent container

Unoptimized — unoptimized flag to bypass processing

Testing

Runs Playwright end-to-end tests that verify image optimization output across all frameworks.

Outcomes

What you can build

Build on the supported package contract

Use absolutejs-image-optimization-example through its supported public entry points.

Hardening checklist

Production guidance

Make every external boundary explicitPin the deployed absolutejs-image-optimization-example version, replace example or memory-backed dependencies with durable implementations, bound external calls, protect credentials, and emit enough evidence to retry or recover safely.

Follow in order

Troubleshooting path

1
Trace from the first failed boundary
Reproduce the smallest canonical absolutejs-image-optimization-example example, confirm the supported entry point and version in the API explorer, then inspect the first boundary that did not produce its documented result.

#HTML / HTMX: data-optimized

Partial snippet

For plain HTML and HTMX pages, add the data-optimized attribute to any tag. At build time AbsoluteJS will:

HTML
<img
  data-optimized
  src="/assets/jpg/landscape.jpg"
  width="1200"
  height="800"
  sizes="(max-width: 640px) 100vw, 340px"
  alt="Landscape photo"
/>

#Configuration

Partial snippet

Image optimization is configured in absolute.config.ts:

TS
import { defineConfig } from "@absolutejs/absolute";

export default defineConfig({
  images: {
    formats: ["avif", "webp"],
  },

  // Framework source directories
  angularDirectory: "./src/frontend/angular",
  reactDirectory: "./src/frontend/react",
  svelteDirectory: "./src/frontend/svelte",
  vueDirectory: "./src/frontend/vue",
  htmlDirectory: "./src/frontend/html",
  htmxDirectory: "./src/frontend/htmx",

  assetsDirectory: "./src/backend/assets",
  stylesConfig: "./src/frontend/styles/indexes",
});

#Package commands

Scripts declared by this package manifest.

bun run devabsolute dev
bun run formatabsolute prettier --write
bun run lintabsolute eslint
bun run startabsolute start
bun run testplaywright test
bun run typecheckabsolute typecheck
Private workspace project
This project is maintained inside the workspace and is not published as a standalone npm package.