画像が重く、ページ表示に時間がかかる
商品画像やブログ画像をJPG・PNGのまま何枚も掲載すると、画像の内容や大きさによってページ全体が重くなることがあります。WebPはWeb向けの画像形式ですが、形式を変えるだけで必ず小さくなるわけではありません。
WebPを選べば、何も考えなくても必ず軽くなるの?
必ずではないよ。元画像の大きさと内容、画質設定で結果が変わるから、変換後の容量と見た目を比べよう。
一括変換の流れ
1.JPG・PNGを追加する
画像または画像入りフォルダーを追加します。「おおきく。」v2ではJPEG・PNG・BMP・GIF・TIFFを入力できます。アニメーションGIFは静止画像として処理されます。
2.完成サイズと縦横比の扱いを決める
3000×3000など幅と高さを指定します。画像全体を残すなら余白方式、余白なしで全面へ合わせるなら中央トリミングを選びます。
3.WebPと画質を選ぶ
保存形式をWebPにし、画質はまず90前後で試します。透明背景を残したい場合は透明余白を選び、保存後に透明部分が保たれているか確認します。
4.元画像と別の場所へ保存する
同名がある場合は連番を付け、元画像を上書きしません。WebP用のcwebp.exeはOokiku.exeと同じフォルダーに置いたまま使います。
PNGの透明背景もWebPへ残せる?
対応しているよ。ただし掲載先がWebPや透明表示に対応しているか、実際にアップロードして確認してね。
変換後に確認すること
- 画像の幅と高さが用途に合っているか
- 文字や商品の輪郭が崩れていないか
- 透明部分が必要な場合に保たれているか
- 掲載先がWebPに対応しているか
- 元画像より本当に容量が減ったか
JPEG・PNG・WebPを比べるときの条件
形式だけを変えた差を確認するには、完成サイズと画質条件をそろえます。写真、文字入り画像、透明画像では結果が異なるため、実際に掲載する種類ごとに確認してください。
| 画像 | 確認する点 |
|---|---|
| 写真 | 空や肌の階調、細部、容量 |
| 文字・図形 | 輪郭のにじみ、小さい文字の読みやすさ |
| 透明画像 | 透明部分が維持されるか、掲載先が対応するか |
| 複数枚 | 全件成功、保存先、合計容量、処理時間 |
実測:サイト用PNGを画質90のWebPへ変換
サイトで実際に使っているPNG画像3点を、元の幅・高さを変えずにcwebpの画質90でWebPへ変換しました。今回の画像では、いずれも約88〜89%小さくなりました。
| 元画像 | PNG | WebP(画質90) | 削減率 |
|---|---|---|---|
| おおきく。商品画像 | 1,769,346バイト | 208,248バイト | 88.2% |
| 透かし解説画像 | 1,243,870バイト | 132,762バイト | 89.3% |
| YouTube解説画像 | 1,342,108バイト | 144,366バイト | 89.2% |
無料版と有料版v2の違い
無料版の「おおきく。v1」はJPEG・PNG保存に対応します。WebP保存、余白または中央トリミングの選択、保存画質の調整を使う場合は有料版v2が対象です。無料版で操作感を確認してから、必要な形式に合わせて選べます。
よくある質問
JPGやPNGをWebPへ変換できますか?
できます。保存形式をWebPにして、完成サイズと画質を指定します。
WebPにすると必ず軽くなりますか?
必ずではありません。元画像と設定によっては差が小さい場合もあるため、変換後の容量と見た目を確認してください。
実測ではどのくらい小さくなりましたか?
今回のサイト用PNG3点・元寸法維持・画質90の条件では、88.2〜89.3%小さくなりました。画像内容が違えば結果も変わるため、目安ではなく限定した実測例として掲載しています。
無料版でもWebP保存できますか?
WebP保存は有料版v2の機能です。無料版v1はJPEG・PNG保存に対応します。
まとめ
WebPへの一括変換では、形式だけでなく完成サイズ、画質、透明背景、掲載先の対応をまとめて確認します。元画像を残して比較すれば、問題があっても戻せます。
最大1,000枚をWebPへ
「おおきく。」v2は指定サイズ、余白・中央トリミング、JPEG・PNG・WebP出力に対応します。
BOOTH版とMicrosoft Store版は同じ機能です。購入しやすい方を選べます。