<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>画像 - one log</title>
	<atom:link href="https://one-time-life.net/tag/%E7%94%BB%E5%83%8F/feed/" rel="self" type="application/rss+xml" />
	<link>https://one-time-life.net</link>
	<description>主にガジェットやライフスタイル、サービスの紹介や実際に購入した物のレビューなど。</description>
	<lastBuildDate>Thu, 25 Mar 2021 09:06:50 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://one-time-life.net/wp-content/uploads/2021/04/cropped-iconmonstr-cube-2-240-32x32.png</url>
	<title>画像 - one log</title>
	<link>https://one-time-life.net</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>ピットマップ画像とは？ベクトル画像とは？両者の違いや特徴を徹底解説</title>
		<link>https://one-time-life.net/life/bitmap-vector-image/</link>
					<comments>https://one-time-life.net/life/bitmap-vector-image/#respond</comments>
		
		<dc:creator><![CDATA[haraitai]]></dc:creator>
		<pubDate>Sat, 20 Mar 2021 08:39:38 +0000</pubDate>
				<category><![CDATA[LIFE STYLE]]></category>
		<category><![CDATA[ビットマップ]]></category>
		<category><![CDATA[ベクトル]]></category>
		<category><![CDATA[画像]]></category>
		<guid isPermaLink="false">https://one-time-life.net/?p=2486</guid>

					<description><![CDATA[<p>こんにちは！ハナノです！（@K11936151） 以前こちらの記事でも少し触れた「ピットマップ画像」と「ベクトル画像」。 「拡張子」の種類や特徴まとめ！各拡張子の適切な使い方なども解説。 全ての画像は「ピットマップ画像」</p>
<p>The post <a href="https://one-time-life.net/life/bitmap-vector-image/">ピットマップ画像とは？ベクトル画像とは？両者の違いや特徴を徹底解説</a> first appeared on <a href="https://one-time-life.net">one log</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>こんにちは！ハナノです！<span style="color:#1e90ff; font-size:16px;" class="jic-sc jin-code-icon-twitter"><i class="jic jin-ifont-twitter"></i></span>（<a href="https://twitter.com/K11936151" target="_blank" rel="noopener">@K11936151</a>）</p>
<p>以前こちらの記事でも少し触れた<b>「ピットマップ画像」</b>と<b>「ベクトル画像」</b>。</p>
<p><a href="https://one-time-life.net/life/extension-jpg-png-gif-svg/ ‎" target="_blank" rel="noopener">「拡張子」の種類や特徴まとめ！各拡張子の適切な使い方なども解説。</a></p>
<p>全ての画像は<b>「ピットマップ画像」</b>もしくは<b>「ベクトル画像」</b>に分類されます。</p>
<p>今回はそんな<b>「ピットマップ画像」</b>と<b>「ベクトル画像」</b>の違いや特徴を詳しく解説していきたいと思います。</p>
<p>この記事では</p>
<div class="simple-box6">
<p><b>・「ピットマップ画像」の特徴<br />
・「ベクトル画像」の特徴<br />
・実際に比べる「ピットマップ画像」と「ベクトル画像」の違い</b><br />
<b>・「ピットマップ画像」と「ベクトル画像」が違う理由</b></p>
</div>
<p>を解説していきたいと思います！</p>
<h2>全ての画像は2つの種類に分類される</h2>
<p>冒頭でも触れましたが全ての画像は<b>「ピットマップ画像」「ベクトル画像」</b>の<span class="marker2"><b>”2種類”</b></span>に分類する事ができます。</p>
<p>写真やイラスト、ロゴ、図形などありとあらゆる<span class="marker2"><b><b>全ての画像がこの2種類</b>のどちらかに分けられるのです。</b></span></p>
<p>「ピットマップ画像」と「ベクトル画像」の2つはどのような<span class="marker2"><b>”特徴”</b></span>がありどのような<span class="marker2"><b>”活用方法”</b></span>があるのでしょうか。</p>
<p>それぞれの特徴をしっかりと理解して、その場面に適した画像を利用できるようになりましょう。</p>
<h2>ビットマップ画像の特徴</h2>
<p>まずはビットマップ画像の特徴から解説していきます。</p>
<p>ビットマップ画像とは<b><span class="marker2">”点の集まりで構成される画像”</span></b>のことです。</p>
<p>代表的な例でいうと<b>「写真」</b>がその対象となります。</p>
<img fetchpriority="high" decoding="async" class="alignnone wp-image-2492 size-full" src="https://one-time-life.net/wp-content/uploads/2021/03/puppy-1903313_1280.jpg" alt="ピットマップ画像の例" width="1200" height="800" srcset="https://one-time-life.net/wp-content/uploads/2021/03/puppy-1903313_1280.jpg 1200w, https://one-time-life.net/wp-content/uploads/2021/03/puppy-1903313_1280-300x200.jpg 300w, https://one-time-life.net/wp-content/uploads/2021/03/puppy-1903313_1280-1024x683.jpg 1024w, https://one-time-life.net/wp-content/uploads/2021/03/puppy-1903313_1280-768x512.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px" />
<p>写真は<span class="marker2"><b>無数の点が集まって一枚の写真</b></span>になっています。</p>
<div class="nomadBox_deco14">
<h4>ビットマップ画像の主な特徴</h4>
<p><b>・点の集まりなので拡大すると画像が荒くなってしまう</b></p>
<p>・写真はビットマップ画像</p>
<p>・複雑な画像の描写や多彩な配色が得意</p>
</div>
<p>詳しく説明していきましょう。</p>
<h3>拡大すると画質が荒くなってしまう</h3>
<img decoding="async" class="alignnone size-full wp-image-2509" src="https://one-time-life.net/wp-content/uploads/2021/03/rodion-kutsaev-ObXtS-KSyEo-unsplash.jpg" alt="" width="1200" height="800" srcset="https://one-time-life.net/wp-content/uploads/2021/03/rodion-kutsaev-ObXtS-KSyEo-unsplash.jpg 1200w, https://one-time-life.net/wp-content/uploads/2021/03/rodion-kutsaev-ObXtS-KSyEo-unsplash-300x200.jpg 300w, https://one-time-life.net/wp-content/uploads/2021/03/rodion-kutsaev-ObXtS-KSyEo-unsplash-1024x683.jpg 1024w, https://one-time-life.net/wp-content/uploads/2021/03/rodion-kutsaev-ObXtS-KSyEo-unsplash-768x512.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px" />
<p>先述した通りビットマップ画像は<b>”点の集まり”で構成されている画像</b>です。</p>
<p>点の集まりですので拡大していくうちに店の細かさの限界が近づくと<span class="marker2"><b>”画質が荒くなってしまいます”。</b></span></p>
<h3>多彩な配色や複雑な輪郭の表現が得意</h3>
<img decoding="async" class="alignnone wp-image-2503 size-full" src="https://one-time-life.net/wp-content/uploads/2021/03/robert-katzki-jbtfM0XBeRc-unsplash.jpg" alt="多彩な配色" width="1200" height="800" srcset="https://one-time-life.net/wp-content/uploads/2021/03/robert-katzki-jbtfM0XBeRc-unsplash.jpg 1200w, https://one-time-life.net/wp-content/uploads/2021/03/robert-katzki-jbtfM0XBeRc-unsplash-300x200.jpg 300w, https://one-time-life.net/wp-content/uploads/2021/03/robert-katzki-jbtfM0XBeRc-unsplash-1024x683.jpg 1024w, https://one-time-life.net/wp-content/uploads/2021/03/robert-katzki-jbtfM0XBeRc-unsplash-768x512.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px" />
<p>ピットマップ画像では小さな一つの点（ピクセル）を集合させて表現しています。</p>
<p><b>小さな点一つ一つに色や輝度の情報</b>が与えられているため、<span class="marker2"><b>多彩な配色や複雑な輪郭を表現することが得意です。</b></span></p>
<h2>ベクトル画像の特徴</h2>
<img decoding="async" class="alignnone size-full wp-image-2501" src="https://one-time-life.net/wp-content/uploads/2021/03/nejc-soklic-2jTu7H9l6JA-unsplash.jpg" alt="" width="1200" height="800" srcset="https://one-time-life.net/wp-content/uploads/2021/03/nejc-soklic-2jTu7H9l6JA-unsplash.jpg 1200w, https://one-time-life.net/wp-content/uploads/2021/03/nejc-soklic-2jTu7H9l6JA-unsplash-300x200.jpg 300w, https://one-time-life.net/wp-content/uploads/2021/03/nejc-soklic-2jTu7H9l6JA-unsplash-1024x683.jpg 1024w, https://one-time-life.net/wp-content/uploads/2021/03/nejc-soklic-2jTu7H9l6JA-unsplash-768x512.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px" />
<p>ベクトル画像とは<b>点や線、多角形などの情報</b>を<span class="marker2"><b>”数値化”</b></span>しその数値化されたデータをもとに演算される図形として画像を表示しています。</p>
<p>主に<b>複数箇所で様々な大きさで使われる事が多いロゴ</b>などがベクトル画像である事が多いです。</p>
<div class="nomadBox_deco14">
<h4>ベクトル画像の主な特徴</h4>
<p><b>・拡大・縮小しても画質が荒くならない</b></p>
<p>・多彩な配色や複雑な画像は不向き</p>
<p>・ロゴや拡大して使用する絵や文字が得意</p>
</div>
<p>詳しく解説していきましょう。</p>
<h3>拡大・縮小しても画質が荒くならない</h3>
<img decoding="async" class="alignnone wp-image-2505 size-full" src="https://one-time-life.net/wp-content/uploads/2021/03/stephen-kraakmo-uAzUg6_tMCo-unsplash.jpg" alt="虫眼鏡で拡大" width="1200" height="800" srcset="https://one-time-life.net/wp-content/uploads/2021/03/stephen-kraakmo-uAzUg6_tMCo-unsplash.jpg 1200w, https://one-time-life.net/wp-content/uploads/2021/03/stephen-kraakmo-uAzUg6_tMCo-unsplash-300x200.jpg 300w, https://one-time-life.net/wp-content/uploads/2021/03/stephen-kraakmo-uAzUg6_tMCo-unsplash-1024x683.jpg 1024w, https://one-time-life.net/wp-content/uploads/2021/03/stephen-kraakmo-uAzUg6_tMCo-unsplash-768x512.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px" />
<p>ベクトル画像では<b>点や線、多角形などの情報</b>を<span class="marker2"><b>”数値化”</b></span>する事ができます。</p>
<p>そのため、<span class="marker2"><b>拡大しても数値データを変化させて再描写されます。</b></span></p>
<p>このように<span class="marker2"><b>拡大や縮小に強い</b></span>のがベクトル画像の利点です。</p>
<p>Webサイトのロゴなどは<b>複数箇所で様々な大きさで同じ画像が使用される場合が多い</b>ため<b>ベクトル画像が使用される事が多い</b>です。</p>
<h3>多彩な配色や複雑な画像には不向き</h3>
<img decoding="async" class="alignnone wp-image-2507 size-full" src="https://one-time-life.net/wp-content/uploads/2021/03/arno-smit-qY_yTu7YBT4-unsplash.jpg" alt="多彩な配色の民家" width="1200" height="710" srcset="https://one-time-life.net/wp-content/uploads/2021/03/arno-smit-qY_yTu7YBT4-unsplash.jpg 1200w, https://one-time-life.net/wp-content/uploads/2021/03/arno-smit-qY_yTu7YBT4-unsplash-300x178.jpg 300w, https://one-time-life.net/wp-content/uploads/2021/03/arno-smit-qY_yTu7YBT4-unsplash-1024x606.jpg 1024w, https://one-time-life.net/wp-content/uploads/2021/03/arno-smit-qY_yTu7YBT4-unsplash-768x454.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px" />
<p>ベクトル画像は計算式によって表現されるため<b>写真のような複雑な描写には不向きです。</b></p>
<p>写真の様な無数の点の集まりをベクトル画像表現方法である<b><span class="marker2">”計算式”で表現するのは至難の技なのです。</span></b></p>
<h2>「ピットマップ画像」と「ベクトル画像」を比べてみよう</h2>
<p>実際にピットマップ画像とベクトル画像を比べてみました。</p>
<p><b>一見同じに見えるこちらの画像。</b></p>
<div id="attachment_2489" class="wp-caption alignnone" style="width: 1210px"><img decoding="async" class="wp-image-2489 size-full" src="https://one-time-life.net/wp-content/uploads/2021/03/スクリーンショット_2021-03-18_20_11_03.png" alt="ピットマップ画像とベクトル画像比べ" width="1200" height="550" srcset="https://one-time-life.net/wp-content/uploads/2021/03/スクリーンショット_2021-03-18_20_11_03.png 1200w, https://one-time-life.net/wp-content/uploads/2021/03/スクリーンショット_2021-03-18_20_11_03-300x138.png 300w, https://one-time-life.net/wp-content/uploads/2021/03/スクリーンショット_2021-03-18_20_11_03-1024x469.png 1024w, https://one-time-life.net/wp-content/uploads/2021/03/スクリーンショット_2021-03-18_20_11_03-768x352.png 768w" sizes="(max-width: 1200px) 100vw, 1200px" /><span class="wp-caption-text">左/ピットマップ画像；右・ベクトル画像</span></div>
<p>拡大していくとどのような変化があるのでしょうか。</p>
<div id="attachment_2490" class="wp-caption alignnone" style="width: 1210px"><img decoding="async" class="wp-image-2490 size-full" src="https://one-time-life.net/wp-content/uploads/2021/03/スクリーンショット_2021-03-18_20_11_34.png" alt="ピットマップ画像とベクトル画像比べ" width="1200" height="676" srcset="https://one-time-life.net/wp-content/uploads/2021/03/スクリーンショット_2021-03-18_20_11_34.png 1200w, https://one-time-life.net/wp-content/uploads/2021/03/スクリーンショット_2021-03-18_20_11_34-300x169.png 300w, https://one-time-life.net/wp-content/uploads/2021/03/スクリーンショット_2021-03-18_20_11_34-1024x577.png 1024w, https://one-time-life.net/wp-content/uploads/2021/03/スクリーンショット_2021-03-18_20_11_34-768x433.png 768w, https://one-time-life.net/wp-content/uploads/2021/03/スクリーンショット_2021-03-18_20_11_34-320x180.png 320w, https://one-time-life.net/wp-content/uploads/2021/03/スクリーンショット_2021-03-18_20_11_34-640x360.png 640w" sizes="(max-width: 1200px) 100vw, 1200px" /><span class="wp-caption-text">左/ピットマップ画像；右・ベクトル画像</span></div>
<p>この様に<b>ピットマップ画像は拡大するとピクセル一つ一つが目立ち、<span class="marker2">画質が荒くなっている</span></b>のが見てわかると思います。</p>
<p>一方で<b>ベクトル画像では拡大しても<span class="marker2">画質は荒くなることはありません。</span></b></p>
<p>この様に拡大することで<span class="marker2"><b>”明確な差”</b></span>が現れます。</p>
<p><b>なぜこの様な差が生まれるのでしょう。</b><br />
次の項目で詳しく解説していきましょう。</p>
<h2>ぼやけるピットマップ画像とぼやけないベクトル画像の違いとは？</h2>
<img decoding="async" class="alignnone size-full wp-image-2502" src="https://one-time-life.net/wp-content/uploads/2021/03/photography-4613632_1280.jpg" alt="" width="1200" height="800" srcset="https://one-time-life.net/wp-content/uploads/2021/03/photography-4613632_1280.jpg 1200w, https://one-time-life.net/wp-content/uploads/2021/03/photography-4613632_1280-300x200.jpg 300w, https://one-time-life.net/wp-content/uploads/2021/03/photography-4613632_1280-1024x683.jpg 1024w, https://one-time-life.net/wp-content/uploads/2021/03/photography-4613632_1280-768x512.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px" />
<p>先述した通りピットマップ画像は<b><span class="marker2">”点の集まり”</span></b>で構成されています。</p>
<p><b>一度表示された点の集まりをそのまま拡大</b>するので点の数の<span class="marker2"><b>限界に近づくほど荒くぼやけて見えます。</b></span></p>
<p>一方でベクトル画像では点や線を<b><span class="marker2">”数値化”</span></b>する事ができるので、<b>拡大された際にもう一度コンピューターが数値を拡大された度合いに合わせて計算し表現し直してくれます。</b></p>
<img decoding="async" class="alignnone size-full wp-image-2504" src="https://one-time-life.net/wp-content/uploads/2021/03/roman-mager-5mZ_M06Fc9g-unsplash.jpg" alt="" width="1200" height="900" srcset="https://one-time-life.net/wp-content/uploads/2021/03/roman-mager-5mZ_M06Fc9g-unsplash.jpg 1200w, https://one-time-life.net/wp-content/uploads/2021/03/roman-mager-5mZ_M06Fc9g-unsplash-300x225.jpg 300w, https://one-time-life.net/wp-content/uploads/2021/03/roman-mager-5mZ_M06Fc9g-unsplash-1024x768.jpg 1024w, https://one-time-life.net/wp-content/uploads/2021/03/roman-mager-5mZ_M06Fc9g-unsplash-768x576.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px" />
<p><b>黒板で例えると</b></p>
<div class="simple-box9">
<p><b>ピットマップ画像；黒板にそのまま書き込むイメージ</b></p>
<p><b>ベクトル家族；コンピュータが切り抜いた紙を貼り付けるイメージ</b></p>
</div>
<p>前者ですと一度書いてしまっているので<b><span class="marker2">編集は不可能です。</span></b></p>
<p>一方で後者ですと<b><span class="marker2">再度印刷し直して貼り付ける事ができます。</span></b></p>
<h2>ピットマップ画像・ベクトル画像の特徴まとめ</h2>
<p>おさらいとしてまとめてみました。</p>
<div class="nomadBox_deco14">
<h4>ピットマップ画像・ベクトル画像の特徴まとめ</h4>
<p><b>・画像はピットマップとベクトルのどちらかに分類される</b></p>
<p>・ピットマップは無数の点の集まりなので拡大・縮小することで画質が荒くなる</p>
<p>・ベクトルは点や線の情報を数値化している。拡大・縮小をした際にもそのデータをコンピューターが計算し直して再現するので画質が荒くならない</p>
</div>
<p>今回はピットマップ画像・ベクトル画像の違いや特徴をまとめてみました。</p>
<p>お互いの特徴の理解を深める事ができましたか？</p>
<p>この様な知識があれば<b>日常生活においての画像への見方も変わり楽しいですよ！！</b></p>
<p><b>↓画像圧縮について詳しくまとめました</b></p>
<p><a href="https://one-time-life.net/service/compression-image/" target="_blank" rel="noopener">画像圧縮とは？画像を圧縮する重要性やメリット・デメリット。適切に「画像圧縮」できていますか？</a></p><p>The post <a href="https://one-time-life.net/life/bitmap-vector-image/">ピットマップ画像とは？ベクトル画像とは？両者の違いや特徴を徹底解説</a> first appeared on <a href="https://one-time-life.net">one log</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://one-time-life.net/life/bitmap-vector-image/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
