品質を損なうことなくWeb用に画像を最適化するための5つのヒント

公開: 2019-10-15

「絵は千の言葉を描く」という古くからのフレーズは、製品の販売を成功させる上でのイメージの重要性を説明するために、マーケティングベンチャーでよく使用されます。これは、お客様が書面の内容よりも商品イラスト（商品の品質、色、その他の仕様を理解するため）に大きく依存しているためです。ウェブサイトへのアクセス率は、画像の品質に応じて大幅に増減する可能性があります。したがって、Webサイトで提供する画像は、高解像度で鮮明でなければならないことは言うまでもありません。ただし、落とし穴があります。

不適切にエクスポートされた低品質の画像はウェブページ上でくすんだように見える傾向があり、非常に高品質の画像はサイトの読み込みが遅くなるため、どちらの場合もユーザーのエンゲージメントを失うことになります。調査によると、サイトの読み込みに3秒以上かかると、53％の人がモバイルサイトを離れます。読み込みに時間がかかりすぎるウェブサイトは、バウンス率が高くなる傾向があり、最終的にはGoogleがあなたのウェブサイトを嫌うことになります。これは、順番に、SEOランキングに大きな影響を与えます。

ご覧のとおり、会話率を上げ、WebサイトのパフォーマンスとともにSEOランクを維持するには、ページの読み込み時間を短縮することが最も重要になります。画像はウェブサイトの読み込み時間のかなりの部分を占めるため。ウェブサイトの読み込み時間を改善し、ひいてはSEOを改善するには、画質と画像ファイルサイズの完璧なバランスを見つけることが不可欠になります。

Web用に画像を最適化するために使用できる特定のトリックとテクニックがあります。これにより、これらの空白スペースと読み込みの遅い高解像度写真によって、訪問者が不満を感じないようになります。画像を最適化するこれらの5つの一流の方法を見て、すべてのグラフィックが美しく、鮮明で、目に心地よいものであることを確認してください。

1.画像を適切な色空間に保存します

コンピューターは2つの色空間を使用して画像を表示します。 RGBとCMYK。 RGBは、赤、緑、青の略で、カメラやコンピューターなどのデジタルデバイスで使用されるデフォルトの色空間です。これに加えて、プリンターで一般的に使用される別のカラープロファイルCMYK（シアン、マゼンタ、イエロー、ブラックの略）にも出くわします。これらの画像をWebサイトで使用する場合は、画像を鮮やかで明るく見せるために、色をRGBに変換することが不可欠です。

IllustratorやAdobePhotoshopなどのソフトウェアを使用して、CMYK画像をRGBに変換できます。たとえば、システムにPhotoshopがインストールされている場合は、メニューバーの[画像]オプションに移動し、[モード]ドロップダウンを選択して、RGBカラーを選択します。次に、[ファイル]セクションにアクセスしてファイルを保存します。編集を終了すると、色がより光沢があり鮮やかに見えることがすぐにわかります。

2.ファイルサイズを圧縮します

画質は、最終的なファイルサイズや圧縮設定などの要因に大きく依存します。さらに、画像が鮮明でピクセル化されていないことも確認する必要があります。 Webから画像を保存するときは、ページの読み込み速度を速く維持するために、ファイルサイズが2MB（2048キロバイト）未満であることを確認してください。

正しい圧縮設定を使用すると、最適なファイルサイズとともに優れた画質を実現できます。一般に、ピクセル化を回避するために、70〜80％の画像圧縮レベルまたは個々の色のポイントでファイルを保存することを試みることができます。ただし、圧縮の量は、元の画像の形式とファイルサイズに関係するいくつかの要因によって異なることに注意する必要があります。ファイルサイズをさらに圧縮したい場合は、Imagifyなどの無料ツールを使用できます。

3.正しいファイル形式を使用します

画像やグラフィックをWebから保存するために使用できる主なファイルの種類は、主にPNG、GIF、JPG、SVGの4つです。これらの各フォーマットには、欠点、利点、使用目的があり、これらの画像のフォーマットを開始する前に、特定の画像タイプを知っておく必要があります。

まず、ファイルがラスターイメージかベクターイメージかを確認し、それに応じてファイルを保存する必要があります。ラスター画像は通常、ピクセルベースのプログラムで作成されたカメラまたはスキャナーでキャプチャされます。これらのタイプの画像はピクセル数が有限であり、より大きなフォーマットに拡大縮小しようとするとすぐに品質が低下します。ラスター画像に最適なPNG、JPEG、JPG形式。

一方、ベクターグラフィックはベクターソフトウェアで作成され、無限のサイズにすることができます（品質を損なうことなく）。 SVGおよびGIFファイル形式はベクター画像に最適ですが、JPGまたはPNGとして保存することもできます。ただし、後者の場合、グラフィックを無限に拡大縮小する機能が失われる可能性があります。

4.複数の画像サイズをエクスポートします

モバイルデバイスは通常のデスクトップコンピューターよりも高解像度の画面を備えているため、ユーザーは主にモバイルデバイスを使用してデジタルコンテンツを表示することを好みます。 HiDPIを備えたこれらの高密度ディスプレイ、Retinaテクノロジーは、ほとんどのデスクトップコンピューターの標準が72 PPIである場合、200ピクセル/インチ（PPI）を超えます。誰かが72PPIの画像をコンピューターで表示するのではなく、モバイルデバイスで表示した場合、より多くのピクセルで保存された画像と比較して、鮮明に見えません。

画質がモバイルブラウザとデスクトップブラウザに適していることを確認する効果的な方法は次のとおりです。

@ 2xおよび@ 3xスケールで画像をエクスポートします。つまり、画像の改訂バージョンは2x（200％）または3x（300％）になります。

元のサイズ。これにより、ユーザーのモバイルWebブラウザーは、同じスペースに元のサイズの2倍または3倍の画像を自動的に表示できます。

5.代替テキストを使用して画像ソースを説明します

代替テキストまたは代替属性とも呼ばれる代替テキストは、画像のソースに関する情報を提供するHTMLコードで記述された短いフレーズです。 Googleは、alt-text-imagesを比較的高い価値に置いています。これらの画像は、オーディエンスを喜ばせるという基本的な目的を果たすだけでなく、WebサイトのSEO最適化において重要な役割を果たすためです。これは、Googleで上位を獲得するために、SEOキーワードを含むテキストやフレーズを含める機会が得られるためです。たとえば、代替テキストのないHTMLコードは、https：//pexels.com/photo/dogのように表示されます。
一方、代替テキストが含まれている場合は、次のように表示されます

これらの代替テキストは、視覚障害のあるWebサイトの読者にも役立ちます。スクリーンリーダーは、これらの代替テキストを読み上げて、画像の内容とページ上の画像の機能を説明します。また、インターネット接続が遅いユーザーが写真のコンテキストを理解し、その過程でバウンス率を下げるのに役立ちます。

compressPNG.com、Smush.it、webresizer.comなどのさまざまなオンラインプラットフォームもあり、画質をあまり犠牲にすることなくWebサイトの画像を最適化するために使用できます。

面倒なようですが、なぜわざわざ？

さて、前に説明したように、ウェブサイトの読み込み時間に対する大きな画像の影響は、その成長に悪影響を及ぼします。さらに、次の影響も考慮する必要があります。

Googleは、データを大量に消費する低速のWebサイトにペナルティを課し、SERP結果の優先度を低くします。

大きな画像はかなりの量のサーバースペースを占有し、最終的にはより多くの費用がかかります。

ウェブページが大きいほど、ユーザーが表示してバウンス率に追加する必要のあるデータが多くなります（モバイルデータの許容量が制限されているユーザーは、サイトに長時間滞在することに懐疑的であるため）

私の見方では、画像の最適化は主にWebサイトのユーザーを尊重することです。あなたの聴衆は滑らかでスピーディーな体験を高く評価するはずであり、あなたのページに何度も戻ってくる可能性が高くなります。そしてもちろん、グーグルは、読み込みが速く、モバイルフレンドリーなサイトが検索エンジンに非常に好まれていることを高く評価するでしょう。

言うまでもなく、圧縮のレベルは画像の複雑さに応じて異なります。このブログは、基本的な最適化を最小限の時間で実行できるようにするための基本的な戦略を提供することを目的としています。ただし、インターネットにはたくさんの情報があります。知識を深めたい場合は、検索エンジンに「品質を犠牲にすることなくWebの画像を最適化する」と入力して、すぐに飛び込んでください。