ブログ運営

頭に入れておきたい♪ブログでの画像圧縮とサイズ変更方法について。

記事のタイトル

 

☝ウシ・・?
☝ウシ・・?
フリー素材の写真を入手したので、早速これをブログに貼り付けたいんだけど・・このままワードプレスにアップロードして貼り付けてもいいのかな??うーーん

 

って考え込んでいる人、ちょっと待ってください!

こういった人に是非読んでいただきたい内容になってます。

結論から言いますとこのまま貼り付けてはダメです。

  • 画像のサイズ最適化
  • 画像の容量の最適化

上記2点は必ずやってください

画像は重たいまま貼り続けると、ページの表示スピードが遅くなるからです。遅いとユーザーの途中離脱に繋がりますし、Google殿の方針にも反してしまいます。

というチャン太郎は最初何〜にも考えずに、ペタペタとクソ重たい画像を貼りまくってました笑

後から画像の修正をするのは手間で面倒臭い、皆さんには最初から習慣化してやっていくことをオススメします(‘ω’)ノ

 

この記事で伝えたい事

  • 画像サイズの適正化について
  • 画像容量の適正化について

 

チャン太郎
チャン太郎
1回覚えれば、同じことを繰り返すだけなので簡単。アオアォ〜ン

 

では早速一緒にやっていきましょう

 

ブログで使用の画像サイズ変更について

大きな画像から小さな画像へ

まずは画像サイズの方から見ていきます

画像サイズ最適化の必要性

ブログに貼り付ける画像サイズが大きいと、容量が重たくなりページ表示スピードが落ちてしまいます。あとレンタルサーバーの容量にも限りがありますので、できるだけ容量は軽くしておきたいところ。

まずは現状把握で、画像の貼り付けるスペース(px)=ブログテーマの幅がどれぐらいなのか知るべきです。それが分からないと、どれぐらいのサイズに変更していいか分かりません。

ワードプレスになりますが下記手順で、自分のテーマの幅がどれぐらいか?確認しましょう。

【手順1】Google Chromeのブラウザでブログをまず開きます。そしてマウスの右クリックで『検証』が出てきますのでこれを押します。

テーマ幅調査説明手順1

【手順2】styleに下記図があります、それの中央の枠組みに書いてある数値690pxがテーマ幅になります。カーソルをあてると青色に変化するところです。

テーマ幅調査説明手順2

切りのいいところで700pxが横幅にすべき数値になります。各ブログテーマで違いますので上記方法で調べてください。他テーマをみると大概640〜750pxぐらいです。

縦幅は比率で変えている(横幅を変更すればそれに追従)ので、チャン太郎は横幅だけ決めてます。

 

フリーソフトによりサイズ変更方法

画像サイズの変更ですが、フリーの画像編集ソフトがネット上にいくらでもありますのでそれを使ってください。

私はバルセロナベースのi Love IMGを使用してます。登録も何もいらないので即使用できます♪

☞i Love IMGはここから

特にこだわりのものがなかったらこれ使ってください。

 

早速試しに使ってみましょう

【手順1】まずソフトを立ち上げます。画像サイズ変更をクリック

サイズ変更の説明手順1

【手順2】次に赤枠内へサイズ変更したい画像をドロップしてください。

サイズ変更横1400px➔700px、縦は自動で今の比率で追従させる。

サイズ変更の説明操作手順2

【結果】

  • 700pxに落としたにも関わらず、画質はほとんど落ちてない。
  • 画像容量が277KB → 48KB ▲129KB低減できた
画像サイズ 画像容量
元の画像 横1400px 縦1836px 277KB
サイズ変更後の画像 横700px 縦918px 48KB

【結論】

ブログテーマ幅px以上、ここでは700px以上は容量を食うだけで良いことがない。貼り付ける前にサイズを調整ておく必要がある。

 

👇サイズ変更前後での比較画像掲載してます

元の画像
画像のサイズ(横1400px)×(縦1836px)
画像の容量277KB
画像サイズ1400のイラスト

 

サイズ変更後の画像
画像のサイズ(横700px)×(縦918px)
画像の容量48KB
画像サイズ700px×48KB

 

ブログで使用の画像圧縮(容量軽減)について

画像の容量を最適化

画像サイズ最適化とあわせまして、画像容量の最適化も重要なのでやっていくように習慣化しましょう。

 

圧縮により画像容量軽減が必要なわけ

前章と同じようなことが言えます。ブログに貼り付ける画像容量が大きいと重たくなり、ページ表示スピードが落ちてしまいます。そして読者が離れていく(;_;)/~~~

『じゃー容量をとことん軽くしてやろー』って攻めすぎると、画像が汚くなってしまう。

なのでまとめると

  • 容量はできる限り軽くしたい
  • 画像はそこそこ綺麗に保ちたい

バランスが取れている必要があります

 

フリーソフト使用により画像容量の圧縮

フリーソフトのバルセロナベースi Love IMGで容量を圧縮しましょう。

☞i love IMGはここから

 

早速やっていきましょう

ソフトを立ち上げて、画像の圧縮をクリックします。

画像圧縮操作説明手順1

 

圧縮したい画像を赤枠内にドロップします。あとは勝手に最適化してくれます。

できたものを保存して終了。ちょー簡単(^^♪

画像圧縮操作説明手順2

【結果】

  • 画像容量が232KB ➔ 42KB ▲190KB 低減できた
  • 画質もほとんど変わっていない
画像容量
元の画像 232KB
圧縮後の画像 42KB

圧縮前後での画像比較

元の画像 232KB
圧縮前の画像

 

圧縮後画像 42KB
圧縮後の画像

 

プラグインEWWW Image Optimizer使用による簡単『W圧縮』方法

これはワードプレス対象になります。

プラグイン『EWWW Image Optimizer 』があり画像をアップロードするだけで自動で圧縮してくれます。必要不可欠なプラグインなのでまだの方は入手してください

この記事でオススメする使用方法は、先程フリーソフトで圧縮した画像をさらに圧縮する『W圧縮』です。

 

フリー圧縮ソフト『i Love IMG 』 +  圧縮用プラグイン 『EWWW Image Optimizer』

 

まずはこの圧縮用プラグインをインストールしてください。

サクッと設定の手順だけ説明いたします。

EWWW Image Optimizerの設定をクリックします。

プラグイン操作手順1

ベーシックのメタデータを削除にチェックを入れます。

これは画像に含まれる、コメント・色情報など使用する側にとって不要なメタデータを削除することで、容量がより圧縮できるようになります。

プラグイン操作手順2

変換のコンバージョンリンクを非表示にチェックを入れます

jpg➔png、png➔jpgに変換されるのを無効化します。

拡張子が違う画像が複製され容量が増えたり、画質が劣化したりといいことがありませんのでチェック入れておいてください。

プラグイン操作手順3

あとは初期設定のままで大丈夫です。

以上が設定になります

『えーうっそぉ、そんなのあったの』ってリアクションしてる方、今までプラグインを使用してなかった人でも大丈夫ですよ(‘ω’)ノ

ダッシュボードメニューのメディア ➔ 最適化で、過去のアップロードした画像すべてを一度に最適化できますので非常に便利です。

 

まとめ:ブログでの画像取り扱いについて

では最後に説明してきた内容についてまとめていきます。

まとめ 注)①と③はワードプレス対象になります

  1. 画像サイズは、ブログのテーマにあったサイズにすることで最適化する
  2. 画像容量は、圧縮用フリーソフトを使用し最適化する
  3. 圧縮用プラグインとフリーソフトでW圧縮により最適化する

記事を書く上で、画像は欠かせない存在です。

最悪アイキャッチ画像、各段落毎のイメージ画像が無くても記事としては成り立ちます。

でも解説するイラストや写真の画像が無ければ、意図を正確に伝えることができず、読者の利便性を欠いた記事に仕上がってしまいます。

文章(言葉)は万能ではない!・・・なのでサポートに画像は必須です

ただ何も考えずに画像を多用し過ぎると、ページ表示速度が遅くなりますのでそれは避けなくてはなりません。画像の最適化を忘れず実施しましょう

 

以上長くなりましたが、お付き合いありがとうございました

ではまたお会いしましょう(‘ω’)ノ

こちらの記事もおすすめ!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA