カメラ

ブログの写真や画像の適正サイズと容量、劣化を防いでSEO対策

ブログで写真やイラストを添付するときに画像サイズや画質に悩んでいる方はいませんか!?

「画像のサイズ」「容量」「画質」「ブログの読み取り速度」など悩みは様々あるでしょう。

ブログにおいて画像は、ブログの分かりやすさや魅力を伝えるための大事なツールです。

当ブログにおいても、カメラの性能や旅の魅力を伝えるために高画質な画像はなくてはならないものです。

しかし、高画質で高容量の画像をバンバン添付するとブログのサーバーが重くなり読み取り速度が遅くなります。

そこで、今回はブログの写真やイラストの適切なサイズや容量について、カメラブログの視点から紹介していきます。

なぜ、写真・画像のサイズや容量を気にする必要があるのか

そもそも、なぜ写真やイラストの容量やサイズを気にする必要があるのか紹介していきます。

大前提として、一般的な思考であれば「画像サイズは大きく、高容量で高画質な画像が良い」という考え方が普通です。

しかし、ブログにおいては容量が大きくなるとブログページの読み込み速度が遅くなります。

Googleの調査では、モバイルサイトで3秒以内にWebサイトが表示されないと53%のユーザーが離脱する(※1)ことが分かっています。

これはSEO(検索エンジンの最適化)対策にも繋がります。

そのため、低容量で高画質な画像を添付する必要があります。

(※1)New research by Google has found that 53% of mobile website visitors will leave if a webpage doesn’t load within three seconds.

https://www.marketingdive.com/news/google-53-of-mobile-users-abandon-sites-that-take-over-3-seconds-to-load/426070/

Googleは1ページ1.6MBを推奨

ブログの検索流入は7~8割がGoogleから検索しています。

そのため、Googleに合わせて最適化するのが良いです。

Googleは1ページあたり1.6MB(メガバイト)を推奨(※2)しています。

1ページあたりのため、画像1枚あたりの推奨記載はありません。

また、Googleは通信速度が3Gの場合、1.6MBを推奨しているため、

4Gや5Gの場合はもう少し大きな容量が添付できるかもしれません。

スマホやデジタルカメラの容量

デバイス容量(概ね)
スマホ100KB~3MB
デジタル一眼(APS-C)3~10MB
デジタル一眼(フルサイズ)5~20MB

カメラの容量はデバイスによって様々です。

スマートフォンは比較的に低容量ですが、デジタル一眼カメラなどの高性能カメラは容量も増大します。

画質が向上すればするほど、容量も増大します。

上記で記載したGoogle推奨の推奨1.6MBを考えると、画像の編集は最低限必要になってくるでしょう。

失敗例:100記事を書いた当ブログ

そもそも、この記事を書く目的になったのは、この「旅カメラブログ」の読み取り速度が遅延したからです。

●旅カメラブログ
総記事数:約100記事
総画像数:約1200枚

当ブログの総記事は、約100記事で画像は約1200枚使用しています。

旅・カメラの魅力を中心に発信しているブログであり、比較的高画質な画像を添付しています。

当ブログは、画像サイズや容量の設定をしっかりしていませんでした。

上の写真は「PageSpeedInsights」です。

「PageSpeedInsights」は、モバイル端末やパソコン向けのブログ・ページの速度パフォーマンスを確認することができます。

当ブログのパフォーマンスは49%まで低下していました。

改善できる項目の中には画像に関する改善点が3点あります。

やはり、画像のサイズや容量に問題あるようです。

画像容量を減らす改善策

ここからは、画像容量を減らす改善策について紹介していきます。

画像をサイズ変更・圧縮する

基本的には画像のサイズを変更・圧縮することにつきます。

「なら簡単じゃん」と思うかもしれませんが、画像の容量を減らせば減らすほど画質が落ちる可能性が高くなります。

如何に画質を落とさずに低容量にするかが肝心です。

画像のサイズ変更・圧縮

撮影した写真や作成したイラストを後からサイズ変更をする場合について紹介していきます。

●画像のサイズの推奨
①Googleの推奨は!?
②WordPressは!?
③スマホやタブレットとデスクトップの違い
④アスペクト比
⑤結論

●サイズ変更方法・圧縮方法
①圧縮・リサイズについて
②リサイズ・圧縮方法

画像サイズの推奨

まず、重要なのは画像のサイズです。

写真やイラストの画像サイズが大きければ大きいほど、容量が大きくなります。

できるだけ、容量を抑えるために画像サイズを小さくしたいですが

画像サイズが小さくなると今度は画質が下がってしまうため

適正サイズを判定する必要があります。

各メディアを基に適正を探していきます。

① Googleは横幅を1200PX推奨

Googleは横幅を1200PX(ピクセル)推奨(※3)しています。

先ほども記載しましたが、検索流入の約7~8割はGoogleからの流入なので最低限1200PXあった方が良いです。

(※3)https://developers.google.com/search/docs/advanced/structured-data/article#amp

② WordPressの横幅は1200PX

ブログの使用率で最も高いWordPressです。

WordPressデスクトップの横幅1200PXです。

ブログごとにピクセル数が違うため、違う方は確認することをおすすめします。


③ スマホやタブレットとデスクトップの違い

デバイスピクセル数(PX.横幅)
デスクトップ1200PX
iPadPro1024PX
surfacePro7912PX
iPad768PX
iPhone12Pro390PX
iPhoneX375PX
GalaxyS5360PX
※当ブログの集計

上の表はデバイスごとの表示できるピクセル数を示しています。

デスクトップは1200PX、タブレットは約1000~700PX、スマートフォンは400~300PXとデバイスの違いでかなり差があります。

デバイスの大きさに比例して表示できるピクセル数が変動します。

個人的にはデスクトップの1200PXに合わせることをおすすめします。

小さい画像を引き伸ばすより、大きい画像を圧縮した方が画質は保たれると思います。

ただ、このピクセルの差を解決できる方法は分かっていません。

もし、分かる方がいましたら、コメントにて教えていただけると幸いです。

④ アスペクト比

アスペクト比の種類は1:1、3:2、9:16など様々あります。

個人的にはアスペクト比はそこまで意識しないでも大丈夫だと思います。

ただ、ブログは基本的に縦読みで読むことが多いため

画面の小さいスマートフォンを考慮して縦長の画像は控えることをおすすめします。

個人的に画面いっぱいに画像は読みにくい印象です。

⑤ 結論

Googleの推奨している横幅1200PXを採用、縦長画像は採用少なめで、縦長の場合は画面を圧迫するため1200PX以下にする。

サイズ変更方法・圧縮方法

実際にリサイズ・圧縮方法について紹介していきます。

サイズ変更・圧縮とは

変更項目サイズ変更圧縮
サイズ
アスペクト比
色彩データ変動なし圧縮
画質低下大きく低下

〇サイズ変更(リサイズ)とは…

画像のピクセル数を現象し、サイズやアスペクト比を変更すること

〇圧縮とは…

リサイズに加えて、画像の保存データ内も圧縮させるため、大きく容量を減少できると共に、色彩の変動や画質の大幅な低下の恐れもあります。

サイズ変更・圧縮方法

  1. 現像ソフト
  2. フォト
  3. 無料圧縮ソフト
  4. EWWW Image Optimizer

ブログでサイズ変更・圧縮するなら4種類あります。

① 現像ソフト

一番、良いのはLightroomやPhotoshopなどの現像ソフトです。

写真のサイズから解像度、画質まで細かい設定が可能で、容量と画質のコントロールが可能です。

〇作例

1200×800 304KB

元データはミラーレスカメラで撮影した7008×4672の9.46MB。

リサイズと画質を少し調整して圧縮し、ある程度の画質を保ちながら容量を抑えることができます。

② フォト

無難なのがWindowsに搭載されているフォトです。Macにも初期から搭載されている編集ソフトがあると思います。

lightroom フォト

before:lightroom.1200×800.304KB after:フォト.1200×800.168KB

フォトとlightroomで編集した画像を比較してみました。

アップすると画質の粗さは目立ちますが、この程度であれば大丈夫かと思います。

③ 圧縮ソフト

圧縮ソフトでも効果的に圧縮できます。

しかし、無料圧縮ソフトはおすすめできません。

理由としては、サイズ選択や容量の設定ができないものが多く、自動圧縮されることで圧縮後の画像にムラが生じることが多いです。

また、元データの容量に制限がある場合もあり、あまり使い勝手はよくありませんが、画質に拘りのない方には簡単にできるのも事実です。

before:lightroom.1200×800.304KB after:某圧縮ソフト.1200×800.115KB

元データが高画質で、高容量であったため一度圧縮してから比較するためにリサイズしました。

意外にも違いはハッキリと分からない印象です。

④ EWWW Image Optimizer

これはWordPressのプラグインの1つです。

当ブログは以前までこれを使用していましたが、個人的にはおすすめできません。

このプラグインを導入していれば、多くの工程を省いて、

未調整の画像を取り込む際に自動で圧縮をかけてくれるとても便利なプラグインの1つです。


before:lightroom.1200×800.353KB after:EWWW Image Optimizer.1200×800.186KB

しかし、圧縮の性能は正直言って、あまりよくない印象です。

自動で圧縮する分、かなり色彩のデータに悪影響を及ぼしている様子です。

流石に目に見えての悪化なので、個人的にはおすすめできません。

それよりも圧縮ソフトにかけてからブログに添付する方が良いと思います。

結論

結論

〇ブログは1ページあたり、1.6MBを推奨している。

〇スマホやデジタルカメラは容量が多いため、リサイズや圧縮が必要になる。

〇Googleは横幅を1200PX以上を推奨しており、WordPressの横幅も1200PXなので横幅を1200PXにすることがおすすめ。

〇ブログの圧縮方法は現像ソフト、フォト、圧縮ソフト、EWWW Image Optimizerの順におすすめであるが、個人的にはEWWW Image Optimizerは否定的である。

COMMENT

メールアドレスが公開されることはありません。