• 0k
  • 0
ウェブデザイン \ 2016年9月22日

ホームページの画像を最適化する方法

ホームページに掲載する画像や写真はどれくらいのサイズが適切か、解像度はどのくらいのものが良いのか知っていますか?ホームページに画像をアップロードするのはとても簡単であることから、画像を最適化する作業の重要性を忘れてしまっている方が多くいます。

でも画像の最適化は、ホームページ上の画像をより美しく見せるだけでなく、ページの読み込み速度など、サイトのパフォーマンスにも影響を与えます。

今回は、ホームページの画像を最大限に活かすための5つのシンプルなヒントをご紹介します。すぐに実践できますので、ぜひ試してみてくださいね!

ホームページの画像

1. 正しい画像ファイルを選択

画像ファイルには、ファイルの形式を示すための拡張子が付いています。最も一般的な画像ファイル形式は、「.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と決まっていますので、これ以上のファイルについては調整する必要があります。

2. 画質を調整

ほとんどの画像エディタでは、画像を保存する際の画質を選択することができます。Pixlrなど、無料で写真編集ができるオンラインツールもおすすめです。

驚くかもしれませんが、常に最高画質で写真を保存するのがベストというワケではありません。背景などの大きな画像や、高解像度を必要としない写真は、通常より若干低い画質で保存することで、ファイルサイズを小さく保ちましょう。そうすることで、サイトの読込み速度を向上してくれます。

一番良いのは、ホームページ上に実際に表示する画像サイズ(縦横比)を考えた上で、そのサイズにより近いJPEGの画像ファイルを用意することです。

画質の違い

3. ファイル名を最適化

コンピュータで画像フォルダの中を見ていると、多くの写真に「image1.jpg」や「DS_579.gif」のような、味気のない名前が付いていると思います。ホームページに画像をアップロードして使用する場合、これらのファイル名は全く効果的ではありません。

きちんとしたファイル名を付けることで、写真を整理しやすくなるだけでなく、Googleなどの画像検索で画像が分類されやすくなります。字数が多くなりすぎないように注意しつつ、画像をなるべく詳しく説明するファイル名をつけましょう。

4. 代替テキストを入力

ホームページに画像を追加する際には、検索エンジンが写真や画像の内容を理解できるようにするために「代替テキスト(altテキスト)」を追加しましょう。

背景イメージなど、特に情報を必要としない画像については、この代替テキストを記載する必要はありませんが、それ以外の画像については、あなたのビジネスに関連するキーワードをバランスよく使い、なるべく正確な画像の説明を加えてください。画像に代替テキストを追加する方法はこちらからご覧ください。

 

代替テキスト

5. ホームページ内に占める、画像の大きさを決定

画像がどれだけのスペースを占めるかは、画像自体の質と同じくらい重要になります。画像をどのサイズで表示するのが最適であるかは、ホームページ全体のレイアウト、その画像コンテンツをどれだけ強調したいか、スマホサイトでのレイアウトなどによって異なります。

正しいサイズで画像を表示することで、サイト全体のデザインが向上するだけでなく、よりプロフェッショナルな好印象を与えてくれます。

ホームページ作成ならWix


今すぐ Wixブログ を
無料購読しよう!

Wixブログを購読しよう 役立つ情報をいち早くゲット!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email

Wixブログを購読 \ 

WebデザインやWix新機能についての
最新情報を無料でお届けします!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email