WEB画像の最適な種類と解像度って?【WEBサイト画像作成時のポイント】

クリエイティブ / デザイン

こんにちは!デザイナーのニシヤマです。

デザインにおいて、文字だけではわかりづらい情報をより伝えやすくする「画像」
WEBサイトでも、写真や図を掲載する場面は多いと思います。

本日は、そんな時に押さえておきたい、「WEBサイトの画像作成時のポイント」をお伝えします!

WEBサイトに最適な画像解像度

結論から言うと、WEBサイトに適した画像解像度は「72ppi」になります。

しかし、近年は高解像度に対応したRetinaディスプレイも多いため、72ppiの等倍画像だと荒く見えてしまうこともあります

その場合は、解像度ではなく「画像サイズ」を2倍以上で書き出しましょう!
解像度を高くした画像だとしても、サイズが等倍だとWEBでの見た目はほぼ変わらないので注意が必要です!

WEBサイトに最適な画像の種類

続いて、画像の種類についてです。
今回は、主に使用する機会が多い「JPEG・PNG・GIF・SVG」の4種類について、特徴をご紹介します。

それぞれ、どういった用途・目的でWEBサイトに載せるのかを考え、適したものを選ぶようにしましょう!

JPEG

まずはJPEG。こちらは圧縮がしやすく、細かい色の表現も得意な形式です。
主に写真など、大きく使いたいけれどファイル容量を軽くしたいものに向いています。

ただし、圧縮によって画質が下がりやすいので、サイズや見せ方に注意が必要です。

 

PNG

続いてPNGについてです。
PNGの大きな特徴は、なんと言っても透過に対応していること!

背景を透過させたイラストやロゴ画像などは、PNGで書き出すのが一般的です。

「PNG-8」「PNG-24」「PNG-32」などの種類によっては、重すぎてしまったり色が沈んでしまうこともあるため、その見極めも重要です。

 

GIF

GIFは、パラパラ漫画のようなアニメーションの表現ができる形式。
アイコンやボタンなどにちょっとした動きを加えると、サイトがリッチに見えます。

表現できる色数は少ないですが、画像を載せるだけでアニメーションが作れるのは魅力的です!

《関連記事》

【3Dフィルムカメラの魅力】デザイナー&カメラマンが選ぶ!すごい動画アワード Vol.1

SVG

最後となるSVGは、今までの3種類とは違い、ベクター形式です。
拡大しても荒れることがなく、CSSやJavaScriptなどの設定で色を変えたり、アニメーションの作成ができるため、自由度たっぷり!

しかし、複雑なものは表示に時間がかかるため、ロゴやアイコン、簡単な図などに向いています。

重い画像は圧縮して、WEBサイトを軽く!

先ほども少し触れましたが、「画像の重さ問題」はWEBサイトの制作ではつきもの…。
画像を大きく書き出せばきれいに見えますが、その分容量が大きく、表示に時間がかかってしまいます。

そんな時は、下記の3つの対処法を試してみてください!

①向き・不向きを理解して、形式を使い分ける
②書き出しの際の「画質」を8085%にする

③オンラインで圧縮できるサービスを使う

 

①は今回の記事でも紹介した通り、形式によってよりきれいに、よりスムーズにするためのポイント。
②にある「画質」は、webで使用する際は80〜85%が圧縮率が高く、見え方もほぼ変わらない数値なのだそう。
さらに③のサービスを使うことで、1ページにたくさん画像を使う場合でも、ストレスを軽減したサイト制作ができることでしょう!

以上、「WEBサイトの画像作成時のポイント」でした!いかがでしたか?

せっかくWEBサイトを作るなら、画像やアニメーションにもこだわりたいですよね。そんな時は、是非当社にご相談ください!
豊富な制作実績を元に、ご希望に沿ったWEBサイトの提案をさせていただきます!

 お問い合わせ

WEBサイトの制作実績はこちらをご覧ください。

《関連記事》

【印刷会社が作るWEBサイトは強い!】訪れたくなるサイトを作るコツとは

コーポレートサイトのリニューアルを判断する3つのポイントとは

関連記事

関連サービス

お問い合わせ

運営会社

販促デザインを得意とする横浜の印刷会社です。デザイン制作から型抜き印刷・製本・出荷・配送を完全に内製化し、短納期の印刷ワンストップサービスを提供しています。

詳しく見る