MENU
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ

カテゴリー

  • 趣味
  • WordPress
  • 本棚
  • プログラミング
  • 日記
  • WEBデザイン
  • フリーランス

タグ

Adobe Illustrator Gatsby.js HTML/CSS MySQL Node.js Python SWELL WordPressプラグイン おすすめツール エックスサーバー セキュリティ バレットジャーナル 確定申告 開発環境

アーカイブ

  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年8月
  • 2020年10月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年8月
  • 2019年5月
  • 2019年2月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2017年10月
プログラミングとデザインでものづくりを楽しむブログ
ゼロの森
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ
ゼロの森
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ
  1. ホーム
  2. WEBデザイン
  3. Webの画像形式(JPEG,PNG,GIF,SVG)使い分け

Webの画像形式(JPEG,PNG,GIF,SVG)使い分け

2021 9/12
WEBデザイン
2018-06-21 2021-09-12

Webでよく使われる画像には、JPEG,PNG,GIF,SVGと種類があります。

ファイルの特徴を理解して使いわけることで、高画質のまま、ファイルサイズも小さくおさめることができます。

目次
スポンサーリンク

Webで使う画像形式の種類

ざっくりまとめると、こんな風に使い分けます。

形式用途
JPEG写真、使われている色が多い画像
PNGイラスト、背景透明の画像
GIFシンプルなアイコン、ロゴ、アニメーション
SVG色を変更する、拡大縮小して使うアイコン

それぞれの特徴を紹介していきますね。

JPEG(ジェイペグ)形式の特徴

  • 高画質で容量が小さい
  • 画像データを一部破棄して圧縮するので、繰り返し保存すると画質が劣化してしまう
  • フルカラー(約1677万色)使えるので、色が多い画像にオススメ
  • 色を多く使うイラスト、写真に向いている

GIF(ジフ)形式の特徴

  • 256色まで使える
  • 容量が小さくてすむ
  • アニメーション、透過処理に使える
  • 単色のロゴ、アイコン、ボタン、アニメーションに向いている

PNG(ピング)形式の特徴

  • フルカラー(約1677万色)で高画質
  • 圧縮しないのでファイルサイズが大きくなりがち
  • 透明/半透明の画像に使える
  • イラストやロゴ、アイコン、背景が透明の画像、グラデーション画像に向いている

SVG形式の特徴

  • ベクター画像なので、拡大、縮小しても画質が劣化しない
  • ファイルサイズが小さい
  • アニメーション、透過画像に使える
  • CSSを用いて、色やサイズを変えたりできる
  • シンプルなロゴ、アイコンに向いている

SVGは、最近見かけるようになった形式。
Web上で配布されているWebアイコンとして使うことが多いかなと思います。

MacでWeb画像のファイルサイズを調整する

画像のファイルサイズが大きいと、ページの表示に時間がかかってしまいます。
かといって、あまりに小さくしてしまうと、画像が劣化して表示されてしまいます。
この画質とファイルサイズのバランスを決めていくのが大切。

画像の縦横サイズを決める

Macでは「プレビュー」を使って画像を調整できます。
プレビューで使いたい画像を開いたら、
「ツール」>「サイズを調整」から画像サイズと解像度を入れます。

PC用のウェブページに載せる画像は、
ページ上に表示するサイズで縦横サイズを決めます。

私のサイトだと、ブログに表示する画像は800pxくらいで用意しています。

ためしに測ってみると、私のHPのアイキャッチ画像はwidth(横)は684pxでしたね。
(見る人のブラウザによって、多少大きさは変わるでしょうが。)
Page RulerというChromeの拡張機能を使っています。

画質とファイルサイズを見極めて選んでね

「ファイル」>「書き出し」で、画像の形式と画質を設定します。

ファイルサイズが大きいとページの表示に時間かかること、
画像を保存している場所の容量も圧迫してしまうことから、
ファイルサイズはなるべく小さめがいいです。

私の目安は、
背景、アイコンなど、色や形がシンプルな画像は数KB。
写真などサイズが大きくなりがちなファイルは、最大でも100KB程度を目安にしています。

ファイル形式や品質を変えて、
画質が劣化していないか
ファイルサイズが大きすぎないか
チェックして使ってみてくださいね。

WEBデザイン
よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • WordPress子テーマの作り方
  • WordPressでブログ執筆をスピードアップ!マークダウンの書き方

関連記事

  • 「動くWebデザインアイディア帳」で、アニメーションサイトを作る
    2022-01-22
  • デザインのドリルで30個トレースして学んだこと
    2020-08-20
  • 2020年の手帳をイラストレーターで作りました♡
    2020-01-28
  • 【イラストレーター】システム手帳用カレンダーの作り方
    2019-02-05
  • おしゃれなブログアイキャッチを作るなら。無料ツール「Canva」を使ってみてほしい。
    2017-10-08
Zero Forest
カテゴリー
  • WordPress (30)
  • プログラミング (17)
  • WEBデザイン (6)
  • フリーランス (7)
  • ライフログ (10)
    • 趣味 (2)
    • 本棚 (3)
    • 日記 (5)
タグ
Adobe Illustrator (2) Gatsby.js (3) HTML/CSS (7) MySQL (1) Node.js (2) Python (2) SWELL (1) WordPressプラグイン (10) おすすめツール (3) エックスサーバー (4) セキュリティ (3) バレットジャーナル (2) 確定申告 (1) 開発環境 (3)
  • サイトマップ
  • サイトポリシー

© Zero*forest

目次
閉じる