Web用の複数サイズ
入力
hero.png・Web responsive・WebP 82%
出力
hero-320w.webp、hero-640w.webp、hero-960w.webp、hero-1280w.webp
画像リサイズ・一括書き出し
画像を選んで、Web、カード、OGP、SNS 用の画像をまとめて書き出せます。
画像処理
Loading tool
できること
- Webページ用のレスポンシブ画像をまとめて作る
- 記事やカード、OGP、SNS用の画像サイズをそろえる
- srcset や picture のコード例を実装担当に渡す
使い方
- 元画像を1枚選びます。
- 用途、書き出し方法、保存形式、画質、ファイル名を選びます。
- 結果を確認し、必要な画像をダウンロードしてコード例をコピーします。
例
OGP画像
入力
cover.jpg・OGP・枠いっぱいに切り抜く
出力
cover-1200x630.jpg
知っておきたいこと
- 最初の版ではZIP出力には対応していません。
- 大きい画像は数秒かかり、スマートフォンではメモリを多く使うことがあります。
- canvas 書き出し時に EXIF などのメタデータが失われる場合があります。
- 正式な証明写真や申請用写真の規格確認には対応していません。
- 容量を小さくすることが主目的なら、画像圧縮・WebP変換が向いています。
FAQ
- 選んだ画像は保存されますか？
- いいえ。KoguNavi に画像を保存する機能はありません。書き出した画像は必要に応じて保存してください。
- 「枠に収める」と「切り抜く」は何が違いますか？
- 「枠に収める」は画像全体を残して余白を作ります。「切り抜く」は指定サイズいっぱいに表示するため、端が切れることがあります。
- 位置情報などのメタデータは残りますか？
- canvas 書き出し時に EXIF などのメタデータが失われる場合があります。必要な情報は元画像で確認してください。
- 画像圧縮・WebP変換とは何が違いますか？
- この道具は、Web、カード、OGP、SNS 用に複数サイズを書き出すためのものです。容量を小さくすることが主目的なら、画像圧縮・WebP変換が向いています。