ブログには、画像があった方が良いです。字ばっかり並んでても読みにくいから。
なんか記事にちなんだイメージだったり、手順の画面キャプチャだったり。
でも、昔と違ってモバイル端末でウェブを閲覧するユーザーが増えたり、スマホやデジカメ等の性能が上がって画像の解像度がどんどん大きくなったりと、画像をそのままブログに載せると、せっかく訪問してくれた方にすっごい重いページを表示させようとしてしまう残念な結果になってしまいます。
なんだったら、なかなか表示してくれないから戻って違う検索結果の記事とか読んじゃいますよね。
そんな残念な結果を招かない為に!ブログに載せる画像はちゃんと最適化してできるだけ閲覧してくれる方に迷惑をかけないようにしましょう!ってお話です。
目次
画像の最適化ってそもそも何??
最適化とは、要は画像のクオリティはなるべく維持してデータ容量を小さくする事です。
画像の容量が小さくなれば、通信の転送サイズが小さくなり、ページの表示速度が向上します。
サイトを開く時、あまり時間がかかるとそのサイト閲覧するのやめちゃったりします。
画像は、ページを表示する為のデータの大半を占めているので、なるべく画像の容量を小さくしてページを速く表示させて、観てくれている人に快適に記事を読んでもらう為の取り組みが最適化です。
ほぅほぅ、なるほど。で、どうやんの?
ってなりますねもちろん。
最適化するには、
1.画像を縮小する(表示サイズを小さくする)
2.画像を圧縮する(データの実質的な情報量を保ったままデータ量を減らした別のデータに変換する)
という2つの方法があります。
「縮小する」というのは、画像の表示サイズ自体を小さくするという方法です。pixel(ピクセル)とかで表されているあの、横と縦の大きさを小さくする事です。リサイズって言われますね。
よくデジカメやスマホで撮った写真をブログに載せたい事ってありますよね?
でも、これをそのままブログに載せると、めちゃくちゃ大きいサイズで載せる事になります。
機種やモードにもよりますが、サイトに載せる為に必要なサイズは余裕で超えております。
なので、まずは表示サイズ自体、そんなに大きいサイズいらないんだから小さくしましょう。
「圧縮する」というのは、詳しく説明しようとすると画像の拡張子や性質のお話にまでなってしまうややこしい事なのですが、簡単に言うと見え方には変わりない、不要な情報を取り除いて画像の容量を小さくするという方法です。
見え方変わらないならなるべく容量小さい方が良いに決まってますよね?じゃあ、小さくしましょう。
この、縮小と圧縮というのが主要な「画像最適化」の方法で、オンラインサービスを使ったりアプリを使ったり等々様々な方法で対処できるのですが、なるべく手間はかけたくないですよね。
そこで、プラグインの登場です!
WordPressには、この画像最適化をほぼ自動で行ってくれるとてつもなく便利なプラグインがあります!
プラグイン「Imsanity」とは?
WordPressに画像をアップロードするときに自動でリサイズしてくれるプラグインです。上述の1.を簡単にしてくれるやつです。
予め画像の最大幅を設定しておくと、その設定値を上回った画像をアップロードした際、縦横比を維持したまま設定サイズに収まるように自動でリサイズしてくれます。
ただ、リサイズ前の画像はなくなっちゃいます。元画像をリサイズしちゃうので。だから、オリジナル画像はどこかPCの中やストレージ等に保管しておきましょう。
設定項目も少なくわかりやすい、超オススメのプラグインです。
Imsanityの設定方法と使い方
インストール→有効化の手順は端折りますね。全プラグイン一緒ですもんね・・・
以下有効化後の設定手順、使い方です。
WordPress管理画面メニュー→設定→Imsanityを開きます。
設定方法
①「固定ページ / 投稿でアップロードされた画像」、「メディアライブラリへ直接アップロードされた画像」この2箇所を設定すると、ブログの記事に使おうとアップロードした画像のサイズを指定したサイズにリサイズしてくれます。
デフォルトで「最大の幅」が1024pxになっていますが、このままで良いと思います。これ以上大きい画像はそんなに必要ないと思うので。ただ、PCで画像をクリックした際に大きいサイズで画面いっぱいに表示させたいという場合等があるなら、2048pxとかに設定したら良いと思います。
「最大の高さ」は「0」になっていますが、これはこのままにしましょう。0にしておけば、「最大の幅」に合わせて縦横比を保ったままリサイズしてくれます。
②「その他の方法でアップロードされた画像(テーマヘッダー、背景、ロゴなど)」は、記事以外で使う画像等です。ここはなるべく綺麗な画像の方が良いですし、レスポンシブサイトのヘッダーだったら1920pxくらいの幅がある画像を使う必要があったりするかもしれないので、リサイズさせない方が良いです。初期値の「0」のままにしておけば、リサイズの対象外になりますのでご安心を。
③「JPG 画像品質」は、画像の綺麗さを落として軽くする設定箇所です。
これは、後述するプラグインでも設定がありますが、82を推奨しているのでデフォルトの82で良いかと思います。
「BMP 形式を JPG 形式へ変換する」、「PNG 形式を JPG 形式へ変換する」は、画像の種類を変換しますか~って設定です。変換したい時は自分でするのでデフォルトのままで良いでしょう。
各項目の設定が終わったら「変更を保存」をクリックして設定完了です。
「変更を保存」した時点から、アップロードする画像は全て自動でリサイズが行われます!とても楽チンに画像を小さくできるようになりました♪
使い方
で、設定したは良いけど今までも結構画像アップロードしちゃってるよ、それもリサイズしたいよ。という方、ご安心くださいませ。
できますんで。簡単に。
同じく設定画面の下ですね。
ここの、「画像を検索…」というボタンを押してみます。
そうすると、このプラグインを有効化する前にアップロードした画像を見つけてきてくれます!!
んで、リサイズしたい画像にチェックを入れて「選択した画像のサイズを変更する」をクリックすれば・・・今までの画像も全部リサイズしてくれますっ!!
神ですね♪
これで、1つ目の画像最適化手順「縮小」が完了です。これからは、サイズが大きすぎる画像をアップロードしてしまう心配もないですね♪
プラグイン「EWWW Image Optimizer」とは?
さて次は、圧縮のフェーズ。
「EWWW Image Optimizer」は、画質を劣化させずに画像ファイルのサイズを圧縮してくれるプラグインのひとつです。
圧縮はいくつかプラグインがありますが、コレが一番使いやすいです。個人的見解ですが、コレがベストです!
こちらはオリジナルの画像は残すかどうか設定で決められます。安心して圧縮しまくってください。
EWWW Image Optimizerの設定方法と使い方
こちらもまたまたインストール後からいきます。
WordPress管理画面メニュー→設定→EWWW Image Optimizerを開きます。
設定方法
先程のプラグインと比較して、たくさんの設定箇所がありますね。
でも、設定を確認しないといけないところはこの1箇所!
ここ、できれば元の画像は削除しておいた方がサーバーに余計なデータが残らないで済むし、チェックを付ける事をお勧めします!
どうせ先程のプラグインの問題で、どこかにオリジナルは保管しておくだろうし、不要な画像は残さないでおきましょう♪
その他の設定は、デフォルトが一番良いです。
これで、今後アップロードする画像は自動的に圧縮されてアップロードしてくれます♪
使い方
で、設定したは良いけど今までも結構画像アップロードしちゃってるよ、それも圧縮したいよ。という方、先程と同じですね、ご安心くださいませ。
できますんで。簡単に。
WordPress管理画面メニュー→メディア→一括最適化を開きます。
「最適化されていない画像をスキャンする」をクリックします。そうすると、圧縮されていない、このプラグイン導入前の画像を探してくれます。
そうするとこのように、圧縮していない、このプラグイン導入前にアップロードした画像が見つかりますので、「最適化を開始」を押せば完了!!
とても簡単に画像を圧縮できました♪
まとめ
プラグインは、入れすぎたりすると重くなったり意味不明な不具合が起こったり干渉し合って問題発生したりと怖い所もありますが、うまく選択して導入すると作業を何倍も効率化してくれます!
自分の作業でどこに時間がかかっているか、どの作業が面倒か等を考えメリット・デメリットを検討した上で、必要だと思うものはどんどん入れてもいいんじゃないかなと思います。