画像圧縮はCaesiumが結局便利だと思う
Web制作で画像を扱うことが多いのですが、画像の圧縮は結局Caesiumを使うことが多いです。
Figmaなどから画像を書き出して、そのままWordPressやサイトにアップロードすると、思ったより容量が大きいことがあります。
なので、サイトにアップロードする前にCaesiumでまとめて圧縮しています。
Caesiumとは
Caesiumは画像を一括で圧縮できる無料ソフトです。
JPEG、PNG、WebPなどに対応していて、複数の画像をまとめて一瞬で圧縮できます。
画像圧縮ツールはいろいろありますが、個人的には手動で画像を圧縮するならCaesiumが一番使いやすいと思っています。
Figmaから書き出した画像が結構重い
Figmaから画像を書き出すことがよくありますが、そのままだと結構重いです。
アイキャッチ画像やバナー画像でも、普通に1MBを超えることがあります。
1枚だけならまだいいのですが、ブログ記事や制作案件で何十枚も画像を使う場合は、結構な容量になります。
なので、Figmaから書き出した画像をそのまま使わずに、一度Caesiumに入れて圧縮してからアップロードしています。
WordPressにアップロードする前に圧縮したい
WordPressには画像圧縮プラグインもあります。
それはそれで便利なのですが、個人的にはアップロード前に圧縮しておきたいです。
理由は、アップロードした時点でメディアライブラリに重い画像が残るからです。
後から圧縮するより、最初から軽い画像をアップロードした方が管理しやすいです。
バックアップの容量も増えにくいので、特に画像が多いサイトでは大事だと思います。
Caesiumの使い方
使い方はかなり簡単です。
- Caesiumを起動する
- 圧縮したい画像をドラッグする
- 品質を設定する
- 出力先を指定する
- 圧縮する
これだけです。
画像が多い場合でもまとめて処理できるので、かなり楽です。
おすすめの設定
JPEGの場合は、品質75〜85くらいで使うことが多いです。
写真をきれいに見せたい場合は85くらい、ブログのアイキャッチや説明用の画像なら75〜80くらいでも十分なことが多いです。
PNGはロゴや図解、透過画像などで使うことが多いので、画質を見ながら調整しています。
WebPで使う場合も、だいたい80前後から試しています。
ちなみにWebpを使う場合でも
https://tools.solgeo.co.jp/tools/image-resizer
こういったサイトはかなり簡単にWebPにできるのでよく使ってます。
実際の流れ
自分の場合はだいたいこんな流れです。
Figmaで画像を書き出す
↓
Caesiumでまとめて圧縮
↓
必要ならWebPにする
↓
WordPressにアップロード
↓
記事やページに使う地味ですが、このひと手間で画像の容量がかなり変わります。
画像圧縮プラグインだけではだめなのか
だめではないです。
ただ、画像圧縮プラグインはアップロード後の処理なので、アップロード前に軽くしておいた方が安心です。
個人的には、Caesiumで事前に圧縮して、WordPress側でも必要に応じて最適化する、という形が良いと思っています。
まとめ
画像圧縮は地味ですが、Web制作ではかなり大事です。
Figmaなどから書き出した画像をそのままサイトにアップロードすると、ページが重くなる原因になります。
Caesiumを使うと、画像をまとめて一瞬で圧縮できるので、手動で画像最適化したいときにかなり便利です。
Web制作で画像を扱うことが多い人は、入れておいて損はないと思います。
コメント