画像ファイルのサイズ（表示サイズ）

画像ファイルの表示サイズとは

画像は「サイズ」と「大きさ」といった言葉を使っていてあいまいに感じますが、他のサイトを見ていると概ね
サイズ ＝ 表示サイズ、見た目の長さ、画素数　
という捉え方が一般的なようです。
単位は ピクセル です。
すっきりとして見やすいなと感じる記事は、画像サイズが統一されていることが多いです。
画像をアップロードする前に、切り取ったり拡大してひと手間かけているんですね。

WordPressで使用する画像の適切なサイズ

好きな画像を自由にアップロードできることがWordPressの魅力の1つと感じます。
画像のサイズについては結構しっかりと考えていて、重くならないように、見やすく表示されるように、気を付けています。
WordPressのテーマは SWELL を使用しているのですが、SWELL は多くの人が使っていてネット上にたくさん書き込みがあって参考になるのと、開発者の方が推奨している情報があるので、調べてそれを実装しています。
この画像のサイズについても開発者の方の意見を参考にしつつサイト全部で統一しました。
以下に書き出してみます。

項目	サイズ
アイキャッチ画像	1200×630
ピックアップバナー	1200×675
コンテンツタイトル下	1200×300
CTAなど	1200×400
フルワイドブロック背景	2400×1600
記事中の画面キャプチャなどの画像	1200×600~800

リサイズする方法

サイト内で画像の表示サイズを同じにするため、どのように変更するかということですが、私はCanvaで画像を作成することが多いので「カスタムサイズ」を最初に指定してそのままダウンロードしています。
画面キャプチャの場合は、Snagit というソフトを使っていて、それで設定・変更しています。
Windowsにはペイントが標準インストールされていますが、このペイントでも変更できます。（メニュー → サイズ変更）

便利なソフト：Canva、Snagit

画像ファイルの大きさ（データの大きさ・重さ）

画像ファイルのデータの大きさとは

先ほどの「画像のサイズ」に対して「画像の大きさ」と表現されることが多いです。
データの容量・重さのことで、この大きさを変更しても表示サイズは変わらず、見た目もそれほど変わらなかったりします。
単位は キロバイト（KB）、メガバイト（MB）などです。（１MB＝1,000KB）

重い画像を使ってはいけない理由

WordPressで画像を使用する場合に、この「大きさ」は大変重要です。
容量が大きい画像は表示させるのに時間がかかり、サイトが重くなります。
Googleによると、3秒読み込みが遅いと53%のユーザーが離脱するそうです。
また、SEOといって、検索エンジンによって上位に表示させるためにサイトを最適化する施策を行うのですが、サイトの表示速度が遅いとSEOに不利になります。

WordPressで使用する画像の大きさ

エックスサーバーのサイトによると、最適な画像の大きさは 200KB以下
Googleの発表によると、ページ容量 1.6MB以内
を目指すと良いそうです。

Canva作成した素敵な写真をそのままアップロードすると、場合によっては1枚で1MBぐらいになっていたりすることがありますので気を付けたいところです。

画像を軽くする方法

アイキャッチ画像をCanvaで作成し、ダウンロードする際、PNG ではなく JPG でダウンロードすることが多いです。
写真の場合、画質はPC、スマホとも、全く気にならない程度で、容量は1/10ほどになります。
あるいは Canva Pro という有料プランでは圧縮ができるので、PNG のままでも少しは小さくなります。

一般的に、写真は JPG、イラストは PNG を使用すると、品質を損なわず軽くすることができると言われています。

もう一つ、オンライン上の無料ソフトの I love IMG がとても便利です。
画像をブラウザ上にドラッグ＆ドロップするだけで簡単に圧縮ができます。
元のサイズのデータが残るところも良いです。

便利なソフト：Canva、I love IMG