<?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>Utility  |  ミドル世代の学習ノート DomComNote</title>
	<atom:link href="https://domcomnote.com/tag/utility/feed/" rel="self" type="application/rss+xml" />
	<link>https://domcomnote.com</link>
	<description>人生100年時代を生きる！自己学習のサイト</description>
	<lastBuildDate>Sun, 21 Feb 2021 07:03:20 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.9.3</generator>

<image>
	<url>https://domcomnote.com/wp-content/uploads/2020/12/cropped-circle-logo-1-1-32x32.png</url>
	<title>Utility  |  ミドル世代の学習ノート DomComNote</title>
	<link>https://domcomnote.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>無料WEBアプリ「Squoosh」画像圧縮・リサイズ、WebP変換も簡単にできるおすすめツール</title>
		<link>https://domcomnote.com/utility/squoosh/</link>
		
		<dc:creator><![CDATA[DOMCOM]]></dc:creator>
		<pubDate>Sun, 21 Feb 2021 01:07:49 +0000</pubDate>
				<category><![CDATA[Utility]]></category>
		<guid isPermaLink="false">https://domcomnote.com/?p=2841</guid>

					<description><![CDATA[便利すぎる画像圧縮ウェブアプリ「Squoosh」を紹介します。Webpへの出力もできて便利です。]]></description>
										<content:encoded><![CDATA[
<p>Core Web Vitals対策にも活躍する便利な画像圧縮WEBアプリ</p>



<p></p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-19 sbs-line sbp-l sbis-sn cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://domcomnote.com/wp-content/uploads/2020/08/img_cat01-e1598662035309.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p>PCやスマホのウェブブラウザだけで画像圧縮・リサイズを可能としたGoogle Chrome Labs発のWEBアプリです。無料で使えます。</p>
</div></div>



<h2><span id="toc1">Squooshとは</span></h2>



<p>「Squoosh」は、PCやスマホで様々なブラウザで動作するPWA（Progressive Web App）であり、ネイティブアプリと同じ感覚で利用できるのが特徴です。つまり、アプリをインストールしなくてもウェブブラウザ上で、ネイティブアプリと同じ事ができるということ。</p>



<p>そして、高圧縮のJPEG／PNGファイルを出力するだけでなく、次世代画像フォーマットのWebPファイルにも変換可能というスグレモノです。さらには、無料で利用することができます。</p>



<p class="is-style-blank-box-orange">動作確認できたブラウザ<br>Chrome（推奨）、Safari、Edge、Firefox</p>



<p>GoogleはUX向上のために2021年5月からCore Web Vitalsを導入すると表明しています。<a target="_self" href="https://domcomnote.com/seo/web-vitals/" data-type="post" data-id="409">Core Web Vitals</a>では、ウェブページの表示スピード向上も望まれており、その対応の一つとして画像ファイルサイズの縮小が必要になる場合がありますので、そのような場合には大活躍することでしょう。</p>



<p>＊記事は2021年2月時点のものです。</p>



<h2><span id="toc2">Squooshの使い方</span></h2>



<p>使い方はいたってシンプルで、画像をアップロードするかドラッグ＆ドロップするだけです。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="555" src="https://domcomnote.com/wp-content/uploads/2021/02/squoosh_top-1024x555.jpg" alt="" class="wp-image-2845" srcset="https://domcomnote.com/wp-content/uploads/2021/02/squoosh_top-1024x555.jpg 1024w, https://domcomnote.com/wp-content/uploads/2021/02/squoosh_top-300x163.jpg 300w, https://domcomnote.com/wp-content/uploads/2021/02/squoosh_top-768x416.jpg 768w, https://domcomnote.com/wp-content/uploads/2021/02/squoosh_top.jpg 1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>圧縮したい画像をアップロードすると次の画面が表示されます。JPEG画像の圧縮で特にこだわりがなければ、右下のダウンロードボタンを押すだけで完了します。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="553" src="https://domcomnote.com/wp-content/uploads/2021/02/squoosh_quality75.jpg" alt="" class="wp-image-2847" srcset="https://domcomnote.com/wp-content/uploads/2021/02/squoosh_quality75.jpg 1024w, https://domcomnote.com/wp-content/uploads/2021/02/squoosh_quality75-300x162.jpg 300w, https://domcomnote.com/wp-content/uploads/2021/02/squoosh_quality75-768x415.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>変換できる画像フォーマットは次のものがありますが、ウェブサイトで使う画像の場合は、汎用性の高いJPEG形式、PNG形式で出力されるMozJPEG（デフォルトの設定）もしくはOxiPNG、または対応するブラウザが増えたWebPを利用すると良いでしょう。</p>



<p>対応するファイル形式</p>



<ul><li>Original</li><li>AVIF</li><li>Browser PNG</li><li>Browser JPEG</li><li>Browser GIF</li><li><span class="marker-under">OxiPNG</span></li><li><span class="marker-under">MozJPEG</span></li><li><span class="marker-under">WebP</span></li><li>WebPv2</li></ul>



<p>そして、画面右下に表示される「Quality（JPEGの場合）」で画像の品質を調整するとファイルサイズを更に縮小することができます。</p>



<div class="wp-block-columns">
<div class="wp-block-column">
<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="553" src="https://domcomnote.com/wp-content/uploads/2021/02/squoosh_quality75-1.jpg" alt="" class="wp-image-2850" srcset="https://domcomnote.com/wp-content/uploads/2021/02/squoosh_quality75-1.jpg 1024w, https://domcomnote.com/wp-content/uploads/2021/02/squoosh_quality75-1-300x162.jpg 300w, https://domcomnote.com/wp-content/uploads/2021/02/squoosh_quality75-1-768x415.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>Quality75</figcaption></figure>
</div>



<div class="wp-block-column">
<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="554" src="https://domcomnote.com/wp-content/uploads/2021/02/squoosh_quality50.jpg" alt="" class="wp-image-2851" srcset="https://domcomnote.com/wp-content/uploads/2021/02/squoosh_quality50.jpg 1024w, https://domcomnote.com/wp-content/uploads/2021/02/squoosh_quality50-300x162.jpg 300w, https://domcomnote.com/wp-content/uploads/2021/02/squoosh_quality50-768x416.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>Quality50</figcaption></figure>
</div>



<div class="wp-block-column">
<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="555" src="https://domcomnote.com/wp-content/uploads/2021/02/squoosh_quality25-1.jpg" alt="" class="wp-image-2854" srcset="https://domcomnote.com/wp-content/uploads/2021/02/squoosh_quality25-1.jpg 1024w, https://domcomnote.com/wp-content/uploads/2021/02/squoosh_quality25-1-300x163.jpg 300w, https://domcomnote.com/wp-content/uploads/2021/02/squoosh_quality25-1-768x416.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>Quality25</figcaption></figure>
</div>
</div>



<h2><span id="toc3">画像圧縮率の検証</span></h2>



<p>Quality75 （元画像サイズ 1.23M→648KB　圧縮率：48%）</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="683" src="https://domcomnote.com/wp-content/uploads/2021/02/img_Quality75.jpg" alt="" class="wp-image-2855" srcset="https://domcomnote.com/wp-content/uploads/2021/02/img_Quality75.jpg 1024w, https://domcomnote.com/wp-content/uploads/2021/02/img_Quality75-300x200.jpg 300w, https://domcomnote.com/wp-content/uploads/2021/02/img_Quality75-768x512.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>Quality75</figcaption></figure>



<p>Quality50 （元画像サイズ 1.23M→387KB　圧縮率：69%）</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="683" src="https://domcomnote.com/wp-content/uploads/2021/02/img_Quality50.jpg" alt="" class="wp-image-2856" srcset="https://domcomnote.com/wp-content/uploads/2021/02/img_Quality50.jpg 1024w, https://domcomnote.com/wp-content/uploads/2021/02/img_Quality50-300x200.jpg 300w, https://domcomnote.com/wp-content/uploads/2021/02/img_Quality50-768x512.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>Quality50</figcaption></figure>



<p>Quality25 （元画像サイズ 1.23M→239KB　圧縮率：81%)</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="683" src="https://domcomnote.com/wp-content/uploads/2021/02/img_Quality25.jpg" alt="" class="wp-image-2857" srcset="https://domcomnote.com/wp-content/uploads/2021/02/img_Quality25.jpg 1024w, https://domcomnote.com/wp-content/uploads/2021/02/img_Quality25-300x200.jpg 300w, https://domcomnote.com/wp-content/uploads/2021/02/img_Quality25-768x512.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>Quality25</figcaption></figure>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-22 sbs-line sbp-l sbis-sn cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://domcomnote.com/wp-content/uploads/2020/08/img_cat03-e1598662019336.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p>大きな画質の劣化は見られませんでしたのでブログで利用するような画像であれば、SEO対策的にもファイルサイズの小さい画像を利用するのが良いかもしれませんね。個人的に大変お世話になっているツールです。</p>
</div></div>




<a rel="noopener" target="_blank" href="https://squoosh.app" title="Squoosh" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://domcomnote.com/wp-content/uploads/cocoon-resources/blog-card-cache/54db57031b755b8626b8c43c925b65f0.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Squoosh</div><div class="blogcard-snippet external-blogcard-snippet">Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=https://squoosh.app" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">squoosh.app</div></div></div></div></a>

]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
