<?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://ichi-station.com/tag/%E3%83%96%E3%83%AD%E3%82%B0%E9%81%8B%E5%96%B6/feed/" rel="self" type="application/rss+xml" />
	<link>https://ichi-station.com</link>
	<description></description>
	<lastBuildDate>Wed, 04 Aug 2021 09:11:33 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.1.5</generator>

<image>
	<url>https://ichi-station.com/wp-content/uploads/2022/04/cropped-blog-favicon512x512-4-32x32.png</url>
	<title>ブログ運営  |  鉄駆ブログ</title>
	<link>https://ichi-station.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>EWWW Image Optimizerの設定方法と使い方について</title>
		<link>https://ichi-station.com/ewww-image-optimizer/</link>
					<comments>https://ichi-station.com/ewww-image-optimizer/#respond</comments>
		
		<dc:creator><![CDATA[いっちー]]></dc:creator>
		<pubDate>Wed, 04 Aug 2021 09:11:31 +0000</pubDate>
				<category><![CDATA[ブログ運営]]></category>
		<category><![CDATA[プラグイン]]></category>
		<guid isPermaLink="false">https://ichi-station.com/?p=2622</guid>

					<description><![CDATA[サイトの表示速度に大きく関わるのが画像のサイズです。 表示速度が遅いと、ユーザーの離脱率が上がってしまいます。 こんな悩みをお持ちの方にオススメなのが「EWWW Image Optimizer」です。 この記事では、「E [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>サイトの表示速度に大きく関わるのが画像のサイズです。</p>



<p>表示速度が遅いと、ユーザーの離脱率が上がってしまいます。</p>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box has-border-color has-yellow-border-color">
<ul><li>画像のサイズを気にせず今までアップロードしていた</li><li>画像を1つずつ圧縮するのは面倒なので一括でなんとかしたい</li><li>サイトの表示速度を改善したい</li></ul>



<p></p>
</div>



<p>こんな悩みをお持ちの方にオススメなのが「EWWW Image Optimizer」です。</p>



<p>この記事では、「EWWW Image Optimizer」の設定方法や使い方を解説しています。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://ichi-station.com/wp-content/uploads/2021/01/icon_200x200.png" alt="いっちー" class="speech-icon-image"/></figure><div class="speech-name">いっちー</div></div><div class="speech-balloon">
<p>EWWW Image Optimizerは、</p>



<ul><li>今までアップロードした画像</li><li>これからアップロードする画像</li></ul>



<p>どちらの画像も圧縮可能なので、</p>



<p>今まで容量を気にせず画像を上げていた方にも効果的です！</p>
</div></div>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2"><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">EWWW Image Optimizerとは？</a></li><li><a href="#toc2" tabindex="0">EWWW Image Optimizerのインストール方法</a></li><li><a href="#toc3" tabindex="0">EWWW Image Optimizerの設定方法</a></li><li><a href="#toc4" tabindex="0">EWWW Image Optimizerの使い方</a><ol><li><a href="#toc5" tabindex="0">新規アップロード画像の最適化</a></li><li><a href="#toc6" tabindex="0">アップロード済み画像の一括最適化</a></li></ol></li><li><a href="#toc7" tabindex="0">さいごに</a><ol><li><a href="#toc8" tabindex="0">参考リンク</a></li></ol></li></ol>
    </div>
  </div>

<h2><span id="toc1">EWWW Image Optimizerとは？</span></h2>



<p>「EWWW Image Optimizer」は、<strong>アップロードした画像を自動で圧縮してくれるプラグイン</strong>です。</p>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="461" src="https://ichi-station.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-30-8.27.45-1024x461.jpg" alt="ewww-image-optimizerプラグイン" class="wp-image-2623" srcset="https://ichi-station.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-30-8.27.45-1024x461.jpg 1024w, https://ichi-station.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-30-8.27.45-300x135.jpg 300w, https://ichi-station.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-30-8.27.45-768x346.jpg 768w, https://ichi-station.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-30-8.27.45-1536x691.jpg 1536w, https://ichi-station.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-30-8.27.45.jpg 1880w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>インストールすることで、今後アップロードする画像のサイズを圧縮してくれるため、サイトの表示速度改善につながります。</p>



<p>また、EWWW Image Optimizerは<strong><span class="marker-under-red"><span class="fz-24px">既にアップロード済みの画像も一括で圧縮することが可能</span></span></strong>です。</p>



<p>今まで画像の圧縮など気にせず画像をアップロードしていた&#8230;という方にも効果的です。</p>



<h2><span id="toc2">EWWW Image Optimizerのインストール方法</span></h2>



<p>まずはプラグインをインストールします。</p>



<p>WordPressの管理画面から、</p>



<p>左サイトバー「プラグイン → 新規追加」をクリック</p>



<p>します。</p>



<figure class="wp-block-image size-large"><img decoding="async" width="594" height="1024" src="https://ichi-station.com/wp-content/uploads/2021/07/how-to-install-ewww-image-optimizer-1-594x1024.jpg" alt="" class="wp-image-2625" srcset="https://ichi-station.com/wp-content/uploads/2021/07/how-to-install-ewww-image-optimizer-1-594x1024.jpg 594w, https://ichi-station.com/wp-content/uploads/2021/07/how-to-install-ewww-image-optimizer-1-174x300.jpg 174w, https://ichi-station.com/wp-content/uploads/2021/07/how-to-install-ewww-image-optimizer-1.jpg 672w" sizes="(max-width: 594px) 100vw, 594px" /></figure>



<p>次に以下の手順を実施します。</p>



<ol><li>「EWWW Image Optimizer」と検索</li><li>「今すぐインストール」をクリック</li><li>インストール後、「有効化」をクリック</li></ol>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="351" src="https://ichi-station.com/wp-content/uploads/2021/07/how-to-install-ewww-image-optimizer-2-1024x351.jpg" alt="EWWW Image Optimizerのインストール方法2" class="wp-image-2626" srcset="https://ichi-station.com/wp-content/uploads/2021/07/how-to-install-ewww-image-optimizer-2-1024x351.jpg 1024w, https://ichi-station.com/wp-content/uploads/2021/07/how-to-install-ewww-image-optimizer-2-300x103.jpg 300w, https://ichi-station.com/wp-content/uploads/2021/07/how-to-install-ewww-image-optimizer-2-768x263.jpg 768w, https://ichi-station.com/wp-content/uploads/2021/07/how-to-install-ewww-image-optimizer-2-1536x526.jpg 1536w, https://ichi-station.com/wp-content/uploads/2021/07/how-to-install-ewww-image-optimizer-2.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>有効化まで終わったら、インストール手順は完了です。</p>



<h2><span id="toc3">EWWW Image Optimizerの設定方法</span></h2>



<p>ここからは<meta charset="utf-8">EWWW Image Optimizerの設定をしていきます。</p>



<p>管理画面の左メニューの「設定」&gt;「 EWWW Image Optimizer 」に進みます。</p>



<figure class="wp-block-image size-full"><img decoding="async" width="652" height="588" src="https://ichi-station.com/wp-content/uploads/2021/07/how-to-set-up-ewww-image-optimizer-1.png" alt="EWWW Image Optimizerの設定方法1" class="wp-image-2628" srcset="https://ichi-station.com/wp-content/uploads/2021/07/how-to-set-up-ewww-image-optimizer-1.png 652w, https://ichi-station.com/wp-content/uploads/2021/07/how-to-set-up-ewww-image-optimizer-1-300x271.png 300w" sizes="(max-width: 652px) 100vw, 652px" /></figure>



<p>設定画面が表示されるので、目的にあった項目をチェックします。</p>



<p>迷ったら以下の画像と同じ設定項目にチェックを入れて次へをクリックします。</p>



<figure class="wp-block-image size-full"><img decoding="async" width="936" height="940" src="https://ichi-station.com/wp-content/uploads/2021/07/how-to-set-up-ewww-image-optimizer-2.jpg" alt="EWWW Image Optimizerの設定方法2" class="wp-image-2629" srcset="https://ichi-station.com/wp-content/uploads/2021/07/how-to-set-up-ewww-image-optimizer-2.jpg 936w, https://ichi-station.com/wp-content/uploads/2021/07/how-to-set-up-ewww-image-optimizer-2-300x300.jpg 300w, https://ichi-station.com/wp-content/uploads/2021/07/how-to-set-up-ewww-image-optimizer-2-150x150.jpg 150w, https://ichi-station.com/wp-content/uploads/2021/07/how-to-set-up-ewww-image-optimizer-2-768x771.jpg 768w, https://ichi-station.com/wp-content/uploads/2021/07/how-to-set-up-ewww-image-optimizer-2-100x100.jpg 100w" sizes="(max-width: 936px) 100vw, 936px" /></figure>



<p>推奨設定の項目は特に変更せずに「設定を保存」をクリックします。</p>



<p>※データ提供が嫌な方は一番下のチェックを外しておきましょう</p>



<figure class="wp-block-image size-large"><img decoding="async" width="785" height="1024" src="https://ichi-station.com/wp-content/uploads/2021/07/how-to-set-up-ewww-image-optimizer-3-785x1024.jpg" alt="EWWW Image Optimizerの設定方法3" class="wp-image-2630" srcset="https://ichi-station.com/wp-content/uploads/2021/07/how-to-set-up-ewww-image-optimizer-3-785x1024.jpg 785w, https://ichi-station.com/wp-content/uploads/2021/07/how-to-set-up-ewww-image-optimizer-3-230x300.jpg 230w, https://ichi-station.com/wp-content/uploads/2021/07/how-to-set-up-ewww-image-optimizer-3-768x1002.jpg 768w, https://ichi-station.com/wp-content/uploads/2021/07/how-to-set-up-ewww-image-optimizer-3.jpg 924w" sizes="(max-width: 785px) 100vw, 785px" /></figure>



<p>「完了」ボタンをクリックします。</p>



<figure class="wp-block-image size-full"><img decoding="async" width="928" height="812" src="https://ichi-station.com/wp-content/uploads/2021/07/how-to-set-up-ewww-image-optimizer-4.jpg" alt="EWWW Image Optimizerの設定方法4" class="wp-image-2631" srcset="https://ichi-station.com/wp-content/uploads/2021/07/how-to-set-up-ewww-image-optimizer-4.jpg 928w, https://ichi-station.com/wp-content/uploads/2021/07/how-to-set-up-ewww-image-optimizer-4-300x263.jpg 300w, https://ichi-station.com/wp-content/uploads/2021/07/how-to-set-up-ewww-image-optimizer-4-768x672.jpg 768w" sizes="(max-width: 928px) 100vw, 928px" /></figure>



<p>次に「設定」&gt;「 EWWW Image Optimizer 」と移動し、</p>



<p>Enable Ludicrous Modeをクリックします。</p>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="375" src="https://ichi-station.com/wp-content/uploads/2021/08/how-to-set-up-ewww-image-optimizer-5-1024x375.jpg" alt="EWWW Image Optimizerの設定方法5" class="wp-image-2633" srcset="https://ichi-station.com/wp-content/uploads/2021/08/how-to-set-up-ewww-image-optimizer-5-1024x375.jpg 1024w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-set-up-ewww-image-optimizer-5-300x110.jpg 300w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-set-up-ewww-image-optimizer-5-768x282.jpg 768w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-set-up-ewww-image-optimizer-5-1536x563.jpg 1536w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-set-up-ewww-image-optimizer-5.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<ol><li>「変換タブ」をクリック</li><li>「変換リンクを非表示」にチェックを入れる</li><li>「変更を保存」ボタンをクリック</li></ol>



<p>と進めます。</p>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="484" src="https://ichi-station.com/wp-content/uploads/2021/08/how-to-set-up-ewww-image-optimizer-6-1024x484.jpg" alt="EWWW Image Optimizerの設定方法6" class="wp-image-2638" srcset="https://ichi-station.com/wp-content/uploads/2021/08/how-to-set-up-ewww-image-optimizer-6-1024x484.jpg 1024w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-set-up-ewww-image-optimizer-6-300x142.jpg 300w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-set-up-ewww-image-optimizer-6-768x363.jpg 768w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-set-up-ewww-image-optimizer-6-1536x726.jpg 1536w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-set-up-ewww-image-optimizer-6.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box information-box">
<p>「変換リンクを非表示」にチェックを入れる理由は、</p>



<p>画像の拡張子を勝手に変更ことを防ぐためです。</p>
</div>



<p>これで設定は完了です。</p>



<h2><span id="toc4">EWWW Image Optimizerの使い方</span></h2>



<p>EWWW Image Optimizerは、以下のことができます。</p>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box has-border-color has-yellow-border-color">
<ul><li>新規アップロード画像の最適化（圧縮）</li><li>アップロード済み画像の最適化（圧縮）</li></ul>



<p></p>
</div>



<h3><span id="toc5">新規アップロード画像の最適化</span></h3>



<p>プラグインを設定後、新規でアップロードした画像は</p>



<p><meta charset="utf-8">EWWW Image Optimizerが自動で最適化（圧縮）してくれます。</p>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="121" src="https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-1-1024x121.png" alt="EWWW Image Optimizerの使い方1" class="wp-image-2639" srcset="https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-1-1024x121.png 1024w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-1-300x35.png 300w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-1-768x90.png 768w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-1-1536x181.png 1536w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-1.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://ichi-station.com/wp-content/uploads/2021/01/icon_200x200.png" alt="いっちー" class="speech-icon-image"/></figure><div class="speech-name">いっちー</div></div><div class="speech-balloon">
<p>「82.9%(1.1MB)を減少」と表示されています。</p>



<p>アップロードするだけで画像を最適化してくれるので非常に助かります！！</p>
</div></div>



<h3><span id="toc6">アップロード済み画像の一括最適化</span></h3>



<p><meta charset="utf-8">続いてアップロード済み画像の一括最適化の方法です。</p>



<div class="wp-block-cocoon-blocks-caption-box-1 caption-box block-box has-border-color has-yellow-border-color"><div class="caption-box-label block-box-label box-label fab-info-circle"><span class="caption-box-label-text block-box-label-text box-label-text"><meta charset="utf-8"><strong>一括最適化</strong>の手順</span></div><div class="caption-box-content block-box-content box-content">
<ol><li>左サイトバーの「メディア」セクションの「一括最適化」をクリック</li><li>「最適化されていない画像をスキャンする」をクリック</li><li>「○点の画像を最適化」をクリック</li></ol>
</div></div>



<p>「○点の画像を最適化」をクリックした後は、<meta charset="utf-8">EWWW Image Optimizerが自動で過去の画像を圧縮してくれます。</p>



<figure class="wp-block-image size-full"><img decoding="async" width="652" height="200" src="https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-2.png" alt="EWWW Image Optimizerの使い方2" class="wp-image-2641" srcset="https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-2.png 652w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-2-300x92.png 300w" sizes="(max-width: 652px) 100vw, 652px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="281" src="https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-3-1024x281.jpg" alt="EWWW Image Optimizerの使い方3" class="wp-image-2642" srcset="https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-3-1024x281.jpg 1024w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-3-300x82.jpg 300w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-3-768x211.jpg 768w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-3-1536x421.jpg 1536w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-3.jpg 1786w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="273" src="https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-4-1024x273.png" alt="EWWW Image Optimizerの使い方4" class="wp-image-2643" srcset="https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-4-1024x273.png 1024w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-4-300x80.png 300w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-4-768x205.png 768w, https://ichi-station.com/wp-content/uploads/2021/08/how-to-use-ewww-image-optimizer-4.png 1350w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://ichi-station.com/wp-content/uploads/2021/01/icon_200x200.png" alt="いっちー" class="speech-icon-image"/></figure><div class="speech-name">いっちー</div></div><div class="speech-balloon">
<p>私の場合は8435点の画像が最適化対象で、</p>



<p><strong><span class="fz-20px">完了までに約3時間</span></strong>かかりました。</p>



<p>過去画像が大量にある場合は時間に余裕がある際に実行するのが良さそうです。</p>
</div></div>



<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box information-box">
<p>最適化対象の画像数が、実際にアップロードしている画像数を大幅に超えた数値で表示されます。</p>



<p>これはWordPressがリサイズ用のイメージを1つのイメージにつき複数作成しているためです。</p>



<p><a rel="noopener" href="https://docs.ewww.io/article/20-why-do-i-have-so-many-images-on-my-site" data-type="URL" data-id="https://docs.ewww.io/article/20-why-do-i-have-so-many-images-on-my-site" target="_blank">参考リンク</a></p>
</div>



<h2><span id="toc7">さいごに</span></h2>



<p>「EWWW Image Optimizer」を利用すると、画像のファイルサイズ自動で圧縮できます。</p>



<p>これからアップロードする画像に加えて、今までアップロードした画像も一括で圧縮できます。</p>



<p>サイトの速度改善をしたいと考えている方は、「EWWW Image Optimizer」を利用してみましょう。</p>



<h3><span id="toc8">参考リンク</span></h3>



<ul><li><a rel="noopener" href="https://ja.wordpress.org/plugins/ewww-image-optimizer/#description" data-type="URL" data-id="https://ja.wordpress.org/plugins/ewww-image-optimizer/#description" target="_blank">WORDPRESS.ORG EWWW Image Optimizer</a></li><li><a rel="noopener" href="https://www.thinkwithgoogle.com/intl/en-ca/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/" data-type="URL" data-id="https://www.thinkwithgoogle.com/intl/en-ca/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/" target="_blank">Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed</a></li></ul>
]]></content:encoded>
					
					<wfw:commentRss>https://ichi-station.com/ewww-image-optimizer/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
