ホームページ制作,MEO対策・アプリ制作,代理店募集の株式会社アシスト | 画像圧縮はホームページ制作は特に重要！知っておきたい画像テクニック | ホームページ | ホームページ制作・MEO対策・アプリ制作・LP制作のマーケティング情報局 | 株式会社アシスト

ホームページに画像は必須です。各ページの画像の使い方一つでユーザーに与えるイメージは大きく変わってきます。画像が適切に表示されていないと、最悪の場合、サイトや企業の信頼性が下がってしまいます。また、ユーザーに嫌われるだけでなく、アップした画像圧縮が原因で、検索順位を決定する Google のアルゴリズムからも嫌われる可能性があります。そうなると検索順位が下げられ、集客のためのスタートラインに立つことができないこともあります。

ホームページの画像圧縮に関する代表的なトラブルと原因は以下のようなものが挙げられます。

• 画像を表示されるように設定しているはずだが、あるべき場所に全く表示されていない【HTML / CSS 問題】

• 画像の縦と横のバランスが本来のものと違っておかしい【HTML / CSS 問題】

• 画像は表示されているが、本来のものより画質が悪くて見えにくい【画像サイズの問題】

• 画像の読み込みに時間がかかり、ページがいつまでたっても表示されない【画像のファイルサイズの問題】

他にも様々画像に関するトラブルはありますが、多くの原因は、元の画像ファイルに問題があるか、サイトのHTML / CSS に問題がある場合がほとんどです。

画像があるべき場所に表示されていなかったり、縦と横の比のバランスがおかしかったりする場合は HTML / CSS 構造を確認しましょう。画像に関する HTML / CSS の基本は以下です。

• img src=”  ”：「イメージソース」タグで、画像データがどこにあるのかを示しています。

• alt=”  “：「オルト」タグで、文字情報で画像の説明が入ります。

• height=”  “ ：「ハイト」タグで、画像の縦の大きさを設定します。

• width=”  “：「ウィトゥス」タグ（ 「ウィス」や「ワイス」などとも言われる）で、画像の横の大きさを設定します。

画像が表示されておらず、altタグに設定した説明文が表示されている場合は、タグの入力を間違えている（誤字がある）場合がほとんどです。また、縦と横の比のバランスがおかしい場合は、 height タグと width タグの設定が適当になっていることがほとんどです。元の画像の縦横比を確認し、height タグと width タグの大きさを元の画像の縦横比に合わせることで修正することができます。

ホームページで表示した際に本来のものより画質が悪くなっている（荒くなっている）場合は、元の画像サイズが小さいことが原因として考えられます（ホームページで表示している時は、小さな画像を引き伸ばしている状態です）。そのため、元の画像を大きくなるようにリサイズしましょう。 

Windows であれば標準搭載されている、「ペイント」のアプリを使って画像のサイズを変えることができます。他にもフリーソフトやブラウザ上でのサービスで画像サイズを変更できるものは数多くあります。もちろん、 Mac で動くものもたくさんあります。 

また、同一ページ上に複数の画像を揃えて表示したい場合は、Microsoft の PowerPoint や  Adobe のPhotoshop などのソフトを使い、事前にトリミングして画像の範囲やサイズを調整して揃えておくと良いです。