Unified Image Tools & Practical Guides
All tools run client‑side for privacy & speed. Compression / conversion / optimization / implementation helpers under one design system.
Featured Tools
Daily high‑frequency operations
- Im
Image Compressor
Batch compress images with quality & max width in the browser.
/compressorFeatured - Im
Image Resizer
Resize by fixed ratio or exact pixel size (multi-file).
/resizeFeatured - Fo
Format Converter
Convert JPEG / PNG / WebP while keeping transparency & quality.
/convertFeatured - HE
HEIC → JPG Converter
Batch convert iPhone HEIC/HEIF to JPG with quality & ZIP.
/heic-to-jpgFeatured
More Tools
Scenario specific helpers
- Th
Thumbnail / OGP Generator
Generate fixed size OGP/thumbnail images – crop or add padding.
/thumbnail - Ba
Background Remover
Automatically remove backgrounds to transparent PNG/WebP.
/bg-remove - EX
EXIF Remover + Auto Rotate
Strip GPS/device EXIF & apply orientation safely.
/exif-strip - Im
Image Cropper
Aspect presets (1:1 / 16:9 …) with focal center & output size.
/crop - Pr
Print Size Calc (px⇄mm⇄DPI)
Convert px/mm/DPI and required pixels for print pages.
/print-size - Co
Color Palette Extractor
Extract key colors & export CSS variables / JSON.
/palette - Co
Compare Slider
Before/After slider with quick visual quality check.
/compare - sr
srcset Generator
Generate responsive srcset/sizes from width list.
/srcset - Ba
Batch Rename & Fingerprint
Rename with tokens {name}/{w}/{h}/{ext}/{version} + ZIP.
/rename - Hi
High Density Export
Export 1x/2x/3x asset set (browser only).
/density-export - PN
PNG Lossless Optimizer
Lossless re-encode (palette & dithering roadmap).
/png-lossless - OG
OGP Thumbnail Generator
Generate 1200×630 OGP safe-area thumbnails.
/ogp-thumbnail - Pl
Placeholder Generator
Dominant Color / Tiny SVG / LQIP placeholders.
/placeholders - Ba
Batch Optimizer
Apply compression & resize settings to all images.
/batch-optimize - Pa
Palette + Contrast
Palette with WCAG contrast & CSS variables.
/palette-extractor - Qu
Quality Ladder
Compare WebP/AVIF variants (size / PSNR / SSIM / diff heatmap).
/quality-ladder - Di
Dither Compare Viewer
Side-by-side Floyd / Ordered / Blue Noise dithering difference.
/dither-compare - Co
Color Diff Heatmap
Pseudo‑color heatmap (ΔE style) to inspect local compression artifacts.
/color-heatmap - PN
PNG Re-Optimize Checker
Estimate further lossless PNG reduction potential (% saving).
/png-reopt - sr
srcset Width Planner
Suggest breakpoint widths & byte savings from layout samples.
/srcset-planner - LQ
LQIP / BlurHash / SVG Batch
Generate & compare LQIP, BlurHash, Tiny SVG placeholders.
/lqip-blurhash - Li
Light/Dark Theme Diff
Highlight low contrast risk regions between light & dark variants.
/light-dark-diff
Latest Articles (JA)
Recently added or updated
- AR
A4印刷の最適ピクセル数とDPI早見表（入稿の実務）
A4をきれいに印刷するための最適ピクセル数（300/350/200ppi）と計算式、塗り足し・トンボ・入稿チェックの実務。Webと印刷（DPI/ppi）の違い、よくある落とし穴、公開前チェックまで。
2025-09-07JA - AR
ALTテキスト完全ガイド — アクセシビリティ×SEOの両立
ALTの役割・書き方・長さ・NG例。figure/figcaption・装飾画像の扱い、リンク画像やグラフのコツ、生成AI時代の注意点まで。実務テンプレとチェックリスト付き。
2025-09-07JA - AR
アニメーション画像の最適化 — APNG/WebP/MP4の選び方と落とし所
動く画像を“軽く・崩さず・互換性を保って”。APNG/WebP/MP4の比較、透過・ループ・自動再生の注意点、置き換えの判断軸、チェックリストとFAQまで実務で迷わないガイド。
2025-09-07JA - AR
画像アセットのZIP配布UX（命名・階層・プレビュー・ダウンロード計測）
ZIP配布を“使いやすく”する設計。命名・階層・プレビューHTML・GA4計測・失敗時のフォールバックまで、運用で失敗しない実務テンプレを整理。
2025-09-07JA - AR
自動ホワイトバランス＆色かぶり補正：Gray World＋シャドウ保護（Sharp）
屋内照明の黄かぶり、蛍光灯の緑かぶり…Gray Worldベースの自動WBにシャドウ保護と彩度復元を足して、破綻しにくい色補正を構築。Next.js APIとCLI付き。
2025-09-07JA - AR
AVIFの適応的クロマサブサンプリング：4:2:0/4:2:2/4:4:4自動選択でテキスト滲みと容量を両立
領域ごとにクロマサブサンプリング(4:2:0/4:2:2/4:4:4)を切替える AVIF Adaptive Chroma の実務。エッジ/テキスト/肌色/フラット背景の検出、ブロックマップ生成、PSNR/SSIM/bytes 回帰テストまで。
2025-09-07JA - AR
AVIFエンコード・チートシート（実務デフォルト集）
libavif(avifenc)の実務設定を用途別に最小化。写真・UI・透過の推奨値、量子化（cq-level）、サブサンプリング、スピード、10bit有無の判断を1枚で。
2025-09-07JA - AR
AVIF 可変品質(Adaptive Q)戦略：複雑度/領域別にビットを再配分する
AVIFの品質値を一律にせず、SSIM/VMAFの傾斜やテクスチャ複雑度を解析して領域ごとにQを変動させる手法。マクロブロック勾配・残差統計・2パス再配置の実装例とCI計測。
2025-09-07JA - AR
AVIF 大判画像タイル戦略：遅延分割/LOD/視点適応ロードの実装
4000px超の大判画像をAVIFタイル分割(512/1024)とLQ先行/インタラクション遅延読み込みで表示負荷と帯域を最小化。タイル命名/Manifest生成/priority制御/ズームパン処理/CIでの容量回帰検知まで。
2025-09-07JA
目的別に探す
- 画像形式と圧縮（WebP/JPEG/PNG/AVIF/HEIC）
用途に応じて最小容量で画質を保つための形式選びと圧縮の原則。写真/図/ロゴ/透過での実務の落とし所、Q値・サブサンプリング、運用のテンプレまで。
- サムネ・OGP（比率・安全域・可読性）
OGP/サムネを“クリックされる見た目”に。比率・安全域・文字数・配色・書き出しの最短ルールとテンプレ。媒体ごとの切り抜きにも崩れにくい設計。
- EXIF・向き・プライバシー（提出/共有の安全化）
共有前に“危ない情報”を消す。EXIFの位置情報削除、自動回転、背景透過の白縁回避、モザイク/ぼかしの安全なかけ方を実務フローで。
- 印刷と解像度（px⇄mm⇄DPI）
Webと印刷は単位が違う。等倍印刷で必要なピクセル数（DPI/ppi）を理解し、A4などの入稿に迷わないための早見表と計算ツール。
- CWV最適化（LCP/CLS/INP×画像）
レイアウトの安定（CLS）、初期表示の速さ（LCP）、操作応答（INP）を画像側で最適化するための設計。予約サイズ・優先度・遅延読み込みなど。
- スクリーンショット最適化（にじみ/可読性/軽量化）
UIスクショを“読みやすく軽く”。可逆/非可逆の使い分け、減色・シャープ・フォントレンダリング、公開前チェックのテンプレ。
- 色管理（sRGB / Display‑P3 / ICC）
“色が変わる/くすむ”を防ぐカラーマネジメント。sRGB正規化、P3の使いどころ、ICCプロファイル、CSS 色との整合。
- 配信・CDN・キャッシュ（Cache‑Control/ETag/SWR）
画像配信の“壊れない速さ”。不変資産はハッシュ名＋長期キャッシュ、可変はSWR＋条件付きGET、CDNのs-maxageでTTFBを下げる実務。
- 動画/アニメーション最適化（WebM/MP4/GIF置換）
短尺UI動画・アニメの最適化。poster/予約サイズ/自動再生/優先度/オフスクリーン制御、GIF→動画/WebP置換まで。
- アクセシビリティ（代替テキスト/色覚配慮/コントラスト）
画像の役割別alt設計、色覚多様性への配慮、コントラスト・線種・形状で“伝わる図解”に。FAQ/チェックリストも。
- 自動化/バッチ/CI（サムネ生成・EXIF除去）
SmartCrop や顔検出での自動トリム、OGP自動生成、EXIF/GPSの自動除去、CI での画像パイプラインなど運用自動化。