MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
WEB用に使われる画像形式の基礎と特徴

WEB用に使われる画像形式の基礎と特徴

公開日:2019年04月19日
最終更新日:2019年06月15日
オンスタ運営
マークアップ
Webデザイン
ホーム > 全記事一覧 > 制作 > エンジニア > マークアップ > WEB用に使われる画像形式の基礎と特徴
このエントリーをはてなブックマークに追加
WEB用に使われる画像形式の基礎と特徴
今回はコーダーにとって絶対必要な知識「WEB用に使われる画像形式の基礎と特徴」についてです。 コーディング時には、デザイナーさんが作成してくれたデザインデータをWEB上に表示させるためにバラバラに分解して画像として書き出すのですが、この画像は用途によってファイル形式を使い分ける必要があります。 ということで、WEBサイトに使う主な画像形式とその特徴についてまとめまていきます^^/

画像形式の特徴を知ろう

まずは画像全般の基礎知識について簡単にご説明いたします! 画像にもファイル形式があり、すべての画像はビットマップ形式(ラスタ形式)、ベクター形式(ベクトル形式)のどちらかに分類されます。

ビットマップ形式

  • 色のついたドットと呼ばれる点の集まりで構成された画像
  • 拡大や縮小などをすると画像が荒くなってしまう
  • グラデーションなどのきめ細やかな色の表現ができる
  • 表示するのに必要な処理量が少なく、軽い
例えば、JPEG/PING/GIFなど。 写真はビットマップ画像で、無数の点が集まって1枚の写真になっています。

ベクター形式

  • 点、線、塗りの情報を数値化してデータとして保持した画像
  • 表示されるごとに、保持しているデータをコンピュータが演算処理して表現するので拡大縮小で画像が荒くならない
  • 写真などの複雑な画像は再現がむずかしい
例えば、SVG/PDF/EPS/AIなど。 めちゃくちゃ簡単に説明してしまうと、 ビットマップ画像は拡大縮小するとドットも伸び縮みてしまい、画像が荒れてしまいます。 しかしベクター画像は点や線、塗りの情報が数値化されており、拡大縮小に合わせてその数値を再計算→表示するので画像が荒れない、という特徴があります。

用途によって形式を使い分けよう

WEBサイトでは用途に合わせて主にJPEG/PNG/GIF/SVG の4種類を使い分けています。

JPEG(ジェイペグ)の特徴

一般的に使用されている画像形式で、フルカラー1677万色まで表現することが出来るので、色数が多い画像がきれいに表示されます。非可逆圧縮という “人間の感覚に伝わりにくい部分を削ってファイルサイズを圧縮する”方法で画像を圧縮しています。 保存するたびに劣化してしまうが、ファイルサイズは小さめ。

主な使い方

風景・人物像など多くの色を使う写真、グラデーションがかかったイラストなど

PNG(ピング)の特徴

JPEGと同じでフルカラー1677万色まで色を扱うことができ、なおかつ透過処理が行える。半透明も表現することができます。 何度保存し直しても画質が劣化しない可逆圧縮で圧縮している。JPEGよりも高品質だが、ファイルサイズは大きめです。 PNG-8、PNG-24、PNG-32と種類があります。

主な使い方

人物写真の切り抜きや色数が多いイラスト、半透明を表現したい画像など

GIF(ジフ)の特徴

256色までしか扱うことができません。 アニメーションの表現や透過処理が出来ます。 画像保存する場合の長所としては少なく、単色や2色ほどの極端に色数の少ない画像であればファイルサイズが非常に小さくなります。 GIFアニメーションが作れるのが最も優れた特徴です。

主な使い方

単色・2色のロゴやイラスト、簡易的なアニメーション画像など

SVG(エスブイジー)の特徴

点、線、塗りの情報を数値化してデータとして保持し、そのデータをコンピュータが演算処理して表示されます。 アニメーションも透過もどちらも扱うことができ、WEB上でCSSやJavaScriptを使って色を変えたり、動かすこともできます。 複雑になると膨大な処理を必要するため、気をつける必要があります。

主な使い方

単純なパスで構成されたロゴ画像、単色のアイコン画像など。 CSSやJavaScriptで操作するアニメーション画像

まとめ

  • 背景・人物像などの多くの色を使う写真や、グラデーションがかかった画像はJPEGを使う
  • 背景色がある場合の切り抜き写真や、半透明を表現したい画像はPNG
  • 画像でアニメーションを表現したい場合はGIF
  • 簡単なパスであることが条件だが、全デバイスでぼけることなく綺麗に見せたい画像はSVG
で書き出しましょう! ということで、今回のブログは「WEB用に使われる画像形式の基礎と特徴」でした! 基礎中の基礎ではございますが、コーダーにとって画像形式をうまく使い分けることは、とっても大事なことなので是非参考にしてみてください! 最後までご閲覧いただきましてありがとうございました〜^^/

関連コンテンツ

【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
Webデザイン
デザイン
公開日: 2019年03月26日
最終更新日: 2019年05月28日
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
オンスタ運営
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
エンジニア
マークアップ
公開日: 2017年01月10日
最終更新日: 2019年06月26日
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
オンスタ運営
コーダーはCSS設計に夢を見る
エンジニア
マークアップ
公開日: 2017年02月10日
最終更新日: 2019年05月28日
コーダーはCSS設計に夢を見る
オンスタ運営
なんか物足りない…デザインにひと工夫!簡単テクニック10選
Webデザイン
デザイン
公開日: 2019年01月25日
最終更新日: 2019年05月28日
なんか物足りない…デザインにひと工夫!簡単テクニック10選
オンスタ運営
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
Webデザイン
オンライン学習
プログラミング
マークアップ
公開日: 2019年06月20日
最終更新日: 2019年09月05日
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
  • # cocoda!
  • # pickup
  • # Schoo
  • # TECHACADEMY
  • # Udemy
  • # オンライン学習
オンスタ運営
Webデザインで取り入れたい!心理学を使ってユーザーを誘導する方法
Webデザイン
デザイン
公開日: 2017年01月18日
最終更新日: 2019年05月28日
Webデザインで取り入れたい!心理学を使ってユーザーを誘導する方法
オンスタ運営
【CSS】CSSレイアウト組まとめ(前編)
マークアップ
公開日: 2018年09月08日
最終更新日: 2019年05月28日
【CSS】CSSレイアウト組まとめ(前編)
オンスタ運営
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
デザイン
マークアップ
公開日: 2019年03月30日
最終更新日: 2019年09月02日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営
Adobe XDに待望の新機能!共同編集機能がリリース!webデザイナーさん必見です!
Webデザイン
web担当者
ツール
デザイナー
制作
公開日: 2019年11月06日
最終更新日: 2019年11月06日
Adobe XDに待望の新機能!共同編集機能がリリース!webデザイナーさん必見です!
  • # Adobe XD
  • # 共同編集
  • # 新機能
オンスタ運営
【JSプラグイン】スクロール連動型アニメーション!jQuery不要のJSプラグイン「AOS」!
Webデザイン
プログラミング
公開日: 2017年07月17日
最終更新日: 2019年05月28日
【JSプラグイン】スクロール連動型アニメーション!jQuery不要のJSプラグイン「AOS」!
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。