アプリアイコンを作成
一般的なfavicon、Apple Touchアイコン、Android/PWAアイコン、Webマニフェストを1つのZIPへまとめます。
開発者向け画像ツール
favicon・PWAアイコン・srcset・Web画像素材を生成
設置可能なアイコンZIP、レスポンシブWebP、LQIP/Data URI、スプライトシート、ピクセルアート、テクスチャ確認画像を端末内で作成します。
Favicon + PWATool Office
レスポンシブsrcsetTool Office
LQIP / Base64Tool Office
CSSスプライトTool Office
Web画像素材ジェネレーター
アイコンサイズやプレースホルダー形式ごとにページを分けず、画像の派生ファイルとコードを1つの開発フローで生成します。
ツールを読み込んでいます
ツールを読み込んでいます
Webサイト用の画像素材を準備する方法
きれいな元画像を用意し、素材の種類を選び、統一されたファイル名と実装コードをまとめて保存します。
レスポンシブ画像を作成
複数幅のWebPとsrcset/sizesコードを出力し、表示領域に合う画像をブラウザが選べるようにします。
軽量プレビューを作成
本画像の読み込み中に主要色と小さなぼかしData URIを表示できます。
開発へすぐ使える出力
ZIPに画像素材とコードをまとめ、名前付けや設置の間違いを減らします。
標準サイズ一式
1枚の正方形画像からブラウザ、Apple、PWA向けの一般的なサイズを生成します。
表示速度を改善
複数幅とプレースホルダーにより、すべての端末へ大きすぎる画像を送ることを避けやすくなります。
制作補助
スプライトの作成・分割、ピクセルアート拡大、テクスチャの継ぎ目確認ができます。
Web画像素材のよくある質問
faviconとPWAアイコンは何pxですか？
16、32、48 pxのfavicon、180 pxのApple Touchアイコン、192、512 pxのAndroid/PWAアイコンを含みます。
レスポンシブsrcsetは何に役立ちますか？
複数の画像幅とレイアウト情報をブラウザへ渡し、表示領域と画面密度に合うファイルを選べるようにします。
Base64プレースホルダーは必ず速くなりますか？
いいえ。小さなプレビュー用の追加リクエストを減らせますが、HTMLまたはCSSの容量は増えます。実際のページで測定してください。