<?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>画像圧縮 &#8211; スグブログ</title>
	<atom:link href="https://sugublog.org/tag/%E7%94%BB%E5%83%8F%E5%9C%A7%E7%B8%AE/feed/" rel="self" type="application/rss+xml" />
	<link>https://sugublog.org</link>
	<description>ブログ運営について発信中</description>
	<lastBuildDate>Sun, 19 Dec 2021 08:24:35 +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://sugublog.org/wp-content/uploads/2021/07/icon_20210703-min-150x150.png</url>
	<title>画像圧縮 &#8211; スグブログ</title>
	<link>https://sugublog.org</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>ブログの画像圧縮をフリーで行う！オンラインで簡単！pngも軽量化</title>
		<link>https://sugublog.org/gazou-comp-free-png/</link>
					<comments>https://sugublog.org/gazou-comp-free-png/?noamp=mobile#comments</comments>
		
		<dc:creator><![CDATA[suguru]]></dc:creator>
		<pubDate>Tue, 09 Mar 2021 14:26:45 +0000</pubDate>
				<category><![CDATA[LIFE]]></category>
		<category><![CDATA[ブログ]]></category>
		<category><![CDATA[ブログ運営]]></category>
		<category><![CDATA[画像圧縮]]></category>
		<guid isPermaLink="false">https://sugublog.org/?p=1734</guid>

					<description><![CDATA[<p><img src="https://sugublog.org/wp-content/uploads/2021/06/PC225-min-scaled.jpg" class="webfeedsFeaturedVisual" /></p>ブログでみんなに見てもらう為の要素は沢山あります。 よく検索されるキーワードが入っている 目を引くタイトルである。 マメに更新されている などなど他にも沢山あります。頑張って皆に見られるブログにしなきゃ。と思って記事を一 [&#8230;]]]></description>
										<content:encoded><![CDATA[<p><img src="https://sugublog.org/wp-content/uploads/2021/06/PC225-min-scaled.jpg" class="webfeedsFeaturedVisual" /></p>
<p>ブログでみんなに見てもらう為の要素は沢山あります。</p>



<ul class="is-style-check_list wp-block-list"><li>よく検索されるキーワードが入っている</li><li>目を引くタイトルである。</li><li>マメに更新されている</li></ul>



<p>などなど他にも沢山あります。頑張って皆に見られるブログにしなきゃ。と思って記事を一生懸命書いている人がほとんどだと思います。</p>



<p>しかしサイトの表示スピードが遅かったら読む前にブログを閉じてしまうのです。せっかくいい記事を書いてクリックされているのに、表示速度が遅いと読まれもしないのです。</p>



<p class="is-style-big_icon_hatena">ではサイト表示スピードを上げるにはどうすればいいのでしょうか？</p>



<p>サイト表示が遅くなる要因は沢山あります。レンタルサーバーの質や回線速度などもありますが、それらは結構どうしようもない要素です。</p>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="red"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://sugublog.org/wp-content/uploads/2021/02/cropped-dog003-150x150.png" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://sugublog.org/wp-content/uploads/2021/02/cropped-dog003-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ワンコ</span></div><div class="c-balloon__body -thinking -border-on"><div class="c-balloon__text">
<p>そんな。ではレンタルサーバーを変えるか、回線を良いサービスのものに変えなくちゃいけないの？他に何かできる事はないの？</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>しかし誰でも簡単にできるサイト表示スピードアップの方法があります。それは<strong>画像圧縮</strong>です。</p>



<p>見やすかったり綺麗だったりする記事を書くには文字だけでは読者は離れていきます。</p>



<p>ブログを開いて文字の塊が「ドーン」とあったら読む気も失せますよね。なので画像を入れたりする人がほとんど。</p>



<p class="is-style-big_icon_caution">しかしその画像の読み込みに時間がかかり、サイト表示速度を遅くしているのです。</p>



<p>つまり<strong>画像を圧縮してアップすればサイト表示速度が速くなり、みんなにブログを読んでもらえる確率が上がる</strong>のです。</p>



<p class="is-style-big_icon_check"><strong>pngなどは特に画像サイズが大きいので是非圧縮してサイト表示速度を上げたい</strong>ですね。</p>



<h2 class="wp-block-heading">ブログの画像圧縮をフリーで行う【pngも軽々】</h2>



<h3 class="wp-block-heading">サイズを変更しサイズを減らす方法</h3>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="1024" height="577" src="https://sugublog.org/wp-content/uploads/2021/06/PC165-min-1024x577.jpg" alt="" class="wp-image-3164"/></figure></div>



<p>では作成したpng画像を無料で圧縮して見ましょう。</p>



<div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" width="708" height="253" src="https://sugublog.org/wp-content/uploads/2021/03/image-2.png" alt="" class="wp-image-1735" srcset="https://sugublog.org/wp-content/uploads/2021/03/image-2.png 708w, https://sugublog.org/wp-content/uploads/2021/03/image-2-300x107.png 300w" sizes="(max-width: 708px) 100vw, 708px" /></figure></div>



<p>まずは作成した画像を見てみます。画像は綺麗に見せる為に大き目のサイズで作成する事が多いです。なのでまずはブログ用のサイズに変更していきます。</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="357" height="140" src="https://sugublog.org/wp-content/uploads/2021/03/image-3.png" alt="" class="wp-image-1736" srcset="https://sugublog.org/wp-content/uploads/2021/03/image-3.png 357w, https://sugublog.org/wp-content/uploads/2021/03/image-3-300x118.png 300w" sizes="(max-width: 357px) 100vw, 357px" /></figure></div>



<p>「Windows」の左下の窓に「ペイント」と入力し「Enter」を押します。そして画像圧縮したいファイルをドラックアンドドロップで開いてみます。</p>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="465" src="https://sugublog.org/wp-content/uploads/2021/03/image-5-1024x465.png" alt="" class="wp-image-1740" srcset="https://sugublog.org/wp-content/uploads/2021/03/image-5-1024x465.png 1024w, https://sugublog.org/wp-content/uploads/2021/03/image-5-300x136.png 300w, https://sugublog.org/wp-content/uploads/2021/03/image-5-768x349.png 768w, https://sugublog.org/wp-content/uploads/2021/03/image-5.png 1156w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>大きな画像ではみ出しています。これを左上の「サイズ変更」でブログ用に画像圧縮します。</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="268" height="395" src="https://sugublog.org/wp-content/uploads/2021/03/image-6.png" alt="" class="wp-image-1741" srcset="https://sugublog.org/wp-content/uploads/2021/03/image-6.png 268w, https://sugublog.org/wp-content/uploads/2021/03/image-6-204x300.png 204w" sizes="(max-width: 268px) 100vw, 268px" /></figure></div>



<p>「ピクセル」を選択します。現在は「2240×1260ピクセル」と大きめです。</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="261" height="393" src="https://sugublog.org/wp-content/uploads/2021/03/image-7.png" alt="" class="wp-image-1742" srcset="https://sugublog.org/wp-content/uploads/2021/03/image-7.png 261w, https://sugublog.org/wp-content/uploads/2021/03/image-7-199x300.png 199w" sizes="(max-width: 261px) 100vw, 261px" /></figure></div>



<p>PCで見るには横幅「800」で十分でしょう。水平方向に「800」を入力します。すると同じ比率で垂直方向の数字も変化してくれます。ここでは「450」になりました。「OK」をクリックします。</p>



<div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" width="865" height="611" src="https://sugublog.org/wp-content/uploads/2021/03/image-8.png" alt="" class="wp-image-1743" srcset="https://sugublog.org/wp-content/uploads/2021/03/image-8.png 865w, https://sugublog.org/wp-content/uploads/2021/03/image-8-300x212.png 300w, https://sugublog.org/wp-content/uploads/2021/03/image-8-768x542.png 768w" sizes="(max-width: 865px) 100vw, 865px" /></figure></div>



<p>丁度いい大きさになりました。「Ctrl + S」で保存します。</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="774" height="205" src="https://sugublog.org/wp-content/uploads/2021/03/image-9.png" alt="" class="wp-image-1744" srcset="https://sugublog.org/wp-content/uploads/2021/03/image-9.png 774w, https://sugublog.org/wp-content/uploads/2021/03/image-9-300x79.png 300w, https://sugublog.org/wp-content/uploads/2021/03/image-9-768x203.png 768w" sizes="(max-width: 774px) 100vw, 774px" /></figure></div>



<h3 class="wp-block-heading">サイズ変更での圧縮結果</h3>



<p>2781KBあった画像サイズが595KBまで画像圧縮できました。画像の大きさを変えるだけでかなりの成果があります。</p>



<p class="is-style-big_icon_check">大きすぎる画像を使用している方は是非、サイズを小さくして画像圧縮して下さい。</p>



<h2 class="wp-block-heading">ブログの画像圧縮をフリーのオンラインで</h2>



<h3 class="wp-block-heading">オンラインで画像を圧縮する方法</h3>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="1024" height="724" src="https://sugublog.org/wp-content/uploads/2021/06/pixta_63554144_M-min-1024x724.jpg" alt="" class="wp-image-2880"/></figure></div>



<p>画像圧縮はサイズを小さくすればもちろん小さくなります。ですが画像圧縮の方法は他にもあります。</p>



<p>画像は小さいピクセルのかたまりで出来ています。例えば左上から白のピクセルが20個並んでいたとしたら、20の情報が必要。これを「白のピクセル」「×」「20」としたら３つの情報で表現可能。</p>



<p>こういった圧縮も出来るんです。何か難しそうと思ったかもしれませんが、安心してください。そこはフリーソフトに任せましょう。しかもオンラインで可能になります。</p>



<p><a href="https://imagecompressor.com/ja/" data-type="URL" data-id="https://imagecompressor.com/ja/" target="_blank" rel="noreferrer noopener">画像圧縮サイトその１「optimizilla」</a></p>



<p>画像圧縮サイトその１「optimizilla」をクリックするとサイトに飛べます。</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="988" height="792" src="https://sugublog.org/wp-content/uploads/2021/03/image-10.png" alt="" class="wp-image-1747" srcset="https://sugublog.org/wp-content/uploads/2021/03/image-10.png 988w, https://sugublog.org/wp-content/uploads/2021/03/image-10-300x240.png 300w, https://sugublog.org/wp-content/uploads/2021/03/image-10-768x616.png 768w" sizes="(max-width: 988px) 100vw, 988px" /></figure></div>



<p>赤枠に画像圧縮したい画像をドラック＆ドロップします。先程のファイルで行ってみます。</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="980" height="914" src="https://sugublog.org/wp-content/uploads/2021/03/image-11.png" alt="" class="wp-image-1748" srcset="https://sugublog.org/wp-content/uploads/2021/03/image-11.png 980w, https://sugublog.org/wp-content/uploads/2021/03/image-11-300x280.png 300w, https://sugublog.org/wp-content/uploads/2021/03/image-11-768x716.png 768w" sizes="(max-width: 980px) 100vw, 980px" /></figure></div>



<p>一瞬で画像圧縮できました。左の画像が元の画僧で右の画像が圧縮後の画像です。そんなり劣化は見られません。右のバーで調整できますが、ここはそのまま「すべてダウンロード」をクリックします。</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="736" height="160" src="https://sugublog.org/wp-content/uploads/2021/03/image-12.png" alt="" class="wp-image-1749" srcset="https://sugublog.org/wp-content/uploads/2021/03/image-12.png 736w, https://sugublog.org/wp-content/uploads/2021/03/image-12-300x65.png 300w" sizes="(max-width: 736px) 100vw, 736px" /></figure></div>



<h3 class="wp-block-heading">フリーのオンラインサイトで画像圧縮した結果</h3>



<p>595KBから174KBに画像圧縮できました。</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="613" height="488" src="https://sugublog.org/wp-content/uploads/2021/03/image-13.png" alt="" class="wp-image-1750" srcset="https://sugublog.org/wp-content/uploads/2021/03/image-13.png 613w, https://sugublog.org/wp-content/uploads/2021/03/image-13-300x239.png 300w" sizes="(max-width: 613px) 100vw, 613px" /></figure></div>



<p>ひとつフォルダを上がって圧縮されたフォルダを「右クリック」して「すべて展開」をクリックします。</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="615" height="456" src="https://sugublog.org/wp-content/uploads/2021/03/image-14.png" alt="" class="wp-image-1751" srcset="https://sugublog.org/wp-content/uploads/2021/03/image-14.png 615w, https://sugublog.org/wp-content/uploads/2021/03/image-14-300x222.png 300w" sizes="(max-width: 615px) 100vw, 615px" /></figure></div>



<p>同じフォルダあたりに展開してください。パスはそのままで「展開」をクリックしました。</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="641" height="183" src="https://sugublog.org/wp-content/uploads/2021/03/image-15.png" alt="" class="wp-image-1752" srcset="https://sugublog.org/wp-content/uploads/2021/03/image-15.png 641w, https://sugublog.org/wp-content/uploads/2021/03/image-15-300x86.png 300w" sizes="(max-width: 641px) 100vw, 641px" /></figure></div>



<p>これで終わりです。と言いたいところですがもう極限まで画像圧縮しちゃいましょう。</p>



<h2 class="wp-block-heading">ブログの画像圧縮フリー2段階でpngを極限圧縮</h2>



<h3 class="wp-block-heading">もう一つのオンラインサイトで更に画像圧縮</h3>



<p>折角やるのであれば更に圧縮しちゃいます。あっここから有料なんだね。と思ったかもしれません。安心してください。無料でできます。</p>



<p><a href="https://tinypng.com/" data-type="URL" data-id="https://tinypng.com/" target="_blank" rel="noreferrer noopener">画像圧縮サイトその2「tiny png」</a></p>



<p>画像圧縮サイトその2「tiny png」からサイトに飛べます。</p>



<div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" width="1388" height="942" src="https://sugublog.org/wp-content/uploads/2021/03/image-16.png" alt="" class="wp-image-1754" srcset="https://sugublog.org/wp-content/uploads/2021/03/image-16.png 1388w, https://sugublog.org/wp-content/uploads/2021/03/image-16-300x204.png 300w, https://sugublog.org/wp-content/uploads/2021/03/image-16-1024x695.png 1024w, https://sugublog.org/wp-content/uploads/2021/03/image-16-768x521.png 768w" sizes="(max-width: 1388px) 100vw, 1388px" /></figure></div>



<p>サイトに飛んだら画像圧縮サイトその1と同じようにただドラック＆ドロップするだけ。簡単ですね。上の赤枠に画像圧縮したい画像をドラック＆ドロップします。</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="998" height="837" src="https://sugublog.org/wp-content/uploads/2021/03/image-17.png" alt="" class="wp-image-1755" srcset="https://sugublog.org/wp-content/uploads/2021/03/image-17.png 998w, https://sugublog.org/wp-content/uploads/2021/03/image-17-300x252.png 300w, https://sugublog.org/wp-content/uploads/2021/03/image-17-768x644.png 768w" sizes="(max-width: 998px) 100vw, 998px" /></figure></div>



<p>一瞬で画像圧縮成功しました。「Download all」をクリックしてダウンロードします。</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="555" height="159" src="https://sugublog.org/wp-content/uploads/2021/03/image-18.png" alt="" class="wp-image-1756" srcset="https://sugublog.org/wp-content/uploads/2021/03/image-18.png 555w, https://sugublog.org/wp-content/uploads/2021/03/image-18-300x86.png 300w" sizes="(max-width: 555px) 100vw, 555px" /></figure></div>



<h3 class="wp-block-heading">2段階での画像圧縮結果</h3>



<p>174KBから116KBまで圧縮する事が出来ました。</p>



<p>一つの画像で100KB前後であればサイト表示も速くなることでしょう。</p>



<h2 class="wp-block-heading">ブログの画像圧縮のまとめ</h2>



<p>174KBから116KBまで画像圧縮に成功しています。最初は2781KBだったものが最終的には116KBまで下げる事ができました。1枚でマイナス2665KB、4枚使用していたら10Mも違っていましたね。</p>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="blue"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://sugublog.org/wp-content/uploads/2021/02/cropped-dog003-150x150.png" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://sugublog.org/wp-content/uploads/2021/02/cropped-dog003-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ワンコ</span></div><div class="c-balloon__body -thinking -border-on"><div class="c-balloon__text">
<p>なるほどね。いつも大きな画像をそのまま使用していたけど、これをすることで画像圧縮して軽いサイトに出来るんですね！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>如何だったでしょうか。沢山画像使用している記事であればかなり効果があると思います。サイト表示を気にするのであれば、是非試してみてください。</p>



<p>もっとブログのサイト表示早くしようと思ったら、効果が見込めるのは「レンタルサーバー」と「WordPressテーマ」！</p>



<p class="is-style-balloon_box">レンタルサーバーを良いものにするには「おすすめレンタルサーバー比較記事」から選んで見て下さい。</p>


<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://sugublog.org/wp-content/uploads/2021/06/server111-1-min-e1623600594527-300x212.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://sugublog.org/rental-server-comp-ma/">【2024年】おすすめレンタルサーバー6社!【比較表あり】</a>
						<span class="p-blogCard__excerpt">個人でレンタルサーバ借りてブログ運営したい。Wordpress使用してブログ作成してみたいけどレンタルサーバって色々種類あってどれにしたらいいかわからないよ？ 私も同&#8230;</span>					</div>
				</div>
			</div>
		</div>


<p>レンタルサーバーが決まったら、今度はWordpressのテーマで表示速度アップ。おすすめWordpressテーマは「SWELL」。</p>



<p class="is-style-balloon_box">SWELL（スウェル）の評判と口コミを大公開しています。</p>


<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://sugublog.org/wp-content/uploads/2021/06/PC213-min-e1624040976958-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://sugublog.org/wordpress-swell/">SWELLの評判・口コミ｜WordPressのテーマ【劇的にブログが変化する】</a>
						<span class="p-blogCard__excerpt">こんにちはスグル（@sugublograming）です。この度、思い切ってWordpressのテーマを「SWELL」にしました！ 無料のテーマや以前のテーマでは、デザインがいまいちで悩ん&#8230;</span>					</div>
				</div>
			</div>
		</div>


<p class="is-style-big_icon_point">折角なのでサイト表示速度をMAXまで上げていきましょう！</p>
]]></content:encoded>
					
					<wfw:commentRss>https://sugublog.org/gazou-comp-free-png/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
	</channel>
</rss>
