<?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/%E5%9C%A7%E7%B8%AE/feed/" rel="self" type="application/rss+xml" />
	<link>https://one-time-life.net</link>
	<description>主にガジェットやライフスタイル、サービスの紹介や実際に購入した物のレビューなど。</description>
	<lastBuildDate>Thu, 25 Mar 2021 13:40:13 +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/service/compression-image/</link>
					<comments>https://one-time-life.net/service/compression-image/#respond</comments>
		
		<dc:creator><![CDATA[haraitai]]></dc:creator>
		<pubDate>Sun, 14 Mar 2021 14:00:09 +0000</pubDate>
				<category><![CDATA[SERVICE]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[圧縮]]></category>
		<guid isPermaLink="false">https://one-time-life.net/?p=2276</guid>

					<description><![CDATA[<p>こんにちは！ハナノです！（@K11936151） いきなりですが、ブログやWebサイトを運営している方に質問です。 今や「デジタルカメラ」や「スマートフォン」などの気軽に写真を撮れる機械であっても非常に”高画質”な写真を</p>
<p>The post <a href="https://one-time-life.net/service/compression-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>いきなりですが、ブログやWebサイトを運営している方に質問です。</p>
<div class="balloon-box balloon-right balloon-gray balloon-bg-gray clearfix">
<div class="balloon-icon maru"><img decoding="async" src="https://one-time-life.net/wp-content/uploads/2021/03/ハナノアイコン.png" alt="ハナノ" width="80" height="80"></div>
<div class="icon-name">ハナノ</div>
<div class="balloon-serif">
<div class="balloon-content"> スマホやカメラなどで撮った写真をそのままアップロードしてないですよね？</div>
</div></div>
<p>今や「デジタルカメラ」や「スマートフォン」などの気軽に写真を撮れる機械であっても<b>非常に”高画質”な写真を手軽に撮ることができます。</b></p>
<p>そのような高画質な画像を何も手を加えることなくブログやwebサイトにアップロードしてしまうとwebサイトの容量が大きくなり<b>読み込み速度が低下</b>するなどのデメリットが生じます。</p>
<p>今回はあまり知られていない<b>「画像圧縮とは？」</b>という初歩的な部分から<b>「画像圧縮の重要性」</b>まで解説していこうと思います。</p>
<p>こちらの記事を読んで正しい画像「圧縮」の知識を学びwebサイト運営に活かしましょう。</p>
<h2>そもそも「画像圧縮」とは？</h2>
<p><b>そもそも「圧縮」とはなんぞや・・？</b></p>
<p>恥ずかしながら筆者も最近までは詳しくは知りませんでした。。。</p>
<p><b>「圧縮」とは簡単にいうと<span class="marker2">”余分な部分を取り除くこと”</span>です！</b></p>
<div class="balloon-box balloon-left balloon-red balloon-bg-red clearfix">
<div class="balloon-icon "><img decoding="async" src="https://one-time-life.net/wp-content/themes/jin/img/woman1.png" alt="" width="80" height="80"></div>
<div class="icon-name"></div>
<div class="balloon-serif">
<div class="balloon-content">画像に余分な部分なんてあるの？</div>
</div></div>
<div class="balloon-box balloon-left balloon-blue balloon-bg-blue clearfix">
<div class="balloon-icon "><img decoding="async" src="https://one-time-life.net/wp-content/themes/jin/img/man1.png" alt="" width="80" height="80"></div>
<div class="icon-name"></div>
<div class="balloon-serif">
<div class="balloon-content">画像の一部を取り除いちゃったらおかしいじゃん！</div>
</div></div>
<p>安心してください。</p>
<p>余分な部分とは<b><span class="marker2">「取り除いても人間が知覚できない部分」</span></b>のことでその部分を取り除いたからといってすぐ見て<b><span class="marker2">「圧縮された画像だな！」などとわかる人はいません。</span></b></p>
<p>ただ、<b>”何重にも圧縮”</b>をかけてしまうと見てわかる場合もあります。</p>
<p><b>↓実際に筆者が利用している無料画像圧縮ツール「Image Optim」についてまとめました。</b></p>
<p><a href="https://one-time-life.net/service/image-optim-mac/" target="_blank" rel="noopener">オススメの無料画像圧縮ツール「Image Optim」の使い方・メリット・デメリット</a></p>
<h3>実はあなたも画像を圧縮したことがある！？</h3>
<img decoding="async" class="alignnone size-full wp-image-2291" src="https://one-time-life.net/wp-content/uploads/2021/03/social-networks-1863613_1280-e1615736958645.png" alt="" width="650" height="366" />
<p>今や、ほとんどの方が<b>SNS</b>（TwitterやInstagram、Facebook）アカウントを持っている時代。</p>
<p>SNSにお気に入りの画像や思い出の画像をアップロードしたことがある方が多いかと思います。</p>
<p><b>実はその画像<span class="marker2">”圧縮されています”</span>。</b></p>
<p>最近のスマートフォンは非常に<b>”高画質”</b>な画像が撮影できるので<b>スマートフォンで撮影した画像は重たいです。</b></p>
<p>そのままのサイズで投稿してしまうと<span class="marker2"><b>SNS側のサーバーに非常に負担がかかります。</b></span></p>
<p>Twitterの国内利用者数は約4500万人いるわけですが1日に利用者の4分の1がスマートフォンで撮影した画像をアップロードすると<span class="marker2"><b>1日で1000万枚以上の高画質な画像がアップロードされることになります。</b></span></p>
<p>日本だけでこの数字ですから世界規模ですと。。。</p>
<p>そりゃ流石にSNS側も<b>「勝手に圧縮させてもらいますね」</b>となりますよね。</p>
<p>ということで<b>ほとんどの方が画像を圧縮した経験があるということです！</b></p>
<h3>以外と知らない2種類の圧縮方法</h3>
<img decoding="async" class="alignnone wp-image-2288 size-full" src="https://one-time-life.net/wp-content/uploads/2021/03/people-2589692_1280.jpg" alt="2種類の圧縮方法" width="1280" height="856" srcset="https://one-time-life.net/wp-content/uploads/2021/03/people-2589692_1280.jpg 1280w, https://one-time-life.net/wp-content/uploads/2021/03/people-2589692_1280-300x201.jpg 300w, https://one-time-life.net/wp-content/uploads/2021/03/people-2589692_1280-1024x685.jpg 1024w, https://one-time-life.net/wp-content/uploads/2021/03/people-2589692_1280-768x514.jpg 768w" sizes="(max-width: 1280px) 100vw, 1280px" />
<p>「圧縮、圧縮」と口を揃えて言いますが実は圧縮には<b>2種類の方法があります。</b></p>
<div class="nomadBox_deco14">
<h4>2種類の圧縮方法</h4>
<p><b>・可逆圧縮</b><br />
その名の通り逆にすることが可能な圧縮方法。<br />
つまり<span class="marker"><b>一度圧縮しても元のデータに完全に戻せる。</b></span></p>
<p><b>・不可逆圧縮</b><br />
こちらもその名の通り逆にすることが不可能な圧縮方法。<br />
つまり<span class="marker"><b>一度圧縮してしまうと完全に元に戻すことは不可能。</b></span></p>
</div>
<p>以上の2種類の圧縮方法があります。</p>
<h3>なぜ2種類の圧縮方法があるの？</h3>
<img decoding="async" class="alignnone size-full wp-image-2287" src="https://one-time-life.net/wp-content/uploads/2021/03/keyboard-338505_1280.jpg" alt="" width="1280" height="847" srcset="https://one-time-life.net/wp-content/uploads/2021/03/keyboard-338505_1280.jpg 1280w, https://one-time-life.net/wp-content/uploads/2021/03/keyboard-338505_1280-300x199.jpg 300w, https://one-time-life.net/wp-content/uploads/2021/03/keyboard-338505_1280-1024x678.jpg 1024w, https://one-time-life.net/wp-content/uploads/2021/03/keyboard-338505_1280-768x508.jpg 768w" sizes="(max-width: 1280px) 100vw, 1280px" />
<p>先程説明した<b>「可逆圧縮」</b>と<b>「不可逆圧縮」</b>。<span class="marker2"><b>なぜ2種類の圧縮方法があるのでしょうか。</b></span></p>
<h4>「可逆圧縮」の特徴</h4>
<p><b>「可逆圧縮」</b>ではよく聞く<b>「ZIP」という圧縮形式</b>があります。</p>
<p>「ZIP」とはファイルの圧縮形式ですが、画像とは違い、そのファイルを転送する際などに<span class="marker2"><b>一時的に軽くし、使用するときに元に戻す（解凍）ことを想定しています。</b></span></p>
<p>「ZIP」ファイルなどの圧縮されたデータは<b>「解凍」</b>することでしっかりと<b>元に戻りデータも欠損することなく使用することができます。</b></p>
<p><b>「可逆圧縮」</b>には主にファイル圧縮形式<b>「ZIP」</b>や画像圧縮形式<b>「PNG」</b>や<b>「GIF」</b>などがあります。</p>
<h4>「不可逆圧縮」の特徴</h4>
<p>一方で<b>「非可逆圧縮」</b>完全に元に戻すことはできないが<span class="marker2"><b>劇的に圧縮率を高めることができます。</b></span></p>
<p>コンピュータの世界では1ビットでも違えばその内容は変わってしまうが、画像や動画の細部の僅かな部分が異なっていても<b>人間の視聴覚では気づくことができない場合が多い。</b></p>
<p>このような特性を活かして<span class="marker2"><b>データ自体を一部省略することによって復元することはできないが劇的に圧縮率を高めることが可能。</b></span></p>
<p><b>「非可逆圧縮」</b>では主に画像圧縮形式<b>「JPEG」</b>などがあります。</p>
<p><b>↓「GIF」アニメーション作成アプリ「GIPHY Capture」の使い方もこの記事でまとめております。</b></p>
<p><a href="https://one-time-life.net/service/giphy-capture-mac-gif/" target="_blank" rel="noopener">「GIPHY Capture」の使い方！Macの画面を簡単にGIF化できる！</a></p>
<h3>「可逆圧縮」と「不可逆圧縮」の違いまとめ</h3>
<img decoding="async" class="alignnone size-full wp-image-2292" src="https://one-time-life.net/wp-content/uploads/2021/03/computer-767781_1280.jpg" alt="" width="1200" height="800" srcset="https://one-time-life.net/wp-content/uploads/2021/03/computer-767781_1280.jpg 1200w, https://one-time-life.net/wp-content/uploads/2021/03/computer-767781_1280-300x200.jpg 300w, https://one-time-life.net/wp-content/uploads/2021/03/computer-767781_1280-1024x683.jpg 1024w, https://one-time-life.net/wp-content/uploads/2021/03/computer-767781_1280-768x512.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px" />
<p>ここまで説明してきましたが理解してもらえましたか？</p>
<p>難しい言葉ばかりでよくわからないという方もいらっしゃると思いますので、<b>簡単にまとめてみました。</b></p>
<div class="nomadBox_deco14">
<h4>画像や動画を「散らかった汚い部屋」に例えると</h4>
<p><b><br />
「可逆圧縮」；使わない物があっても全て<b><span class="marker">クローゼットや棚に綺麗に収納して部屋を綺麗にしよう！</span></b></b></p>
<p>「不可逆圧縮」；使わない物は<span class="marker"><b>捨ててしまい、部屋を綺麗にしよう！！</b></span></p>
</div>
<p>このようなイメージを持ってもらえればOKです！</p>
<p><span class="marker2"><b>両者の特性を抑えて場面に適した形で「圧縮」を行うようにしましょう。</b></span></p>
<h2>画像を「圧縮」する重要性は？</h2>
<div class="balloon-box balloon-left balloon-red balloon-bg-red clearfix">
<div class="balloon-icon "><img decoding="async" src="https://one-time-life.net/wp-content/themes/jin/img/woman1.png" alt="" width="80" height="80"></div>
<div class="icon-name"></div>
<div class="balloon-serif">
<div class="balloon-content">画像が多少重たくても表示する時の数秒の差でしょ？</div>
</div></div>
<p>このように考える方も多いと思いますが、<br />
<b>画像が重たく表示速度が遅いwebサイトは</b><span class="c-red"><b>”致命的”</b></span>です。</p>
<p>例えば；あなたがどこかのwebサイトを訪問した際に<b>なかなか画像が表示されない場合どう思いますか？</b></p>
<p><b>待ちきれずしびれを切らして帰ってしまう。</b><br />
または待ったとしても<b>良い気分ではないですよね。</b></p>
<p>せっかく優れた良いコンテンツで作成されたwebサイトであってもページ表示速度が遅いと<span class="marker2"><b>一向にアクセス数は伸びません。</b></span></p>
<p><b>↓こちらはGoogleが公式で発表しているWebページ表示速度と直帰率に関するデータです</b></p>
<div id="attachment_2277" class="wp-caption alignnone" style="width: 1210px"><a href="https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/"><img decoding="async" class="size-full wp-image-2277" src="https://one-time-life.net/wp-content/uploads/2021/03/mobile-page-speed-new-industry-benchmarks-01-01-download.jpeg" alt="" width="1200" height="675" srcset="https://one-time-life.net/wp-content/uploads/2021/03/mobile-page-speed-new-industry-benchmarks-01-01-download.jpeg 1200w, https://one-time-life.net/wp-content/uploads/2021/03/mobile-page-speed-new-industry-benchmarks-01-01-download-300x169.jpeg 300w, https://one-time-life.net/wp-content/uploads/2021/03/mobile-page-speed-new-industry-benchmarks-01-01-download-1024x576.jpeg 1024w, https://one-time-life.net/wp-content/uploads/2021/03/mobile-page-speed-new-industry-benchmarks-01-01-download-768x432.jpeg 768w, https://one-time-life.net/wp-content/uploads/2021/03/mobile-page-speed-new-industry-benchmarks-01-01-download-320x180.jpeg 320w, https://one-time-life.net/wp-content/uploads/2021/03/mobile-page-speed-new-industry-benchmarks-01-01-download-640x360.jpeg 640w" sizes="(max-width: 1200px) 100vw, 1200px" /></a><span class="wp-caption-text">引用；Google</span></div>
<p><b>日本語に翻訳すると</b></p>
<div class="nomadBox_deco14">
<h4>Webページ表示速度と直帰率に関するデータ翻訳</h4>
<p><b>・webページ表示速度が1秒〜3秒に落ちると直帰率が<span class="marker">32％</span>上昇する。</b></p>
<p><b>・webページ表示速度が1秒〜5秒に落ちると直帰率が<span class="marker">90％</span>上昇する。</b></p>
<p><b>・webページ表示速度が1秒〜6秒に落ちると直帰率が<span class="marker">106％</span>上昇する。</b></p>
<p><b>・webページ表示速度が1秒〜10秒に落ちると直帰率が<span class="marker">123％</span>上昇する。</b></p>
</div>
<p>これだけwebページの表示速度は重要ということがデータとして出ていますのでブログやwebサイトに画像や動画をアップロードする際には<span class="marker2"><b>必ず「圧縮」を行いましょう。</b></span></p>
<h3>Googleが公式にサイト表示速度を評価基準にしている！？</h3>
<img decoding="async" class="alignnone wp-image-2286 size-full" src="https://one-time-life.net/wp-content/uploads/2021/03/google-485611_1280.png" alt="サイト表示速度は重要" width="1280" height="904" srcset="https://one-time-life.net/wp-content/uploads/2021/03/google-485611_1280.png 1280w, https://one-time-life.net/wp-content/uploads/2021/03/google-485611_1280-300x212.png 300w, https://one-time-life.net/wp-content/uploads/2021/03/google-485611_1280-1024x723.png 1024w, https://one-time-life.net/wp-content/uploads/2021/03/google-485611_1280-768x542.png 768w" sizes="(max-width: 1280px) 100vw, 1280px" />
<p><b>SEOの観点においてもwebページ表示速度は<span class="marker2">”重要”</span>です。</b></p>
<p><b>Googleは公式にwebページ表示速度がランキング要員の一つであることを発表しています。</b></p>
<p>2012年の時点ではwebページ表示速度はランキング要因の一部に過ぎず、その影響は<b>関連性や外部リンクに比べると小さいもの</b>とされていましたが、</p>
<p>2018年の<b>”Speed Update”</b>でwebページスピードがモバイル検索の<span class="marker2"><b>ランキング要因として使用されるようになりました。</b></span></p>
<p>以上2つの理由からwebページ表示速度は<span class="marker2"><b>”重要性”の高いものだと言えます。</b></span></p>
<h2>画像を「圧縮」するメリット・デメリット</h2>
<img decoding="async" class="alignnone size-full wp-image-2285" src="https://one-time-life.net/wp-content/uploads/2021/03/digital-marketing-1433427_1280.jpg" alt="" width="1280" height="854" srcset="https://one-time-life.net/wp-content/uploads/2021/03/digital-marketing-1433427_1280.jpg 1280w, https://one-time-life.net/wp-content/uploads/2021/03/digital-marketing-1433427_1280-300x200.jpg 300w, https://one-time-life.net/wp-content/uploads/2021/03/digital-marketing-1433427_1280-1024x683.jpg 1024w, https://one-time-life.net/wp-content/uploads/2021/03/digital-marketing-1433427_1280-768x512.jpg 768w" sizes="(max-width: 1280px) 100vw, 1280px" />
<p>ここまでの解説で画像の<b>「圧縮」とは何か。画像を「圧縮」する重要性とは？</b></p>
<p>といった部分を解説してきました。</p>
<p>画像を「圧縮」することは必ずしも<span class="marker2"><b>メリット</b></span>ばかりではなく<span class="marker2"><b>デメリット</b></span>も発生します。</p>
<p>ここでは<span class="marker2"><b>メリット・デメリットの両方</b></span>の解説をしていきましょう。</p>
<h3>画像を「圧縮」するメリット</h3>
<h4>webページ表示速度が上がる</h4>
<img decoding="async" class="alignnone size-full wp-image-2290" src="https://one-time-life.net/wp-content/uploads/2021/03/seo-1327870_1280.png" alt="" width="1280" height="732" srcset="https://one-time-life.net/wp-content/uploads/2021/03/seo-1327870_1280.png 1280w, https://one-time-life.net/wp-content/uploads/2021/03/seo-1327870_1280-300x172.png 300w, https://one-time-life.net/wp-content/uploads/2021/03/seo-1327870_1280-1024x586.png 1024w, https://one-time-life.net/wp-content/uploads/2021/03/seo-1327870_1280-768x439.png 768w" sizes="(max-width: 1280px) 100vw, 1280px" />
<p>こちらが一番大きな要因となります。<br />
<b>特にwebページ・ブログの場合、表示速度が<span class="marker2">結果に顕著に現れます。</span></b></p>
<p>また<b>SEOの観点から見てもwebページ表示速度は非常に重要</b>であり、検索結果の上位表示を狙うのであれば、画像の「圧縮」は<span class="marker2"><b>”必須”</b></span>と言えるでしょう。</p>
<h4>pcのストレージ圧迫を軽減できる</h4>
<img decoding="async" class="alignnone size-full wp-image-2294" src="https://one-time-life.net/wp-content/uploads/2021/03/cloud-computing-1989339_1280.png" alt="" width="1280" height="791" srcset="https://one-time-life.net/wp-content/uploads/2021/03/cloud-computing-1989339_1280.png 1280w, https://one-time-life.net/wp-content/uploads/2021/03/cloud-computing-1989339_1280-300x185.png 300w, https://one-time-life.net/wp-content/uploads/2021/03/cloud-computing-1989339_1280-1024x633.png 1024w, https://one-time-life.net/wp-content/uploads/2021/03/cloud-computing-1989339_1280-768x475.png 768w" sizes="(max-width: 1280px) 100vw, 1280px" />
<p>先述したように画像を「圧縮」することで<b>データ容量を減らすことが可能</b>です。<br />
画像を「圧縮」しファイルサイズを小さくすることで<b>無駄なストレージ容量を減らさずに済みます。</b></p>
<p>また、ファイルサイズが小さい方が読み込み速度も早く作業の効率化が図れますので容量以外の面でもやはり画像はできるだけ<span class="marker2"><b>「圧縮」しておくのが良いでしょう。</b></span></p>
<h3>画像を「圧縮」するデメリット</h3>
<h4>少なからず画像は劣化する</h4>
<img decoding="async" class="alignnone size-full wp-image-2293" src="https://one-time-life.net/wp-content/uploads/2021/03/red-rust-1181856_1280.jpg" alt="" width="1200" height="848" srcset="https://one-time-life.net/wp-content/uploads/2021/03/red-rust-1181856_1280.jpg 1200w, https://one-time-life.net/wp-content/uploads/2021/03/red-rust-1181856_1280-300x212.jpg 300w, https://one-time-life.net/wp-content/uploads/2021/03/red-rust-1181856_1280-1024x724.jpg 1024w, https://one-time-life.net/wp-content/uploads/2021/03/red-rust-1181856_1280-768x543.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px" />
<p>画像を「圧縮」することによって人間では気づくことができない程の差ですが少なくとも<span class="marker2"><b>”劣化”</b></span>します。</p>
<p>また、画像を<b>「圧縮」するという作業自体</b>が一つの手間になるのでそこもデメリットと言えるでしょう。</p>
<h2>まとめ；画像はできるだけ「圧縮」しましょう。</h2>
<p>いかがでしたか。画像の「圧縮」は意外にも影響が大きく、単にファイルが”重たい”だけでなく、<span class="marker2"><b>webページ表示速度やSEOの観点から見ても「圧縮」することに損はないと言えます。</b></span></p>
<p>こういった<b>小さな作業が大きな結果を左右</b>しますので高画質な画像は<b>「圧縮」することをオススメします。</b></p>
<p><b>↓実際に筆者が利用している無料画像圧縮ツール「Image Optim」についてまとめました。</b></p>
<p><a href="https://one-time-life.net/service/image-optim-mac/" target="_blank" rel="noopener">オススメの無料画像圧縮ツール「Image Optim」の使い方・メリット・デメリット</a></p><p>The post <a href="https://one-time-life.net/service/compression-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/service/compression-image/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
