って考え込んでいる人、ちょっと待ってください！
こういった人に是非読んでいただきたい内容になってます。
結論から言いますとこのまま貼り付けてはダメです。
- 画像のサイズ最適化
- 画像の容量の最適化
上記２点は必ずやってください
画像は重たいまま貼り続けると、ページの表示スピードが遅くなるからです。遅いとユーザーの途中離脱に繋がりますし、Google殿の方針にも反してしまいます。
というチャン太郎は最初何〜にも考えずに、ペタペタとクソ重たい画像を貼りまくってました笑
後から画像の修正をするのは手間で面倒臭い、皆さんには最初から習慣化してやっていくことをオススメします(‘ω’)ノ
この記事で伝えたい事
- 画像サイズの適正化について
- 画像容量の適正化について
では早速一緒にやっていきましょう
ブログで使用の画像サイズ変更について
まずは画像サイズの方から見ていきます
画像サイズ最適化の必要性
ブログに貼り付ける画像サイズが大きいと、容量が重たくなりページ表示スピードが落ちてしまいます。あとレンタルサーバーの容量にも限りがありますので、できるだけ容量は軽くしておきたいところ。
まずは現状把握で、画像の貼り付けるスペース（px）＝ブログテーマの幅がどれぐらいなのか知るべきです。それが分からないと、どれぐらいのサイズに変更していいか分かりません。
ワードプレスになりますが下記手順で、自分のテーマの幅がどれぐらいか？確認しましょう。
【手順１】Google Chromeのブラウザでブログをまず開きます。そしてマウスの右クリックで『検証』が出てきますのでこれを押します。
【手順２】styleに下記図があります、それの中央の枠組みに書いてある数値690pxがテーマ幅になります。カーソルをあてると青色に変化するところです。
切りのいいところで700pxが横幅にすべき数値になります。各ブログテーマで違いますので上記方法で調べてください。他テーマをみると大概640〜750pxぐらいです。
縦幅は比率で変えている（横幅を変更すればそれに追従）ので、チャン太郎は横幅だけ決めてます。
フリーソフトによりサイズ変更方法
画像サイズの変更ですが、フリーの画像編集ソフトがネット上にいくらでもありますのでそれを使ってください。
私はバルセロナベースのi Love IMGを使用してます。登録も何もいらないので即使用できます♪
特にこだわりのものがなかったらこれ使ってください。
早速試しに使ってみましょう
【手順１】まずソフトを立ち上げます。画像サイズ変更をクリック
【手順２】次に赤枠内へサイズ変更したい画像をドロップしてください。
サイズ変更横1400px➔700px、縦は自動で今の比率で追従させる。
【結果】
- 700pxに落としたにも関わらず、画質はほとんど落ちてない。
- 画像容量が277KB → 48KB ▲129KB低減できた
| 画像サイズ | 画像容量 | |
| 元の画像 | 横1400px 縦1836px | 277KB |
| サイズ変更後の画像 | 横700px 縦918px | 48KB |
【結論】
ブログテーマ幅px以上、ここでは700px以上は容量を食うだけで良いことがない。貼り付ける前にサイズを調整ておく必要がある。
👇サイズ変更前後での比較画像掲載してます
| 元の画像 |
| 画像のサイズ（横1400px）×（縦1836px） |
| 画像の容量277KB |
 |
| サイズ変更後の画像 |
| 画像のサイズ（横700px）×（縦918px） |
| 画像の容量48KB |
 |
ブログで使用の画像圧縮（容量軽減）について
画像サイズ最適化とあわせまして、画像容量の最適化も重要なのでやっていくように習慣化しましょう。
圧縮により画像容量軽減が必要なわけ
前章と同じようなことが言えます。ブログに貼り付ける画像容量が大きいと重たくなり、ページ表示スピードが落ちてしまいます。そして読者が離れていく(;_;)/~~~
『じゃー容量をとことん軽くしてやろー』って攻めすぎると、画像が汚くなってしまう。
なのでまとめると
- 容量はできる限り軽くしたい
- 画像はそこそこ綺麗に保ちたい
バランスが取れている必要があります
フリーソフト使用により画像容量の圧縮
フリーソフトのバルセロナベースi Love IMGで容量を圧縮しましょう。
早速やっていきましょう
ソフトを立ち上げて、画像の圧縮をクリックします。
圧縮したい画像を赤枠内にドロップします。あとは勝手に最適化してくれます。
できたものを保存して終了。ちょー簡単(^^♪
【結果】
- 画像容量が232KB ➔ 42KB ▲190KB 低減できた
- 画質もほとんど変わっていない
| 画像容量 | |
| 元の画像 | 232KB |
| 圧縮後の画像 | 42KB |
圧縮前後での画像比較
| 元の画像 232KB |
 |
| 圧縮後画像 42KB |
 |
プラグインEWWW Image Optimizer使用による簡単『W圧縮』方法
これはワードプレス対象になります。
プラグイン『EWWW Image Optimizer 』があり画像をアップロードするだけで自動で圧縮してくれます。必要不可欠なプラグインなのでまだの方は入手してください
この記事でオススメする使用方法は、先程フリーソフトで圧縮した画像をさらに圧縮する『W圧縮』です。
フリー圧縮ソフト『i Love IMG 』 + 圧縮用プラグイン 『EWWW Image Optimizer』
まずはこの圧縮用プラグインをインストールしてください。
サクッと設定の手順だけ説明いたします。
EWWW Image Optimizerの設定をクリックします。
ベーシックのメタデータを削除にチェックを入れます。
これは画像に含まれる、コメント・色情報など使用する側にとって不要なメタデータを削除することで、容量がより圧縮できるようになります。
変換のコンバージョンリンクを非表示にチェックを入れます
jpg➔png、png➔jpgに変換されるのを無効化します。
拡張子が違う画像が複製され容量が増えたり、画質が劣化したりといいことがありませんのでチェック入れておいてください。
あとは初期設定のままで大丈夫です。
以上が設定になります
『えーうっそぉ、そんなのあったの』ってリアクションしてる方、今までプラグインを使用してなかった人でも大丈夫ですよ(‘ω’)ノ
ダッシュボードメニューのメディア ➔ 最適化で、過去のアップロードした画像すべてを一度に最適化できますので非常に便利です。
まとめ：ブログでの画像取り扱いについて
では最後に説明してきた内容についてまとめていきます。
まとめ 注）①と③はワードプレス対象になります
- 画像サイズは、ブログのテーマにあったサイズにすることで最適化する
- 画像容量は、圧縮用フリーソフトを使用し最適化する
- 圧縮用プラグインとフリーソフトでW圧縮により最適化する
記事を書く上で、画像は欠かせない存在です。
最悪アイキャッチ画像、各段落毎のイメージ画像が無くても記事としては成り立ちます。
でも解説するイラストや写真の画像が無ければ、意図を正確に伝えることができず、読者の利便性を欠いた記事に仕上がってしまいます。
文章（言葉）は万能ではない！・・・なのでサポートに画像は必須です
ただ何も考えずに画像を多用し過ぎると、ページ表示速度が遅くなりますのでそれは避けなくてはなりません。画像の最適化を忘れず実施しましょう
以上長くなりましたが、お付き合いありがとうございました
ではまたお会いしましょう(‘ω’)ノ
