よりキレイな画像を表示するためには
大きいサイズの画像をそのまま掲載するとサイトの表示速度が遅くなってしまう場合があります。
ホームページに使用する画像は適切なサイズ・ファイル形式で掲載しましょう。
■ 大きい画像を準備する
元の画像を縮小して利用する場合や少々拡大して利用する場合には問題ありませんが、大幅に拡大すると、画像が粗くなってしまいぼやけて見にくくなってしまいます。
ホームページに使用する画像は適切なサイズ・ファイル形式で掲載しましょう。
■ 大きい画像を準備する
元の画像を縮小して利用する場合や少々拡大して利用する場合には問題ありませんが、大幅に拡大すると、画像が粗くなってしまいぼやけて見にくくなってしまいます。
より美しく表示するためには、適切なサイズの画像を準備しましょう！
■ 画像は適当な大きさにリサイズする
大きな画像をそのままサイトに掲載していしまうと、サイトの表示速度が遅くなり、閲覧者にとってはストレスになりますし、SEO的にも不利になる場合もあります。
【ホームページに掲載させる画像サイズの目安】
| 縦：768px 横：1024px ポップアップ表示させる場合 |
縦：600px 横：800px ポップアップ表示不要の場合 |
|---|
画像は表示する場所に合わせて、サイズを縮小してから利用しましょう！
| 種 類 | 画像ファイルの特長 | 表示速度 |
|---|---|---|
| PNG （ピング） |
・フルカラーが可能なためGIFより扱える色が多く多彩な表現ができます。 ・テキストや線など色の境界がはっきりしたイメージに適しています。 ・GIFよりインターレース表示が綺麗で早いです。 （表示の時、最初は荒くて次第に細かい部分まで表示） ・透過画像が可能です。 （背景などの一部箇所を透けて見せることが可能） ・JPGよりもファイルサイズが大きくなりがちです。 【 利用シーン：繊細なイラスト、加工した写真 】 |
○ |
| JPG （ジェイペグ） |
・色数が多く表現が多彩で写真に適していますが、イラストにはあまり 適していません。 ・写真の場合、圧縮してファイルサイズを小さくしても、 その割に画像の劣化があまりありません。 ・ただし、圧縮率を上げ過ぎると画像が大きく劣化します。 ・編集するごとに画像が劣化します。 【 利用シーン：写真 】 |
○ |
| GIF （ジフ） |
・単純な画像ならファイルサイズが他の形式の画像より小さくなります。 ・透過画像が可能です。 （背景などの一部箇所を透けて見せることが可能） ・インターレース表示が可能です。 （表示の時、最初は荒くて次第に細かい部分まで表示） ・アニメーション画像が可能です。（簡単な動画） ・256色しか扱えないので、色数が少なく単純な画像に適しています。 ・写真では色数が少なく表現力に劣るためイラストに適しています。 【 利用シーン：イラスト、アニメーション 】 |
○ |
2014年12月19日 13:25
