ブログの写真や画像の適正サイズと容量、劣化を防いで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.6MBを推奨

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

上の写真は「PageSpeedInsights」です。

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

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

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

画像容量を減らす改善策

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

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

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

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

画像のサイズ変更・圧縮

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

画像サイズの推奨

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

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

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

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

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

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

①　Googleは横幅を1200PX推奨

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

（※３）https://developers.google.com/search/docs/advanced/structured-data/article#amp

②　WordPressの横幅は1200PX

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

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

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

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

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

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

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

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

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

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

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

④　アスペクト比

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

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

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

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

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

⑤　結論

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

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

サイズ変更・圧縮とは

サイズ変更・圧縮方法

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

①　現像ソフト

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

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

〇作例

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

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

②　フォト

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

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

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

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

③　圧縮ソフト

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

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

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

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

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

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

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

④　EWWW Image Optimizer

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

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

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

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

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

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

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

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

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

結論