<?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>画像編集 | 岐阜で結果重視のホームページ制作ならエイトクリエイターズ｜名古屋や三重も対応可</title>
	<atom:link href="https://8creators.com/tag/%e7%94%bb%e5%83%8f%e7%b7%a8%e9%9b%86/feed/" rel="self" type="application/rss+xml" />
	<link>https://8creators.com</link>
	<description>ネット集客に強いエイトクリエイターズ</description>
	<lastBuildDate>Wed, 10 Jan 2018 08:34:15 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.3</generator>

<image>
	<url>https://8creators.com/wp-content/uploads/2022/07/cropped-favi-32x32.jpg</url>
	<title>画像編集 | 岐阜で結果重視のホームページ制作ならエイトクリエイターズ｜名古屋や三重も対応可</title>
	<link>https://8creators.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>画像形式のJPG、GIF、PNGの違いって何？基本編</title>
		<link>https://8creators.com/oyakudachijyouho/jpgpnggif/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=jpgpnggif</link>
		
		<dc:creator><![CDATA[8creators]]></dc:creator>
		<pubDate>Wed, 13 Apr 2016 12:09:45 +0000</pubDate>
				<category><![CDATA[お役立ち情報]]></category>
		<category><![CDATA[画像編集]]></category>
		<guid isPermaLink="false">https://8creators.com/?p=2652</guid>

					<description><![CDATA[<p>どうも！岐阜県を中心にホームページ制作をおこなっている8creatorsです★ 今回はブログやホームページに画像を使用する際に、使用する頻度の高い画像形式で代表的な３種類の特徴を簡単に説明したいと思います。 この３種類の [&#8230;]</p>
<p>The post <a href="https://8creators.com/oyakudachijyouho/jpgpnggif/">画像形式のJPG、GIF、PNGの違いって何？基本編</a> first appeared on <a href="https://8creators.com">岐阜で結果重視のホームページ制作ならエイトクリエイターズ｜名古屋や三重も対応可</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>どうも！岐阜県を中心にホームページ制作をおこなっている8creatorsです★</p>
<p>今回はブログやホームページに画像を使用する際に、使用する頻度の高い画像形式で代表的な３種類の特徴を簡単に説明したいと思います。</p>
<p>この３種類の特徴をしっかり把握することで見た目が綺麗になる事はもちろんですが、ファイルサイズが軽くなる場合があり、その結果ホームページを閲覧する際のスピードが上がり、SEO的にも有利になったりもします。</p>
<h2>もっと使用頻度が高いJPEG</h2>
<p>まずJPEG(ジェイペグ)についてご説明したいと思います。<br />
この画像の形式はホームページやブログなどで、もっとも多く使用されている形式だと思います。<br />
なぜもっとも使用されるかと言いますと、まず使用する色数（約1670万色）が多く、写真などに向いているからです。</p>
<h3>JPEGのメリット</h3>
<p>写真やグラデーションなどの、色を多く使用する画像の場合、綺麗に保存出来る。</p>
<h3>JPEGのデメリット</h3>
<p>JPEGは非可逆圧縮で画像ファイルで生成されるため、一度JPEGで画像を生成したら、初めは人間の目では分かりませんが、画像が劣化した状態になります。<br />
ですのでJPEGファイルを開き、加工してまたJPEGで生成したら元のJPEGの画像は劣化してしまいます。<br />
これを繰り返せばどんどん画像が劣化するという欠点もあります。<br />
背景の透過はJPEGでは出来ません。</p>
<p><a href="https://ja.wikipedia.org/wiki/非可逆圧縮" target="_blank">非可逆圧縮についてはこちらをご覧ください。</a>（wikipedia）</p>
<h2>使い勝手がいいGIF</h2>
<p>次にご説明するのがGIF(ジフ)という形式の画像ファイルになります。<br />
この形式は8ビットカラーで生成され、使用できる色数は256色とJPGの約1670万色に比べると、使える色が少ないですが、背景を透明に出来たり、アニメーションが作成出来たりとメリットもたくさんあります。</p>
<h3>GIFのメリット</h3>
<p>可逆圧縮を使用しているため、画像が劣化しません。</p>
<p><a href="https://ja.wikipedia.org/wiki/%E5%8F%AF%E9%80%86%E5%9C%A7%E7%B8%AE" target="_blank">可逆圧縮についてはこちらをご覧ください。</a>（wikipedia）</p>
<p>線をしっかりと表現できるため、単色のイラストやバナー幾何学模様などを使用するのに最適です。</p>
<p>８ビットカラー（256色）で生成するのでファイルサイズが軽くなります。<br />
アニメーション画像を生成できます。</p>
<h3>GIFのデメリット</h3>
<p>写真などをGIFで生成するさい256色で表現するので、写真やフルカラーのCG、グラデーション画像には不向きになります。</p>
<h2>いいとこ取りのPNG</h2>
<p>最後は一番新しい規格でもあるPNG(ピング、ピン)のご紹介です。<br />
この形式はGIFと同じ圧縮形式の<a href="https://ja.wikipedia.org/wiki/%E5%8F%AF%E9%80%86%E5%9C%A7%E7%B8%AE" target="_blank">可逆圧縮</a>にて圧縮されるため、ファイルの劣化がありません。<br />
しかしデメリットもありますので、しっかりと把握して適切に使用しましょう。</p>
<h3>PNGのメリット</h3>
<p>PNGには大まかに２種類あります。<br />
PNG8とPNG24があり、ざっくり分かりやすく説明すると、PNG8がGIFと同じ８ビットカラーで生成され、バナーや単色イラストなどにおすすめで、PNG24はJPEGと同じで２４ビットカラー（1670万色）で生成されるため、GIFが苦手な写真などが劣化なしの綺麗な状態で生成されます。</p>
<p>JPEGでは不可能な背景を透過することも可能です。</p>
<h3>PNGのデメリット</h3>
<p>古いブラウザ（Internet Explorer4では表示不可、Internet Explorer6では透過表示不可）では、表示されない場合がある。（現状ではあまり考慮しなくていいかと思います。）<br />
可逆圧縮で生成されるため、ファイルサイズが大きくなる場合がある。(PNG24)</p>
<h2>それぞれの画像を比較</h2>
<table>
<tr>
<td>画像の形式</td>
<td>JPEG</td>
<td>GIF</td>
<td>PNG8</td>
<td>PNG24</td>
</tr>
<tr>
<td>写真</td>
<td><img fetchpriority="high" decoding="async" src="https://8creators.com/wp-content/uploads/2016/04/hanaJ.jpg" alt="hanaJ" width="300" height="201" class="aligncenter size-full wp-image-2660" /><br />
61KB</td>
<td><img decoding="async" src="https://8creators.com/wp-content/uploads/2016/04/hanaG.gif" alt="hanaG" width="300" height="201" class="aligncenter size-full wp-image-2661" /><br />
34KB</td>
<td><img decoding="async" src="https://8creators.com/wp-content/uploads/2016/04/hanaP8.png" alt="hanaP8" width="300" height="201" class="aligncenter size-full wp-image-2662" /><br />
40KB</td>
<td><img loading="lazy" decoding="async" src="https://8creators.com/wp-content/uploads/2016/04/hanaP24.png" alt="hanaP24" width="300" height="201" class="aligncenter size-full wp-image-2663" /><br />
108KB</td>
</tr>
<tr>
<td>単色イラスト</td>
<td><img loading="lazy" decoding="async" src="https://8creators.com/wp-content/uploads/2016/04/8J.jpg" alt="8J" width="300" height="300" class="aligncenter size-full wp-image-2665" /><br />
<img loading="lazy" decoding="async" src="https://8creators.com/wp-content/uploads/2016/04/8JK.jpg" alt="8JK" width="300" height="300" class="aligncenter size-full wp-image-2670" /><br />
21KB
</td>
<td><img loading="lazy" decoding="async" src="https://8creators.com/wp-content/uploads/2016/04/8G.gif" alt="8G" width="300" height="300" class="aligncenter size-full wp-image-2666" /><br />
<img loading="lazy" decoding="async" src="https://8creators.com/wp-content/uploads/2016/04/8GK.gif" alt="8GK" width="300" height="300" class="aligncenter size-full wp-image-2671" /><br />
2KB</td>
<td><img loading="lazy" decoding="async" src="https://8creators.com/wp-content/uploads/2016/04/8P8.png" alt="8P8" width="300" height="300" class="aligncenter size-full wp-image-2667" /><br />
<img loading="lazy" decoding="async" src="https://8creators.com/wp-content/uploads/2016/04/8P8K.png" alt="8P8K" width="300" height="300" class="aligncenter size-full wp-image-2672" /><br />
2KB</td>
<td><img loading="lazy" decoding="async" src="https://8creators.com/wp-content/uploads/2016/04/8P24.png" alt="8P24" width="300" height="300" class="aligncenter size-full wp-image-2668" /><br />
<img loading="lazy" decoding="async" src="https://8creators.com/wp-content/uploads/2016/04/8P24K.png" alt="8P24K" width="300" height="300" class="aligncenter size-full wp-image-2673" /><br />
5KB</td>
</tr>
</table>
<h2>結局どれがいいの？（まとめ）</h2>
<p>やはりそれぞれの形式でメリット、デメリットがありますので用途に合わせて使い分けるのをおすすめします。</p>
<p>簡単な早見表を制作しましたので参考にしてください。</p>
<table>
<tr>
<td>画像の形式</td>
<td>JPEG</td>
<td>GIF</td>
<td>PNG</td>
</tr>
<tr>
<td>画質の劣化</td>
<td>画質の劣化あり</td>
<td>画質の劣化なし</td>
<td>画質の劣化なし</td>
</tr>
<tr>
<td>最大表現色数</td>
<td>約1670万色</td>
<td>256色</td>
<td>約1670万色</td>
</tr>
<tr>
<td>透過表示</td>
<td>不可</td>
<td>可能</td>
<td>一般的には不可</td>
</tr>
<tr>
<td>写真</td>
<td>◎</td>
<td>×</td>
<td>△</td>
</tr>
<tr>
<td>フルカラーCG</td>
<td>◎</td>
<td>×</td>
<td>◯</td>
</tr>
<tr>
<td>単色イラスト</td>
<td>△</td>
<td>◎</td>
<td>◎</td>
</tr>
<tr>
<td>バナー</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
</tr>
<tr>
<td>ボタン</td>
<td>△</td>
<td>◎</td>
<td>◎</td>
</tr>
<tr>
<td>アイコン</td>
<td>◯</td>
<td>◎</td>
<td>◎</td>
</tr>
<tr>
<td>幾何学模様</td>
<td>△</td>
<td>◎</td>
<td>◯</td>
</tr>
<tr>
<td>アニメーション</td>
<td>×</td>
<td>◎</td>
<td>△</td>
</tr>
</table><p>The post <a href="https://8creators.com/oyakudachijyouho/jpgpnggif/">画像形式のJPG、GIF、PNGの違いって何？基本編</a> first appeared on <a href="https://8creators.com">岐阜で結果重視のホームページ制作ならエイトクリエイターズ｜名古屋や三重も対応可</a>.</p>]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
