jSquashとは？ブラウザ・Web Worker向けWASM画像コーデック

ページ内ナビ

概要

jSquashはSquoosh由来の画像コーデックをWebAssemblyパッケージとして提供し、ブラウザやWeb Workerから画像のデコード、エンコード、リサイズを行えるようにします。AVIF、JPEG、JPEG XL、PNG、QOI、WebPなどを用途別パッケージとして選べます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-09-30

主な特徴

必要な画像形式のコーデックだけを組み込む

AVIF、JPEG、JPEG XL、PNG、QOI、WebP、リサイズなどが個別パッケージに分かれており、変換処理に必要な機能だけを選択できます。

出典：[2]

ブラウザ・Web Worker・Edge実行環境でWASMを使う

WebとWeb Worker向けに構成され、動的コード実行を使わないため、Cloudflare Workersのようなcode evaluationを許可しない環境でも利用できることがREADMEで説明されています。

出典：[2]

向いている用途

クライアント側やEdgeで画像を変換・圧縮したい処理に向く

アップロード前の画像圧縮、JPEGからWebPへの変換、ブラウザ内の画像編集など、画像データをJavaScript実行環境内で処理したい用途に向きます。

出典：[2]

導入前の確認

Node.jsは主対象ではなくサポートが限定的

READMEはNode.js対応を実験的・補助的なものとして扱い、Node.js中心の用途では他の選択肢を案内しています。

出典：[2]

ESMとWASMのbundle設定を事前に確認する

全パッケージはESMで、CommonJS前提の環境では追加のtranspileが必要になる場合があります。ViteやNuxtではWASM読み込みに関する既知の問題と設定例も記載されています。

出典：[2]

参考にした公式資料

[1]jamsinclair/jSquash repository(2026-09-30)
[2]jSquash README(2026-09-30)
[3]jSquash Apache-2.0 license(2026-09-30)

編集部からの補足

サーバーへ画像を送らずブラウザやEdge側で変換できる点が特徴です。一方でNode.jsは主対象ではなく、Vite/NuxtではWASMのbundle設定を先に検証する必要があります。

3ステップで試す

1
JPEGとWebPのcodecを読み込む
READMEのブラウザ向け例と同じCDN importで、変換元と変換先のcodecを用意します。
import { decode } from "https://esm.sh/@jsquash/jpeg"; import { encode } from "https://esm.sh/@jsquash/webp";
2
JPEGを取得してデコード
画像をArrayBufferとして取得し、jSquashのImageData形式へデコードします。
const response = await fetch(imageUrl); const imageData = await decode(await response.arrayBuffer());
3
WebPへエンコード
デコード済み画像をWebPへ変換します。本番では対象ブラウザとbundle環境でWASM読み込みも確認してください。
const webpBuffer = await encode(imageData);

公式READMEで確認

成長

成長の推移 · 直近30日

732 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 0
Open PR: 12

開発アクティビティを蓄積中です。

Built with

TypeScript

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

image
image-codec
image-codecs
image-processing
wasm
web-assembly
webassembly
avif
image-decoder
image-encoder
jpegxl
png

Stars: 732
Forks: 38
Watchers: 4
Open Issues: 15
Contributors: 5
所有者種別: User
主要言語: TypeScript
ライセンス: Apache-2.0
リポジトリ最終更新: 2026/01/05

概要

特徴と向いている用途

主な特徴

必要な画像形式のコーデックだけを組み込む

ブラウザ・Web Worker・Edge実行環境でWASMを使う

向いている用途

クライアント側やEdgeで画像を変換・圧縮したい処理に向く

導入前の確認

Node.jsは主対象ではなくサポートが限定的

ESMとWASMのbundle設定を事前に確認する

参考にした公式資料

3ステップで試す

JPEGとWebPのcodecを読み込む

JPEGを取得してデコード

WebPへエンコード

成長

開発アクティビティ

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHub Topics

関連情報

あわせて探訪