WordPressで貼る画像のベストサイズは?圧縮する方法も紹介!

こんにちは!夫婦ブログを書いている新米夫婦よめちゃんです(`・ω・´)ゞ(@ponN0216

ブログを始めた初期、なにも知らなかった私たちはデジカメで撮影した写真をそのまま使っていました。

記事を書くことに慣れてきた頃、アナリティクスから「あなたのサイト重たいよ!低速!」と通知が・・・

サイトの速度(低速のときのグラフ)

 

画像の圧縮や編集ができる”photoScape”(無料)を使って

WordPressにおける適正な画像サイズを検証してみようと思います!!

適正な画像サイズの基準を画像の容量が100MB前後、画像中の文字が見えることにしています。

WordPressで貼る画像のベストサイズを検証

元画像

検証にあたって愛知県にある熱田神宮の大楠の画像を使っていきます。

デジカメで撮影した画像なので写真の大きさは5184×3888ピクセル、容量は9.1MBとかなり重たいです。

PhotoScapeで画像圧縮

それでは、100×75ピクセルから順番に画像を圧縮していこうと思います。

100×75ピクセル

wordpress 画像サイズ検証

PhotoScapeで画像圧縮

画像の容量は、18.9KBとかなり軽いです。

ですが画像が小さすぎて木が写っているという情報しか入ってこないと思います。

スマホのユーザーに優しいかどうか判断してくれるモバイル ユーザビリティもこの画像はアウト判定を下すでしょう。

 

200×150ピクセル、300×225ピクセルと圧縮してみました。

画像の容量は、34.9KBと60.1KBと軽いですがブログで使えそうな大きさではなかったです。

400×300ピクセル

wordpress 画像サイズ検証400×300

PhotoScapeで画像圧縮

画像の容量は、91.6KBで文字がぼやけているは読解は可能。

タブレットでは70%、PCでは50%の横幅で表示されていて文字の識別は一応できました。

よめ
スマホメインのブログで大体のイメージを伝えられたらいい場合、ここが最低ライン

500×375ピクセル

wordpress 画像サイズ検証500×375

PhotoScapeで画像圧縮

画像の容量は、129.9KBで文字の識別がスマホ、タブレット、PCで文字の識別が可能でした。

 

よめ
個人的に500×375ピクセルの画像サイズで事足りるかなと思います!
一応比較のためもう一つ大きめの600×450ピクセルの画像も載せておきます。

600×450ピクセル

wordpress 画像サイズ検証600×450

PhotoScapeで画像圧縮

画像の容量は、171.9KBと全然軽いほうです。

よめ

これ以上の画像はスクロールするとき大変なので微妙かなと思います。

画像の横幅も100%となっており同じで文字の見えやすさも大差ないです

これ以上大きいサイズもリサイズしたので表にまとめておきます。

ピクセル 容量
640×480 193.8KB
700×525 231.5KB
800×600 289.6KB
900×675 360.3KB
1000×750 435.9KB
1024×768 480.1KB
1280×960 718.4KB
1600×1200 1.1MB

検証結果 WordPressで貼る画像のベストサイズ

装飾目的の画像ならば500×375ピクセル。

画像内に文字が入っている場合、600×450ピクセルで拡大すればぼやけることなく見ることができます。

 

最近は、携帯対応のサイトがほとんどなので小さい画像も拡大して見ることができます。

ですがぼやけていたりするとかっこ悪いです。

 

反対に大きすぎると読み込みが遅く、読んでくれる人が離脱する可能性が出てきます。

WordPress上で画像を圧縮するのも可能ですが、あらかじめリサイズして容量を落としておく方がいいと思います。

圧縮しても容量があまり減らない画像が出てきた 保存方法をJPEGに

photoScapeを使ってもあまり画像の容量が変わらない写真が出てきました。

顔を隠すためにペイント3Dでハートマークを付けているのですがこの作業を加えると画像が格段に重くなります。

画像圧縮の検証画像

この画像は保存形式がPNG、大きさ640×480で容量が688KBあります。

先ほど紹介した熱田神宮の大楠の画像みたいに100KB近くにするのが難しくそのまま貼り付けていました。

 

一つの記事に複数枚、画像を貼るとやっぱり重いので他の方法を探しました。

ためしにハートマークをペイント3D以外(Excelの類似品であるLibreOfficeCalc)でやってみたりステッカーを変えたりしましたが変わらず。

ようやくたどり着いたのが保存方法をJPEGにするという方法です。

画像の保存方法によるサイズの違い

ためしに先ほどの画像で比較すると・・・

左:PNGで保存した画像のプロパティ 右:JPEGで保存した画像のプロパティ

画像の保存方法によるサイズの違い

顔を隠した画像でも100KBくらいの軽い画像にすることが出来ました。

すごく簡単なのでおすすめです!

画像を圧縮する他の方法を紹介します

photoScapeを使って画像を圧縮していますが一枚ずつ写真を圧縮していると時間がかかる!

何か簡単な方法がないか調べてみました!

オンラインで画像を一括圧縮

早いしかなり楽です。Googleで「画像 圧縮」と検索すると上位検索されているサイトを紹介します。

画像を縮小する!

Webブラウザで簡単に写真やイラストの縮小ができます。回転や反転、白黒変換も可能です。無料でお使いいただけます。…

個人的にこちらの方が好き!画像を選択して移しサイズを選択するだけで自動で一括圧縮してくれます。

 

iLoveIMG | 画像編集用オンラインツール

複数のJPG、PNG、GIF画像を選んで瞬時に圧縮。オンラインで画像を無料で簡単に圧縮できます。…

上記で紹介したものとさほど圧縮能力は変わりませんが

変換後、画像名が文字化けするのでまた打ち直すのが大変だったのがネック。

 

他にもたくさんあるので使ってみて気に入ったものを使ってみてください。

そんなに画像は使わないから自分で圧縮したいよという方は、以下の方法をおすすめします。

スマホで撮影した画像を使用する

旦那さんからのプレゼントだったのでデジカメを使用しています。

私の書く内容は写真を多用するのでどうしても記事が重くなってしまいます。

 

デジカメの写真を使うことをやめ、スマホで撮影した写真を圧縮してみたら軽くなるか検証しました。

 

検証する前に写真のプロパティをみました。

縦の写真(1280×720)、横の写真(1280×960)ともにサイズは大きいのに容量が200KB前後!

 

一回LINEも経由しているのもあるのか大分容量が軽いです。

サイズをそろえるためにphotoScapeを使ったらさらに容量も減りました。

 

WordPressのアプリからスマホの画像を直接アップロードする

ワードプレスはスマホからも投稿ができるようになっています。

関連記事

新米ブロガーのにんじんです。 「WordPressでブログを始めたけど、更新する時間がない!」「わざわざパソコンを開くの面倒だなぁ…」とか思っていませんか? スマホからなら少しの時間で書けるのに…そう思う人のために、今回スマ[…]

 

実際に携帯の画像フォルダーに入っている写真をそのままアップロードしてみました。

送る画像は3840×2160の大きさで容量が2.5MBの画像です。

この画像をwordpressのアプリで直接アップロードすると2560×1440の大きさで270KBという圧縮された状態になっていました!!

携帯からWordpressに画像をおくる

よめ
すごい!軽い!!

でも問題点は、画像のファイル名が文字の羅列になってしまうところです。画像のSEO対策として微妙。

Excelで写真を画像として再度保存する

最新版のExcelだと画像選択、「図にする」という項目タッチすると簡単に軽くなります。

またPowerPointもそもそもボタンぽちすれば圧縮できます。

私はオフィスを買ってないので無料類似品の「LibreOfficeCalc」で圧縮しました。

 

まとめ

ブログで貼るのに適正な画像のサイズを知りたいと思い検証していきました。

  • 400×300ピクセル→最低ライン
  • 500×375ピクセル→少し文字がぼやけますが識別可能。画像は問題ないので装飾目的ならあり
  • 600×450ピクセル→個人的にこのサイズがスマホ、タブレッド、PCで見たとき最適

圧縮の方法も紹介してきました。一番簡単なのが保存形式をJPEGにすることでした。

また、オンラインで画像を一括圧縮したり、スマホで撮影した画像をphotoScapeやExcelで圧縮するのもおすすめです。

画像が重くサイトも重くなり離脱率が高くなるのは避けたいので対策していきましょう(*^-^*)

参考になったら幸いです。

 

私がブログ最初期からやっておけばよかった!と後悔したことをまとめたのでよかったら読んでみてください。

関連記事

こんにちは!新米夫婦のふたりごとの嫁です(`・ω・´)ゞ(@ponN0216) wordpressで雑記ブログを書き始め、夫婦合わせて200記事目に到達しました!! [sitecard subtitle=関連記事 url=htt[…]

WordPress初心者向け講座
WordPressで貼る画像のサイズを紹介
最新情報をチェックしよう!