ブログに引用する画像はどれが最適?画像の容量とサイズ

ブログに最適な画像の容量や形式とは

「画像の最適化は芸術でもあり科学でもあります。つまり、個々の画像を最も適切に圧縮する方法について明白な正解がないという点では芸術であり、画像のサイズを大幅に削減できる非常に高度な技術やアルゴリズムがたくさんあるという点では科学なのです。」

Google Developers-画像の最適化より引用 Ilya Grigorik

 

上記は有名なエンジニア Ilya Grigorikさんが提唱する最適な画像に関する内容。

 

「言ってることは格好良いけど、結局どれが最適か分からんてこと?笑」

 

そう言いたくなる発言なんですが現実は、Googleのサービスでサーチコンソール・PageSpeed Insightsなどが有料で行っているページ表示速度の高速化やアクセス向上に対する情報の付加価値を高めるために敢えてうやむやにしている事は分かっているんです…!

 

「Googleの手のひらで転がされてる~!笑」

 

ですがブログを収益化するためには何とか無料でも画像最適化の方向性くらいは分かっておく必要性があります。

 

しかし、最適な画像容量や形式(JPEG・PNGなど)についての指針は少なく、Googleサーチコンソール「コンテンツに関するガイドライン」などを基に推測していくしか方法がないのが現状です。

 

当記事では、そんなブログ運営者が困ってしまう最適な画像の容量や形式を追求し、画像圧縮前と圧縮後ではどのくらい容量やページ表示速度が違うのか比較検証してみました。

写真のサイズ・画質とは?

画像の基礎知識

 

まず、初めに画像を構成しているピクセル・画質・画像容量・画像形式についておさらいしておきます。

 

ピクセル

ピクセルはデジタル画像(ラスター画像とも言う)の最小単位の1つの点(ドット)のことを指しており、通常デジタル画像はこのドットが集まってそこに色の識別をつけることで1つの画像と認識できるようになります。

 

当然、たくさんの細かい色の色彩を表現するにはよりたくさんのピクセル数が必要になりますが、このピクセルの中にはさらに「デバイスピクセル」と「CSSピクセル」というものが存在します。

 

「デバイスピクセル」とはパソコンやスマートフォンのディスプレイのピクセル数を表し、「CSSピクセル」はブラウザ上で表示される疑似的なピクセル数を表しています。

 

どうして2種類のピクセルが存在するかと言うと、近年のスマートフォンやタブレット端末はより小型化が進み、ディスプレイが小さくなるのに高画質、と相反する需要を叶えるために1つのCSSピクセルの中に、4分割されたデバイスピクセルを入れ込むことでより高度な色彩抽出や描写が可能になったのです。

 

解像度

解像度は、パソコンやスマートフォンといったデバイスのディスプレイに表示される画像全体の精細さを表す尺度のこと。

 

ディスプレイの画素数が多いほど画像は鮮明できれいに表示され、一般的に「1920×1020」のように「横ピクセル × 縦ピクセル」の形や、「300万画素」など横と縦の積で表記されます。

 

前項でも紹介したデバイスピクセルとCSSピクセルのおかげで、ここ数年の間にディスプレイ解像度は飛躍的な進化を遂げています。

 

分かりやすい例で挙げると、高解像度ディスプレイが魅力の3年前に発売された4.7インチ「iPhone 6S」の解像度は1334×750、今年2018年9月に発売された最新の「iPhone X」の解像度は2436×1125とわずか数年の間に解像度が倍近く高性能になっていることが分かります。

 

画像容量

コンピュータやブラウザ上で表示される画像には全て量(サイズ)が存在します。

 

容量の量を表す単位には2進数を使った「bit」「B」「KB」「MB」「GB」の5つが使われ、最小単位はbit(ビット)。

 

容量の関係を図で説明すると、

容量が変化
1 bit(ビット) データの最小単位
8 bit(ビット) =1 B(バイト)
1024 B(バイト) =1 KB(キロバイト)
1024 KB(キロバイト) =1 MB(メガバイト)
1024 MB(メガバイト) =1 GB(ギガバイト)
1024 GB(ギガバイト) =1 TB(テラバイト)

 

ブログやサイトで使用する画像の容量はだいたい50KB(キロバイト)~1000KB(キロバイト)が一般的で、解像度が高いほど容量も大きくなります。

 

使用する前に、画像の容量は必ずチェックする癖をつけると良いでしょう。

 

画像形式

画像の形式とはファイル名の後ろについている「.jpg」「.gif」などの拡張子のことで、そのファイルがどんな形式で保存されているかを示しています。

 

画像にはJPEG・PNG・GIF・TIFF・BMPなどの種類があり、JPEG・PNG・GIFがもっとも使われている画像形式。

 

JPEG(ジェイペグ)

JPEG(ジェイペグ)はデジタルカメラなどで良く使われる、写真にもっとも適した画像形式です。
メリットはフルカラー1670万色で構成されておりグラデーションなどきれいに表示されますが、実は人間が肉眼では見えないような情報は大幅にカットされているので画像容量をそこまで多く必要としません。

JPEGのデメリットは背景を透明にする事ができず、圧縮や転用を繰り返していると画像が劣化やノイズを発生する場合があります。

 

PNG(ピング)

PNGはWeb用に開発された画像形式のことでJPEGのフルカラー1670万色と、GIFの可逆式圧縮やロゴイラスト作成などの両方のメリットを持つ優れた拡張子です。

画像劣化することはなく背景を透明にすることもできますが、デメリットとしてフルカラーで保存した場合はJPEGより大きい画像容量になってしまう点に注意です。

 

GIF(ジフ)

GIFはもっともシンプルな256色で構成された可逆圧縮形式の画像形式です。

メリットとして可逆圧縮形式なので背景を透明にしたアニメーションやロゴ・アイコン・イラストに最適ですが、デメリットとして写真には不向きな点が挙げられます。

 

各画像形式の一覧まとめ

それぞれの特徴を踏まえて、必要な場所に最小限の配置を心がけましょう。

JPEG(ジェイペグ) PNG(ピング) GIF(ジフ)
拡張子 .jpg(.jpeg) .png .gif
特徴 デジタルカメラなどで最も多く使われている形式。フルカラー1670万色。非可逆圧縮の形式。 Web用に開発された形式でフルカラー1670万色。可逆圧縮の形式。 最も少ないカラ-256色。可逆圧縮の形式。図やイラストに適している。
容量 中程度 最も大きい 最も小さい
WEB対応 〇 Web対応可 〇 Web対応可 〇 Web対応可

 

以上をまとめると繊細な色彩の写真を必要とするサイトやシーンではJPEG、簡素なアニメーション・イラスト・ロゴを使う場合はもっとも容量の小さいGIF、JPEGと同等の色彩の美しい写真を切り抜いて背景透過したり加工したりする場合にはPNGが適していると言えます。

 

また、画像を圧縮すると画質が劣化してしまうJPEG(可逆圧縮形式)は、Webページのプレビューを確認しながら必要最低限に留める必要があるでしょう。

 

一方で、PNGは圧縮しても劣化が少ないので積極的にサイジングを行うことで一定の画質を保ちながらも、次項で詳しく説明している「速度表示」の観点からアクセス向上に良い結果をもたらしてくれることが期待できます。

 

可逆圧縮アルゴリズム
可逆圧縮とは圧縮前データと、展開後のデータが少しも損失することなく完全に等しく再現される方法のこと。PNG・GIFは可逆圧縮形式。
非可逆圧縮アルゴリズム
非可逆圧縮とは圧縮前データと、展開後のデータは完全には一致せず画質が劣化する方法のこと。JPEGが非可逆圧縮形式。

 

画像を圧縮する理由

きれいな画質の圧縮写真(花)

ブログ運営するうえで画像を圧縮する理由は「ブログのページ表示速度が速くなる=ユーザビリティが向上し読者離れすることがなくなる」この1点です。

 

現在は、レンタルサーバーも容量200GB以上が当たり前となり画像を縮小しなくても容量オーバーなんて事も滅多にない訳ですから、可能な限りアイキャッチ画像や記事TOPにはキレイな写真を使いたいですよね。

 

Google search console(グーグル・サーチ・コンソール)の「画像公開に関するガイドライン」中にも、速度を考慮して最適化するという項目があります。

 

要約すると、画像容量が大きい事によってページの読み込みが遅くなったり、通信費が高くなる場合があるので最新の画像最適化やレスポンシブ技術を駆使して、高品質で高速なコンテンツを提供して下さい、という事です。

 

確かに、スマートフォンを使っていると常に電波が良いわけではないですから、ページがなかなか開かなかったり画像が表示されるまでタイムロスがあると「← 戻る」を押して断念してしまった経験って誰でもお持ちですよね。

 

次項では画像圧縮の前後を比較検証し、さらにブログに最適な画像を追求していきます。

画像圧縮前と圧縮後の検証

 

ここでは、圧縮前と後の画像を使用した場合、ページ表示速度にはどのような影響があるのか比較検証します。

 

条件設定

今回は別記事で書いた「稼ぐブログに最適/おすすめ厳選ツール10☑」記事で使用した写真素材サイト「PIXTA」の画像。

写真素材ピクスタ
選んだ理由:写真サイトのトップページ画像でより精細な高画質写真だから圧縮後と比較しやすい為。
形式:PNG
容量:1.8MB
サイズ:1867×539

 

●まず、この写真を画像圧縮ツールTiny PNGで以下のように圧縮します。

【1枚目】圧縮前画像(約1.8MB)
写真素材ピクスタ

 

【2枚目】圧縮後画像(約500KB)

 

●見た目にほとんど違いはありませんが、これを50枚ずつそれぞれ実際にWeb公開しているブログに張り付けてそのあとでモバイルのページ表示速度ツールTestMySiteを使って表示速度を比較してみます。

貼り付けるページは同じブログコンテンツ設定の同一ページを使用しています。

圧縮前画像を50枚使用したページ表示速度

 

圧縮前画像の場合、モバイル3Gを使った場合でもページ全体が表示されるまでかかった時間は「4秒」です。

4秒でも遅い方ではありませんが、訪問者の推定離脱率は「10%」

 

※検証に使用したWebサイトのコンテンツ自体の容量が大きく影響しており通常時でも3秒程度なので、少し遅くなるという目安で見てもらうと良いでしょう。

 

圧縮後画像を50枚使用したページ表示速度

圧縮後画像の場合、モバイル3Gを使った場合ではページ全体が表示されるまでかかった時間は「3秒」

訪問者の推定離脱率は「低」と表示され10%よりはるかに低いことを意味しています。

 

3秒で表示されるブログはモバイル向けに運営している方にとっては、とっても優秀な数字と言えます。

 

ブログに最適な画像圧縮を検証した結果

複数の圧縮カメラレンズ

前項で紹介した圧縮前画像と圧縮後画像の比較検証では、ページ表示速度に約1秒の差が出る結果となりました。

 

今回のテーマでもあるブログに最適な画像の容量や形式について結果的に言えることは「何KB以下の画像を使うべき!」とか「なるべく容量の大きいPNGは使わない!」とかそんな容量数や形式に詳細なルールはありません。

 

「画像公開に関するGoogleのガイドライン」では、速度を考慮した最適化を促す一方で高画質の写真を使うことでサムネイルが目立ちユーザートラフィックを得やすくなります、と紹介しており「圧縮最適化」と「高画質」の二律背反する記載がSEOエンジニア・サイトブログ運営者を戸惑わせているのです。

 

最近ネット上では「画像圧縮SEO」とか「画像を圧縮化する方法」と言ったページが目立ちますが、圧縮するメリットをただやみくもにSEO向上と謳っているのは本質から話しがずれてしまっています

 

画像を最適化する目的は、ガイドラインに沿って掲載使用することで読者がページをスピーディーに読める事により、信頼できるコンテンツとしてGoogleに認識されアクセスが向上するというのが自然な流れです。

 

必ず画像圧縮が必要かと言うとそうではなく、例外的に容量が大きい写真サイトなどでは当然ページ表示速度は10秒以上と遅くなってしまいますが、パソコンで開くことを想定しているから問題ない訳です。

 

ページ表示速度が10秒以上かかるけど写真AC・PIXTAなどの大手写真サイトが上位検索表示されるのはサイトテーマに沿った高画質の写真を選ぶということの方が圧縮より重要なのです。

画像使用の注意事項

異なるカメラ

ここでは、画像を使用するうえで知っておきたい注意事項をご紹介します。

 

配置の最適化

画像を張り付ける際は、可能な限り関連する文章の近くに張り付けることが重要。
記事のテーマに関するようなもっとも重要な画像は、ページ上部に配置することがガイドラインでは推奨されています。

 

画像にテキストを埋め込まない

画像内に重要なキーワードなどのテキストを埋め込むことは避けましょう。
編集ツールを使えばオリジナル画像が作成できますが、全ての読者がアクセスできる訳ではないことやページ翻訳ツールも画像内のテキストまで読み込むことができないことに起因しています。

 

画像の代替テキストを設定する

Googleはコンピューターのアルゴリズム・ページコンテンツ・代替テキストを使用して画像のテーマを理解しています。

代替テキストは「alt=”代替テキスト”」のような形でURLに組み込まれますが、画像をサイトからダウンロードした場合は、「98ce8412659d82181c4e7756c600be99_s.jpg」のような写真の内容が特定できない英数字の文字列が代替テキストに設定されています。

 

記事や文章にあった代替テキストを任意で設定することで、Googleが認識しやすい画像となるので今まで設定していなかった人は早速取り入れて見ましょう。

 

セーフサーチ向けに最適化

検索エンジンには未成年が使用する場合などにあらかじめアダルト要因を排除設定できる「セーフサーチ機能」が付いています。

もし、サイト内にアダルトに関連する画像がある場合は以下の様にドメイン下にグループ分けしてセーフサーチで分類しやすいようにしておきましょう。

例:http//www.office-exit.com/adult/image.jpg

 

画像を公開するおすすめの方法に準拠する

ガイドラインがおすすめする画像公開の方法には、さらに高度な専門知識を必要とする「ベクター画像・ラスター画像の使い分け」「CSSピクセルとデバイスピクセルの種別」「可逆画像圧縮と非可逆画像圧縮」「適切な画像形式の選択」と言った項目があります。

 

画像最適化に関する詳しい内容はこちら「ブログ画像の最適化/画像公開に関するGoogleのガイドライン徹底分析!☑」で紹介しています。

 

また、画像をダウンロード、引用する際は著作権がフリーになっている画像を選択する必要があります。

著作権に関する基礎知識はこちら「稼ぐブログに最適!おすすめ厳選ツール10☑」で紹介していますので、ご一読下さい。

 

画像容量の圧縮ツール

 

画像を圧縮するために必要な圧縮ツールは「Optimizilla」と記事中にも登場した「TinyPNG」が有名。

 

Optimizilla


画像圧縮ツールの中でも人気が高いOptimizilla。

画像最適化とファイル圧縮アルゴリズムを組み合わせてあるので、画質の損失率が低くJPEGやPNGイメージを最小サイズに圧縮することが可能。

扱っている形式はJPEG・PNG、1度に最大20枚まで画像ファイルをアップロードすることが可能です。

>>Optimizilla公式ホームページはこちら

 

TinyPNG


英語表記の画像圧縮ツールですが圧縮したい画像を画面上にドラッグ&ドロップするだけで、1度にまとめて20枚・5MBまでの画像を圧縮することができます。

JPEG、PNG形式対応で、圧縮率は自動設定されています。

>>TinyPNG公式ホームページはこちら

 

ページ表示速度チェックツール

ページ表示速度チェックには、記事内で使用したようなモバイル向けチェックツール「TestMySite」や、より詳細な分析が可能な「Google PageSpeed Insights」が優良ツール。

 

Google PageSpeed Insights

Google PageSpeed Insights
表示速度ツールでもっとも有名で詳細まで調べられるGoogleが提供するGoogle PageSpeed Insights。

アカウント登録不要で利用する手軽さがあり、計測したいページのURLを検索窓に貼り付けると1分ほどで表示速度・詳細を教えてくれます。

>>Google PageSpeed Insights公式ホームページはこちら

 

TestMySite

TestMySite
スマートフォンの急速な普及でスマートフォンユーザーはかなり増えており、本格的にあなたの記事を読んでファンになってもらうための入り口がスマートフォンなので必ずTestMySiteで表示速度チェックすることをおすすめします。

速度表示のほかに想定離脱率や同業種内でのパフォーマンス比較といった情報も分かるので、詳細に分析改善することができるでしょう。

>>TestMySite公式ホームページはこちら

 

画像を最適な容量に圧縮しよう

泳ぐ女の子

ブログに最適な画像を求めて画像の基礎知識・圧縮検証・注意事項について説明して参りました。

 

あなたのブログにとって最適な画像とは「記事や文章に沿った適切な写真の選別と高画質」を意味しており、モバイル向けに特化したブログやサイトでない限り画像の容量はそこまで気にするポイントではないことがお分かり頂けたと思います。

 

最近ではモバイル向けのブログサイトも増えてきていますが、同時に画像圧縮ツールやレスポンシブ技術も発展しているのでこれらを駆使して画像の質が求められないコンテンツでは画質の粗が見えない程度に圧縮最小化することが重要。

 

そして、同時に忘れてならないのはスマートフォンは進化してどんどん高解像度になってきています。

 

そのスマートフォンに相応しい高画質の画像や、より詳細なプログラミングの知識と言うのもまた必要不可欠となるでしょう。

ABOUTこの記事をかいた人

ブログ・投資・ビジネスをメインテーマにした俳句ブログ『Office Exitの俳句』編集者。ブログ運営→投資→ブラック企業から独立。ブログ収益360万、投資収益450万。趣味は俳句。特技は俳句。仕事も俳句。NHK全国俳句大会『入賞』、枕草国際俳句大会『入賞』、子規顕彰全国俳句大会『入賞』、福岡総合俳句大会『優秀賞』。