サーバにアップロードする前に、画像データを最適化する方法
こんばんは、しろもじです。
今回はWordPressに画像データ（写真やスクリーンショットなど）をアップロードする前に、データ容量、サイズなどを最適化しておく方法を解説していきます。
WordPressに画像データなどをアップロードする記事は以下のものを参照下さいね。
https://textfield.net/blog/add-media画像データを最適化しておく必要性
まず大前提ですが、なぜWordPressに（正確にはサーバに）画像データをアップロードする前に最適化しておくべきなのか？ というのを解説しておきます。
WordPressでブログを運営される場合、普通はレンタルサーバを借りることになると思われます。
レンタルサーバではストレージの容量により料金が決まることが多いので、契約しているプランでのストレージの上限が存在します。
TEXT FIELDが借りているサーバはmix hostですが、これのスタンダードプランでは現在150GBのストレージとなっています。
150GBもあればそれほど心配しなくても良さそうですが、例えばiPhoneなどで写真を取ると1枚あたり数MBのサイズになります。
1GB＝1024MBですから写真1枚あたり3MBとすると約340枚、2MBとしても512枚になります。
ブログ1記事にどれくらい写真（画像データ）を使うかにもよりますが、長くブログを運営していくことを考えると画像データの容量は重要な要素となってきます。
また不必要に大きなデータは、閲覧者が読み込む際のデータも大きくなることを意味しますので、読み込みスピードにも影響してきます。
最近の光回線であれば数MBなど一瞬で表示されますが、それでも容量は少ないに越したことはありません。
またそもそも論になりますが、WordPressのデフォルトの設定では最大2MBまでしかアップロードすることができません。
そのようなことから、アップロード前にできるだけ画像データの容量を少なくしておくことが重要となってきます。
画像データをリサイズする（Mac プレビュー機能）
まずはMacで使えるプレビューAppによるサイズ変更の方法を見ていきましょう。
画像データの容量を減らす方法として「サイズを変更する方法」と「圧縮する方法」があります。
今回は「サイズを変更する」になります。
まずはMacで画像を開きます。
今回はTEXT FIELDのトップページのスクリーンショットを開いてみました。
元データはこのようになっています。
サイズが1,330×800ピクセルで、容量は598KBです。
リサイズするにはプレビューの「ツール」から「サイズを調整」を選びます。
イメージの大きさを変更するポップアップが開きますので、ここで調整していきます。
今回は幅を起点にして変更します。
1,330を840に変更します。
「縦横比を固定」はチェックを入れておきましょう。
これを外すと幅だけが変更されてしまい、画像自体が変わってしまいます。
幅の数値を入れて「OK」をクリックすると、サイズが変更されます。
変更後のサイズを確認してみましょう。
大きさは840×505ピクセルに変更され、容量も598KB→381KBになりました。
元のものより約63％の容量になったことで、小さくなりましたね。
今度はもうひとつの方法を見ていきましょう。
GIMPというフリーソフトを使って画像サイズを変更します。
GIMPの簡単な使い方などはこちらをご覧下さい。
GIMPを使って画像データのサイズを変更する
まずは画像をGIMPで読み込みます。
メニューの「画像」から「画像の拡大縮小」を選びます。
プレビューと似たようなウィンドウが開きますので、ここでも幅を840に変更し「拡大縮小」をクリックするとサイズを変更できます。
今度は598KB→328KBへと54％になりました。
容量の変化に違いがあるのはGIMPがサイズ変更の際に、多少画像を圧縮しているからです。
圧縮とは不要なデータを削除することで、データサイズを小さくできるものです。
ただ、あまり圧縮をしすぎると画像自体が劣化してしまうので、ほどほどにしておくのが良いでしょう。
プラグイン「EWWW Image Optimizer」による圧縮
プラグインの「EWWW Image Optimizer」を導入しておくと、アップロード時に更に画像を圧縮してくれます。
プラグインについては以下の記事で解説しました。
上記のGIMPでリサイズした画像をアップロードすると251KBまで落としてくれます。
これが冒頭でも貼り付けていた、次の画像になります。
598KBの画像が251KBまで小さくなったことで、約42％の容量になりました。
随分小さくなりましたね。
このような方法で、できるだけ画像を小さくしていくことでサーバストレージの節約に繋がります。
注意点
先程も言いましたが、画像は小さくすればするほど、圧縮すればするほど劣化していきます。
ですので、程々にしておくほうが良いでしょう。
ちなみにTEXT FIELDは開設後約1年になりますが、WordPressやテキストデータなどコミコミで約1GBを使用しています。
結構画像を乗っけてきたと思うのですが、画像を小さくすることでこの程度で収まっています。
これならmixhostのスタンダードプラン（150GB）なら150年は運営していけそうです。
また、画像によってはあまり小さくしすぎない方が見やすいものもあるとは思います。
例えば写真の綺麗さを比較するような記事でしたら、できるだけ生データをアップロードしたいですよね。
WordPressの最大アップロードサイズは変更することができます。
それはまた今度解説しましょう。
そのように小さくても良い画像、大きいほうが良い画像と切り替えてアップロードするとよいかと思われます。
□ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □
今日も最後までお読み頂きありがとうございました！
小説執筆関連の記事は →「小説講座」
小説の投稿関連の記事は →「小説投稿記」
ブログ関連の記事は →「小説家のためのブログ運営」
読んだ本のレビューは →「読んでレビュー」
デジタルガジェット関連は →「デジタルもの」
に、ありますのでぜひ合わせてお読み下さいね！