すもベビ
「ブログの読み込み速度を上げるために画像は小さくしたいんだけど、具体的にどうやれば良いの?」
ブログの画像に関して、初心者からよく受ける質問です。
画像の大きさ(容量)は、ブログの読み込み速度に影響を及ぼします。
容量が大きいと読み込みに時間がかかり、せっかく記事を開いてもらえたのに、表示が遅くて閉じられることになりかねません。
そこで重要なのが、画像のリサイズと容量の圧縮です。
この記事では、無料でできる、ブログ画像のリサイズと容量圧縮の方法について解説します。
すもベビ
画像のリサイズと容量圧縮は、ブログ記事を軽量化し、読み手にストレスなく記事を開いてもらうために必要不可欠な作業です。
WordPressブログに画像をアップロードするときは、必ずリサイズと容量圧縮をしましょう。
目次
ブログ画像はリサイズ→容量圧縮してアップロードする
画像のリサイズと圧縮には、2つの無料ツールを使います。
- リサイズ:I LOVE IMG
- 容量圧縮:tiny png
2つとも、ブラウザ上で作業するツールです。
ダウンロードが不要なので、ネット接続できるPCやタブレットがあれば、どこでもリサイズと圧縮ができます。
ブログ画像のリサイズ:I LOVE IMG
まずは、I LOVE IMGでリサイズをします。
公式サイトを開き、「画像を選択」をクリックします。
フォルダが開くので、リサイズしたい画像を選び、「開く」をクリックするか、画像をドラッグしてI LOVE IMGの画面にドロップします。
画像編集画面が開きます。
幅(px)欄に「1200」と入力し、「画像のサイズ変更」をクリックします。
すもベビ
幅を1200にするのは、Googleが推奨しているからです。
Google砲を狙う場合、1200px以上の画像の方がクリック率などが高まるというデータ(Googleガイドライン)があります。
画像サイズ変更中という画面が表示されるので、しばらく待ちます。
画像のサイズが変更されたら、「サイズ変更された画像をダウンロード」をクリックし、リサイズ後の画像をダウンロードします。
すもベビ
画像のリサイズは、「ペイント」でもできます。
もし普段からペイントを使い慣れているなら、使い続けてもOKです。
やり方がよく分からないなら、I LOVE IMGのやり方を覚える方が楽です。
ブログ画像の要領圧縮:tiny png
次に、リサイズした画像の要領を圧縮します。
画像圧縮用のツール「tiny png」の公式サイトを開きます。
すもベビ
I LOVE IMGでも画像圧縮は可能ですが、tiny pngの方が簡単です。
ツールを2つ使う手間はありますが、慣れると使い分けのメリットが分かってきます。
「Drop your…」をクリックします。
フォルダが開くので、画像を選択してドラッグ&ドロップするか、「開く」をクリックします。
すると、自動で圧縮が開始されます。
圧縮中は、下の画像が表示されます。
圧縮が完了すると、パンダが両手をあげて教えてくれます。
「download」をクリックすると、画像がダウンロードされます。
リサイズ後の画像サイズはどれくらいにするの?
すもベビ
「リサイズ後の画像サイズは、何KBまで?」という質問をよく受けます。
元画像の大きさや1記事に貼る画像の枚数にもよりますが、1画像につき50~100KB以内に収めるのが基本です。
100KBを超える画像を何枚も貼り付けると、記事の読み込み速度が大幅に遅れ、ユーザーに「開くのを待つ」というストレスを与えてしまいます。
自動圧縮は画質が悪くなる?
WordPressブログの場合、アップロードした画像を自動で圧縮してくれるプラグインがあります。
代表的なのは、次の2つです。
- EWWW Image Optimizer
- Imsanity
すもベビ
EWWW Image Optimizerは、すでにアップロードした画像の一括圧縮もできるプラグインで、ブロガーの間では有名です。
自動圧縮は非常に便利ですが、画質が悪くなるという問題があります。
正しい設定ができるなら問題はありませんが、よく分からないなら手動で圧縮するのが無難です。
画像拡張子は「PNG」と「JPG・JPEG」のどちらが良い?
ブログで使用する画像の拡張子には、いくつも種類があります。
- PNG
- JPG/JPEG
- GIF
- TIFF
- BMP
拡張子 | メリット | デメリット |
PNG | ・フルカラー1670万色まで対応
・少ない色数で連続部分を上手に圧縮 ・色の透過できる |
・写真や一部のイラストは容量が重くなる
・ごく稀に、古いブラウザで非対応 |
JPG
/JPEG |
・大きな画像でも小さなサイズに圧縮可能
・フルカラー1670万色まで対応 |
・圧縮後は元の画質に戻せない
・保存するたびに画質が悪くなる ・文字や図表がぼやけて粗くなる |
GIF | ・圧縮保存後、元の画質に戻せる
・アニメーションが作成できる |
・最大256色しかなく、色数の多い画像には不向き
・グラデーションのある画像も不向き |
TIFF | ・画像圧縮でデータが損なわれない | ・データ容量が重い |
BMP | ・Window用 | ・データ容量が重い |
ブログと相性が良いのは、PNGとJPG/JPEGのどちらかです。
ブログ画像の拡張子をJPG/JPEGに統一することを勧める記事を見かけます。
「PNGは重い」というのが理由のようです。
確かに、PNG画像は、他の保存形式より重くなる傾向があります。
しかし、JPG/JPEGは、文字や図表がぼやけて粗くなりやすいというデメリットがあります。
また、アイキャッチや図表を圧縮する場合、JPG/JPEGよりPNGの方が軽くなることも多いです。
「ブログの画像はJPG/JPEGオンリー」と誤解しないようにしましょう。
PNGとJPG/JPEGのメリット・デメリットを踏まえると、ブログの画像は種類によって保存形式を分けるのがベターです。
- PNG→アイキャッチ画像、文字入り画像、図表など
- JPG/JPEG→写真(一部のイラスト)
基本的にはPNGで保存し、写真や一部のイラストについては、JPG/JPEGで保存するのが理想的です。
しかし、2つの拡張子を使い分けるのは手間ですし、画像をたくさん使用する場合は拡張子のつけ間違いも起こります。
そのため、ブログで使う画像の種類によって保存形式をPNGかJPG/JPEGに決めておき、必要な場合だけ別の形式で保存するのもありです。
すもベビ
すもブロは、ブログに貼る画像は全て人工物(文字または図表が含まれる)ので、画像の拡張子は全てPNGで統一しています。
ただし、大容量の写真を貼り付ける場合は、JPG/JPEGを使用すると思います。
画像の見やすさというのもユーザビリティーに重要な要素なので、画像の拡張子は慎重に決めてください。
WordPressブログ画像のリサイズと容量圧縮のまとめ
ブログに貼る画像の容量は、読み込み速度(サイトスピード)に影響する重要な要素です。
アップロードする前にリサイズ&圧縮をして容量を小さくしておきましょう。
- リサイズ→I LOVE IMG
- 画像圧縮→tiny png
すもベビ
2つともブックマークしておくと便利です。
画像の保存形式については、PNGかJPG/JPEGかという問題があります。
理想的なのは、次のように使い分けることです。
- PNG→アイキャッチ画像や文字・図表
- JPG/JPEG→写真や一部イラスト
基本的には自然物はJPG/JPEG、人工物はPNGで保存するのがベターです。
使い分けは手間がかかるので、面倒くさい&大容量の写真を使わないなら、PNGで統一しても問題はありません。
すもベビ
拡張子については、ブロガーの間でも意見が分かれるところです。
ご意見があればお気軽にどうぞ。