画像は好きではないですか？

画像は、文章を読みながら魅力的な体験に変えることができ、ブログ記事をより充実させ、共有しやすくし、サイト全体のトーンとブランドを設定します。

私たちはイメージに反応するようにできているのです。 だからこそ、コンテンツにイメージを取り入れることは、ブログをマーケティングする上で強力なツールとなるのです。

ほんの数年前まで、ウェブページの平均サイズは60〜70Kでしたが、現在では2MBとなり、年々増加しています。

それは大きいですね！

これは、ウェブページで複数の画像が頻繁に使用されるようになり、これらの画像が適切なサイズで最適化されていないためです。 つまり、ウェブに適した方法で保存またはコンパイルされておらず、ページを肥大化させているのです。

しかし、ほとんどの人は、画像の最適化は後回しにして、壮大な記事を作ったり、ニッチな分野の他のブロガーとネットワークを作ったりするような楽しいことを楽しみたいと思うでしょう。

しかし、ページが肥大化するということは、ページの読み込み速度に影響を与えるということです。 あなたが高速回線を使っているのであれば、これは大した問題ではないと思うかもしれませんが、あなたの訪問者の多くはそうではありません。 また、Googleは読み込みが遅いページを好まないので、SEOに悪影響を及ぼす可能性があります。

画像の最適化が必要な理由

せっかく素晴らしいコンテンツを作り、ブログの宣伝や他のブロガーとの交流に数え切れないほどの時間を費やしているのですから、潜在的な訪問者がウェブサイトを読み込む前に放棄してしまうようなことは避けたいものです！

調査によると、サイトの読み込みに3秒以上かかると、最大で40％の訪問者が戻るボタンをクリックすることが分かっています。

でも、モバイル回線でサイトの読み込みを待っているときは、1秒が永遠に感じられることもあるんです。

そして、訪問者の多くが低速のモバイル接続を利用している可能性があるため、ページサイズを小さくする必要があることは明らかです。 そして、ページサイズの肥大化の最大の原因である画像は、すでに分かっています。

また、不必要に大きな画像は、ホスティングアカウントの容量を圧迫します。 無制限」のストレージスペースを持つホスティングを利用している人もいるかもしれませんが、多くのプレミアムホスティングプロバイダは、下位プランのストレージを10GB程度に制限しています。 これは、特に同じアカウントで複数の画像を多用するサイトをホストする場合、すぐに満杯になってしまいます。

では、画像がサイトの速度を低下させているかどうかを見分けるにはどうすればいいのでしょうか？ Google PageSpeed Insightsでサイトの速度をテストしてみましょう。

Googleが最適化されていない画像を問題として報告した場合、それを修正するために知っておくべきことは以下のとおりです。

画像最適化の基本

ブログで画像を最適化する場合、ファイルの種類、画像のサイズと寸法、画像の提供方法、画像圧縮など、注意しなければならない点がいくつかあります。

では、それぞれの分野について詳しく見ていきましょう。

ファイルの種類

ウェブ上の画像は通常、PNGまたはJPEGファイル形式、またはアニメーション用のGIFで保存されます。 ウェブ上に流れる愉快なアニメーションGIFを愛さない人はいないでしょう！

今は技術的に へいき しかし、最高の品質と最適化のために、以下のルールを守ってください：

• JPEG - 人や場所、モノが登場する写真やデザインに使用します。
• PNG - グラフィック、ロゴ、テキストの多いデザイン、スクリーンショット、透明な背景を持つ画像が必要な場合に最適です。
• GIF - アニメーションが必要な場合、それ以外はPNGを使用します。

では、なぜフォーマットが違うのでしょうか？

PNGはロゴやグラフィックの保存によく使われますが、これは元の画質を保つためです。 しかし、写真をPNGで保存しようとすると、見た目は素晴らしいですが、ファイルサイズはそれほどでもありません。

JPEGは従来から写真の保存に使われており、ファイルサイズを大幅に小さくするために画像データの一部を捨てていますが、写真にはさまざまな色や自然の変化が含まれているため、通常、人間の目には品質の低下は感じられません。

圧縮については後で詳しく説明しますが、とりあえず2つだけ覚えておくと、写真はJPEG、テキスト/グラフィックはPNGと覚えておいてください。

画像寸法

ウェブページを立ち上げたとき、小さな画像（例えば顔写真など）のダウンロードに時間がかかることに気づいたことはありませんか？ 例えば、一行ずつ入ってくるのがわかるくらい遅い。 こんな小さな画像のダウンロードにこんなに時間がかかるのか、と思ったことはありませんか？

また、大きなヘッダー画像で発生した場合は、ページ全体の読み込みを遅らせる可能性があるため、さらに最悪です。

このような現象が起こるのは、ブロガーが画像のサイズを適切に変更し、最適化していないことが原因です。

しかも、それが巨大なファイルなんです！

ウェブブラウザは、ウェブページに表示される画像を元のサイズから縮小して表示します。 画面上では小さく見える画像も、実はブラウザによってリアルタイムに縮小された10メガピクセルの巨大写真だったりします。

しかし、そうでない場合は、Photoshop、Lightroom、Pixlr、あるいはMS Paintなどの画像エディタで、あらかじめ画像のサイズを変更しておきましょう。 50Kのファイルが5MBになるかどうかの違いもあります。

例えば、WordPressでは、アップロードした画像のコピーを3つ（テーマによってはそれ以上）自動的に作成し、ブログ記事で使用することができます（すべて異なるサイズの画像）。

巨大なストックフォト画像をアップロードする習慣があり、ホスティングアカウントのスペースを節約したい場合、WordPressプラグインImsanityがあなたの背中を押してくれます。

元の画像を扱いやすい大きさにリサイズして置き換えるので、フルサイズの画像を投稿に挿入しても、それほど違和感がありません。

また、Imsanityを起動すると、既存の画像を検索し、それに合わせてリサイズすることができます。

画像の提供

画像をどのように訪問者に提供するかは、それ自体が最適化というわけではありませんが、ページのロードタイムに劇的な影響を与える可能性があります。

しかし、サイトのパフォーマンスを最大限に引き出すには、コンテンツ・デリバリー・ネットワーク（CDN）で画像をホスティングすることが効果的です。

CDNは、世界中のデータセンターに戦略的に配置されたウェブサーバーで構成され、これらのサーバーは画像の複製をホストし、訪問者のブラウザがあなたのウェブサイトから画像を要求すると、CDNは自動的に地理的に最も近いサーバーにブラウザを誘導する。

これにより、例えばヨーロッパからの訪問者は、米国などのサーバーではなく、ヨーロッパのローカルサーバーから画像を受け取ることになります。 応答時間やネットワークの遅延が減少するため、画像のダウンロードがより速くなり、ページのロード時間が短縮されます。

Blogging WizardはSucuriを使用していますが（CDNだけでなくセキュリティのためのファイアウォールも含まれています）、AmazonのCloudfrontやKeyCDNなど、他にも質の高いプロバイダーがあります。 人気のCloudFlareも、厳密にはCDNではありませんが、CDNを無料で提供しており、ほとんどの共有ホスティングパッケージで簡単にセットアップすることができます。

画像圧縮

画像の最適化において、高度な非可逆画像圧縮ほどファイルサイズを小さくできるものはありません。

VismeやPhotoshopなどの画像編集ツールでは、ファイルサイズを最も小さくできる非可逆圧縮のJPEG圧縮で保存することがほとんどです。 そのため、画質は若干落ちますが、非可逆画像圧縮を使用すると、巨大な画像をウェブに適したサイズに縮小できます。

Photoshopを使用している多くの人が、そのPhotoshopを見るかもしれませんね。 ウェブ用に保存 また、PicMonkeyやVismeのようなオンライン画像編集ツールでも、画像の最適化を行うことができます。

しかし、Photoshopなどの編集ツールで「最適化」された画像を、さらに40％（またはそれ以上）カリカリと圧縮してくれるツールがあることをご存知でしょうか？ 今なお 人間の目にはほぼ同じに見えるのでしょうか？

ここでは、画像をウェブ上で使いやすい状態にするための無料・有料ツールをご紹介します。

デスクトップツール

ImageAlpha / ImageOptim

Macユーザーにとって、ImageOptimは無料のデスクトップツールで、私は毎日、アップロードする前にPNG画像（主にスクリーンショット）を最適化するために使っています。 これらのツールは使いやすく、ファイルをドラッグ＆ドロップするだけですが、一度に1枚の画像を処理しなければなりません。

プロの技 技術に自信のある方はImageOptim-CLIで、画像のフォルダ全体を一度に最適化することができます。

ImageAlphaは非可逆圧縮のPNG圧縮機で、PNGファイルの縮小に威力を発揮し、ImageOptimは高度な非可逆圧縮（非可逆圧縮のオプションあり）を行い、PNG、JPEG、GIFファイルから不要なメタデータを削除する。

PNG画像は、まずImageAlphaを通しています：

ここでは、スクリーンショットの画像を103Kから28Kに縮小しています。

その後、ImageOptimにかけたところ、さらに10％の節約になりました。

ジェーペグミニ

JPEGファイルは、MacとWindowsの両方で利用できるデスクトップのJPEGminiアプリで最適化しています。

Lite版では、1日20枚まで無料で最適化でき、制限を解除するには19.99ドルかかります。

プロの技 JPEGminiをPhotoshopやLightroomにプラグインで組み込みたい上級者は、Pro版を99.99ドルで購入することができます。

オンライン/クラウド/SaaSツール

タイニーPNG

高品質のオンライン画像圧縮ツールをお探しなら、TinyPNG（名前に反してJPEGファイルも最適化します）は、5MB以下の画像を20枚までブラウザにドラッグし、一度に最適化できるウェブアプリです。

また、開発者向けAPIを用意し、アップロード時に画像を自動的に最適化できるWordPressプラグインを利用できるようにしています。

TinyPNGは、1ヶ月に500枚の画像最適化を無料で提供し、その後は容量に応じて1枚あたり0.002〜0.009ドルの課金を行います。

しかし、WordPressでは1つの画像に対して3～5種類の異なるサイズの画像を作成することが多いため、500枚の画像はそれほど多くないように思われます。 其れ程 ブログの更新が多い方でも、1枚あたりの単価が安いので安心です。

EWWW Image Optimizer

お金をかける気にはなれないし、手動で画像を最適化するのも面倒だという方は、WordPress用の無料プラグイン「EWWW Image Optimizer」を使えば、アップロードした画像を自動的に最適化できます。

非可逆圧縮を行うプレミアムサブスクリプションを選択することもできますが、無料版は可逆圧縮しか行わないため、節約効果はほとんどありません。 しかし、時間を節約することができ、何もしないよりはましです。

注意してください： その全貌は、画像圧縮ツールについての記事をご覧ください。

包み込むように

2017年にはウェブページの平均サイズが3MBに近づくという予測もある中、今こそ画像の最適化を始めるべき時です。

ページの肥大化や読み込み時間の遅れは、Googleのランキングに影響を与える可能性があります。 いわば負荷を軽減するために、今日から画像を最適化する習慣をつけましょう。

画像サイズに注意し、大きすぎるストックフォトやデジタルカメラで撮影した画像は適切なサイズにリサイズしてください。

次に、JPEGminiなどのデスクトップアプリケーションやTinyPNG、Krakenなどのクラウドツールで最新の画像圧縮を利用し、可能であればプラグインでWordPressに統合してください。

最後に、もしあなたの出版プラットフォームが自動的にオリジナル画像のリサイズバリエーションを作成するのであれば、ブログ記事にはフルサイズのオリジナル画像ではなく、これらのうちの1つを選びます。

関連する読み物です： PDFファイルのサイズを小さくする7つの方法。