ホームページの画像を最適化する方法
公開日 2016年9月22日、更新日 2023年12月6日
ホームページに掲載する画像や写真の適切なサイズや解像度をご存知でしょうか？ホームページへの画像のアップロードは簡単ですが、画像を最適化することの重要性を忘れがちです。
しかし、画像の最適化は美しさだけでなく、ページの読み込み速度など、サイトのパフォーマンスにも影響します。今回は、ホームページの画像を最大限に活かすための5つのシンプルなヒントをご紹介します。実践しやすいので、ぜひホームページの作成にお役立てください。
01. 正しい画像ファイルを選択
画像ファイルには、ファイルの形式を示すための拡張子が付いています。最も一般的な画像ファイル形式は、「.gif」「.png」「.jpeg」です。これらの画像ファイル形式は、それぞれウェブ上での動作が異なり、画像の読み込まれ方、そして表示のされ方も違ってきます。
それぞれの画像ファイルの主な特徴
GIF GIFは最大8bit、256色までの色を表示することができる圧縮画像形式です。 その為、ロゴや簡易なイラスト等、フラットな色彩の画像には向いていますが、写真など多くの色を使う画像には適さないフォーマットとなっています。 またGIF は、透過処理を行うことができます(例えば、画像の背景を透明にするなど)。
PNG GIFを元に開発された、透過処理ができ、圧縮による画像劣化が少ないファイルフォーマットです。PNGは24bitフルカラーの画像もサポートします。欠点はフルカラーにした場合、画像のファイルイズが大きくなりがちな点です。
JPEG JPEGもPNGと同じように24bitフルカラーまで扱うことができるため、写真などの静止画像をウェブ上で表示するのによく使用されるフォーマットです。JPEG は、透過処理を行うことができません。
Wixで使うには、どの画像ファイルが適切か？
出来る限り、JPEGフォーマットを使用する事をおススメします。サイトの読み込み時間に影響を及ぼす恐れがあるため、PNGフォーマットは透明性を保つ必要がある画像やこの画像だけは特別キレイに表示したいというケースのみ使用してください
画像のピクセルサイズは最低でも3,000 X 3,000 ピクセルになっている事を確認してください。ピクセルサイズは、画像を右クリック→プロパティ→詳細設定をクリックすることで、確認できます。
画像のサイズについてですが、Wixでは自動的にサイズが調節されるので、アップロード前のサイズ調整は必要ありません。ただし、サイズの上限が15MBと決まっていますので、これ以上のファイルについては調整する必要があります。
02. 画質を調整
ほとんどの画像エディタでは、画像を保存する際の画質を選択することができます。Pixlrなど、無料で写真編集ができるオンラインツールもおすすめです。
驚くかもしれませんが、常に最高画質で写真を保存するのがベストというワケではありません。背景などの大きな画像や、高解像度を必要としない写真は、通常より若干低い画質で保存することで、ファイルサイズを小さく保ちましょう。そうすることで、サイトの読込み速度を向上してくれます。Wix が提供している、無料画像サイズ変更ツールなら、画像のサイズを瞬時に変更することも可能です。さっそく利用してみましょう。
一番良いのは、ホームページ上に実際に表示する画像サイズ(縦横比)を考えた上で、そのサイズにより近いJPEGの画像ファイルを用意することです。
03. ファイル名を最適化
コンピュータで画像フォルダの中を見ていると、多くの写真に「image1.jpg」や「DS_579.gif」のような、味気のない名前が付いていると思います。ホームページに画像をアップロードして使用する場合、これらのファイル名は全く効果的ではありません。
きちんとしたファイル名を付けることで、写真を整理しやすくなるだけでなく、Googleなどの画像検索で画像が分類されやすくなります。字数が多くなりすぎないように注意しつつ、画像をなるべく詳しく説明するファイル名をつけましょう。
04. 代替テキストを入力
ホームページに画像を追加する際には、検索エンジンが写真や画像の内容を理解できるようにするために「代替テキスト(altテキスト)」を追加しましょう。
背景イメージなど、特に情報を必要としない画像については、この代替テキストを記載する必要はありませんが、それ以外の画像については、あなたのビジネスに関連するキーワードをバランスよく使い、なるべく正確な画像の説明を加えてください。
05. 画像の大きさを決定
画像の大きさは、画像自体の質と同じくらい重要になります。画像をどのサイズで表示するのが最適であるかは、ホームページ全体のレイアウト、その画像コンテンツをどれだけ強調したいか、スマホサイトでのレイアウトなどによって異なります。
正しいサイズで画像を表示することで、サイト全体のデザインが向上するだけでなく、よりプロフェッショナルな好印象を与えてくれます。
編集者：Miyuki Shimose
SEO & ブログコンテンツマネージャー
