こんにちは！デザイナーのニシヤマです。
デザインにおいて、文字だけではわかりづらい情報をより伝えやすくする「画像」。
WEBサイトでも写真や図を掲載する場面は多くあります。
そんな時、解像度が低く見た目の悪い画像や、表示するのに時間がかかる画像だと、WEBサイトの質自体が落ちてしまいますよね。
そこで今回は、WEB制作時に押さえておきたい「最適な画像の種類と解像度」についてご紹介します！
ぜひ最後までご覧ください。
WEBサイトに最適な画像解像度
結論から言うと、WEBサイトに適した画像解像度は「72ppi」になります。
しかし、近年は高解像度に対応したRetinaディスプレイも多いため、72ppiの等倍画像だと荒く見えてしまうこともあります。
その場合は、解像度ではなく「画像サイズ」を2倍以上で書き出しましょう！
解像度を高くした画像だとしても、サイズが等倍だとWEBでの見た目はほぼ変わらないので注意が必要です！
WEBサイトに最適な画像の種類（JPEG・PNG・GIF・SVG）
続いて、画像の種類についてです。
今回は、主に使用する機会が多い「JPEG・PNG・GIF・SVG」の4種類について、特徴をご紹介します。
それぞれ、どういった用途・目的でWEBサイトに載せるのかを考え、適したものを選ぶようにしましょう！
JPEG
まずはJPEG。こちらは圧縮がしやすく、細かい色の表現も得意な形式です。
主に写真など、大きく使いたいけれどファイル容量を軽くしたいものに向いています。
ただし、圧縮によって画質が下がりやすいので、サイズや見せ方に注意が必要です。
PNG
続いてPNGについてです。
PNGの大きな特徴は、なんと言っても透過に対応していること！
背景を透過させたイラストやロゴ画像などは、PNGで書き出すのが一般的です。
「PNG-8」「PNG-24」「PNG-32」などの種類によっては、重すぎてしまったり色が沈んでしまうこともあるため、その見極めも重要です。
GIF
GIFは、パラパラ漫画のようなアニメーションの表現ができる形式。
アイコンやボタンなどにちょっとした動きを加えると、サイトがリッチに見えます。
表現できる色数は少ないですが、画像を載せるだけでアニメーションが作れるのは魅力的です！
《関連記事》
SVG
最後となるSVGは、今までの3種類とは違い、ベクター形式です。
拡大しても荒れることがなく、CSSやJavaScriptなどの設定で色を変えたり、アニメーションの作成ができるため、自由度たっぷり！
しかし、複雑なものは表示に時間がかかるため、ロゴやアイコン、簡単な図などに向いています。
WEBサイトの画像は解像度に気を付けて圧縮！
先ほども少し触れましたが、「画像の重さ問題」はWEBサイトの制作ではつきもの…。
画像を大きく書き出せばきれいに見えますが、その分容量が大きく、表示に時間がかかってしまいます。
そんな時は、下記の3つの対処法を試してみてください！
①向き・不向きを理解して、画像の形式を使い分ける
②画像書き出し時の「画質」を80〜85%にする
③オンラインの画像圧縮サービスを使う
①は今回の記事でも紹介した通り、形式によってよりきれいに、よりスムーズにするためのポイントです。
②にある「画質」は、WEBで使用する際は80〜85%が圧縮率が高く、見え方もほぼ変わらない数値になります。
さらに③のサービスを使うことで、1ページにたくさん画像を使う場合でも、ストレスを軽減したWEBサイトを制作できること間違いなしです！
以上が、「WEB制作時の最適な画像の種類と解像度」でした！
とは言え、せっかくWEBサイトを作るなら、画像やアニメーションにもこだわりたいですよね。
そんな時はぜひ当社にご相談ください！
当社の豊富な制作実績を元に、ご希望に沿ったWEBサイトのご提案をさせていただきます！
▼WEBサイトの制作実績はこちらをご覧ください。
〈この記事を読んだ方にオススメ！〉
▼【オンライン展示会 運営サポート事例】富士通コワーコ株式会社様
▼【印刷会社が作るWEBサイトは強い！】訪れたくなるサイトを作るコツとは
