サイトには大きすぎる?知っておくべき画像の知識
2020.04.06
保守、障害対応
こんにちは。
大阪でWEBコンサルティングとWEB制作をしているワイズオフィスです。
今回は画像について書きたいと思います。
Contents
画像の種類
画像データを見ていただくと、ファイル名の後ろにjpgとかpngといった拡張子を目にすると思います。これらは画像データの形式を表しております。
※拡張しては、そのデータがどの様な形式のものなのかを表すもので、ワードデータであれば「xxx.doc」エクセルデータであれば「xxx.xls」などのなっております。
そして画像データにおいてはそれぞれ特徴があり、強みを持っております。逆にいうと強みとマッチしていない画像形式にしてしまうと、画像が粗くなってしまったり、データサイズが不要に大きくなってしまったりすることがありますのでご注意ください。
jpg(ジェイペグ)
画像データにおいて最もメジャーな形式です。
写真などで多く採用されており、複雑な情報を持つデータをコンパクトにすることができます。
png(ピング)
Jpgの次に有名な画像フォーマットであるpngは、jpgとは異なり「背景透過」の機能を持っております。よって、jpgでは表現できない、人や物だけをくり抜いて表示させることができるのがpngになります。主にwebで使われることが多いです。
gif(ジフ)
pngが普及する前に背景透過をするために採用されていたのがgifです。フルカラーのjpegとはことなり、Gifは最大256色のデータ形式です。よって256色以下で構成される画像、例えばロゴやアイコン、ボタンなどの2次元の画像に適しております。また、最近ではアニメーション画像などを作るときに活用されることが多いです。
tiff(チフ)
この中では最もサイズの大きいデータで、一つの画像データの中に、複数の画像表現を組み込むことができます。Jpgは圧縮する際に、もともと撮影したときに存在しているデータの多くが損なわれてしまいますが、このtiffではそのまま存在してあります。そのため、データサイズが一番大きくなってしまうのです。
画像のデータサイズ
画像は様々な用途で使われますが、その用途によって適したサイズが存在しております。
例えば、webサイトのブログに掲載する写真について、デジタルカメラで撮影した写真をそのまま掲載していると、データ容量が重くなりすぎてしまう場合があります。そうなるとサイトの表示スピードが著しく遅くなり、ユーザーが離れてしまうことにつながります。
そこでそれぞれの用途に適したデータサイズを把握しておくと便利です。
WEBのメインビューなどで活用する写真
1M〜3M
枚数が限定して使用されるため、ある程度大きなサイズでも許容されます。
特にメインビュー ですと、画面フルサイズで活用されることが多いので、あまり小さなデータだと粗さが見えてしまう場合があります。
ブログなどに掲載する画像サイズ
200KB〜1000KB(1M)
あまりデータの大きい写真を掲載すると読み込みが遅くなります。
特に1ページに複数枚設置する場合は、気をつけた方がいいでしょう。
アイコンやボタンに活用するイラスト画像サイズ
50KB〜200KB
イラストであれば、不要に画像データを大きくする必要はないので、大きくても200KBが適正と思われます。
葉書サイズでプリントする写真画像
5M〜10M
プリントアウトするのであれば、特にデータサイズを気にすることなく、きれいに見えるために大きなサイズにすることをお勧めいたします。
人にメール送付してみてもらうための画像サイズ
〜2M
メールで大きなデータを送ると、送信にも受信にもかなり時間がかかってしまうため、人に送る際はデータう容量に気をつけた方がいいでしょう。最近ではgigaファイル便やfire storageなどのデータストレージサービスが普及しているので、そちらを活用することもお勧めいたします。
まとめ
いかがでしたでしょうか。
画像サイズを間違えると、人に迷惑をかけたり、WEBサイトの効果を落としてしまったりすることがあります。
当社ではこのように、IT運用の様々なアドバイスをさせていただいております。何かお困りのことがありましたら、是非当社にご相談ください。