WordPress

【WordPress】初心者の画像の最適化について

2020年3月31日

画像挿入する前に最低限やっておきたい画像の最適化

 

今回はWordPressの記事作成には欠かせない、画像の最適化についてご紹介します。

 

ちょっと面倒だなと思うかもしれませんが、最低限必要な内容だけなので頑張って理解していきましょう。


 

画像容量の最適化


画像の最適化が必要な理由を知る前に、簡単にCMSの特徴を理解しておきましょう。


CMS(コンテンツ・マネジメント・システム)の特徴を知ろう

■CMSを「導入していない」Webサイト
cms1-min

■ CMSを「導入している」Webサイト
cms2

 

引用:HITACHI Inspire the Next デジタルマーケティングソリューション

CMS(コンテンツ・マネジメント・システム)の1つであるWordPressは、ブログページ(サイト)にアクセスがある度に、データベースから必要な材料(テンプレート、文章、画像など)を取り出して、リアルタイムにページを作成する動的CMSと呼ばれています。

 

動的CMSは、完成形ページをデータベースに保存するCMSを利用していないWebサイトと比較して、表示速度が遅くれてしまう特徴があります。

 

WordPressでページ作成する際の材料となる画像は、テキストデータと比べてデータ量が多いため、表示速度に悪影響を与える要因となってしまいます。
そのため、少しでも画像サイズを小さくして、画面表示の負荷を軽減する必要があるのです。


画像を最適化する理由


画像を最適化しなければ、表示速度が遅くなることは理解していただいたと思います。


画像を最適化することで、表示速度が向上するメリットについて触れておきましょう。


モバイル端末に優しいブログになる(モバイルフレンドリー)


表示速度の向上することで、モバイル端末に優しいブログ(モバイルフレンドリー)につながります。


現在はPCではなく、多くの人がスマホを利用してインターネットを利用しており、その割合は7割以上とも言われています。


ブログの表示速度を改善することは、多くの読者の利便性を改善することにつながります。


逆にモバイルフレンドリーなブログでなければ、読者離れにつながってしまうでしょう。


SEO対策につながる


Googleはこれを理由に、スマホなどのモバイル端末で快適に利用できるWebサイトを高く評価するようになりました。


2020年3月5日、Googleは2020年9月までに、全サイトのデフォルト動作をモバイルファーストとする(Google検索でモバイルサイトを優先)することを発表しています。


そのため、初めのうちからしっかりと画像の最適化を行っていきましょう。
参考元:Google Webmaster Central Blog


画像サイズの調整


画像挿入時に適当な横幅の画像を挿入しても、WordPressが横幅を自動調整してくれます。



しかし、これでは無駄な画像容量の蓄積につながってしまうので、まずは自分のブログの横幅を調べる方法を知っておきましょう。



ブログの横幅を知る

 

  1. Google Chromeで自分のブログ記事を表示する。


  2. 「F12」キーを押して、Chromeのデベロッパーツール(検証機能)を立ち上げる。


    ※画面の右にデベロッパーツールがある場合は、「︙」を選択して、Dock sideを右から2番目のアイコンに変更して、デベロッパーツールを下側に移動させる。
    (横にあると正確な横幅が表示されません。)


    Chrome-Developer-Tools 
  3. デベロッパーツールの右上あたりにある矢印をクリックする


    Chrome-Developer Tools_bottom 
  4. ブログ記事部分が青色になるとこでクリックする。


    Chrome-Developer Tools-blue-select 
  5. デベロッパーツールの「Elements」から「Computed」をクリックする。


    Chrome-Developer Tools-Computed 
  6. 四角い箱の中の青い部分の右側の数字を確認する。


    width-size 

  7. 私のブログの横幅は730pxだったので、この横幅を超える画像はリサイズトリミングの対象となります。


リサイズ


Windowsアクセサリのペイントを使ってリサイズを行ってみましょう。



ここでは、横幅730pxにリサイズしていきます。



  1. 「ファイル」-「開く」でリサイズしたい画像を開きます。


    paint-file-open  

  2. 「ホーム」タブの「サイズ変更」をクリックします。


    paint-size-change 

  3. 「サイズ変更と斜頸」という画面のサイズ変更の単位をピクセルに変更して、水平方向に横幅を入力します。


  4. 縦横比を維持するにチェックがあることを確認して「OK」ボタンを押しましょう。


    paint-size-change-window 

  5. 「ファイル」-「名前を付けて保存」または「上書き保存」で画像を保存しましょう。



トリミング


同じくペイントを使ってリサイズを行ってみましょう。



  1. 「ファイル」-「開く」でトリミングしたい画像を開きます。


  2. 「ホーム」タブの「表示」をクリックして、ステータス バーにチェックが入っていることを確認します。


    states-bar 
  3. 「ホーム」タブの「選択」をクリックします。


    paint-select 
  4. トリミングしたい範囲を選択する。


    下のステータスバーでサイズを確認しながら目的のサイズに調整しましょう。


    paint-trim 

  5. 「ホーム」タブの「トリミング」をクリックして画像をトリミングします。


    paint-trim-botton 

  6. 「ファイル」-「名前を付けて保存」または「上書き保存」で画像を保存しましょう。



画像データ容量を減らそう(画像圧縮)


画像のサイズ調整が完了したら、今後は画像容量を圧縮してデータ容量を減らしましょう。



画像圧縮する


img- compression

  1. こちらのサイトにアクセスします。


  2. 右上にあるJPEG・PNG・PDFから、圧縮したい画像フォーマットを選択します。


  3. 圧縮したい画像をドラッグ&ドロップします。


  4. 「ダウンロード」をクリックして圧縮画像をダウンロードしましょう。


これで画像容量の圧縮が完了しました。



便利プラグインで圧縮する(EWWW Image Optimizer)


EWWW Image Optimizerプラグインを使用すると、画像をアップロード時に画像を劣化させることなく画像を圧縮してくれます。



既にアップロードしてしまった画像も1クリックで圧縮できる優れたプラグインです。



使い方についてはこちらの記事を参考にしてみてください。



 

 

 

お疲れ様でした。
以上が画像を利用する際に最低限必要な画像の最適化でした。



画像の使用が少なければ手動でも構いませんが、画像数が増えてくるとプラグインで管理が現実的です。ブログの規模や内容によって使い分けましょう。

 

-WordPress

© 2020 たべばか