<?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>PNG &#8211; WordPress Memo</title>
	<atom:link href="https://blog.riverforest-wp.info/tag/png/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.riverforest-wp.info</link>
	<description>WordPress に関する覚え書き</description>
	<lastBuildDate>Fri, 09 May 2025 12:48:52 +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://blog.riverforest-wp.info/wp-content/uploads/2018/05/cropped-icon-256x256-1-32x32.png</url>
	<title>PNG &#8211; WordPress Memo</title>
	<link>https://blog.riverforest-wp.info</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>PNG ファイルを圧縮するプラグイン</title>
		<link>https://blog.riverforest-wp.info/png-compress/</link>
		
		<dc:creator><![CDATA[Katsushi Kawamori]]></dc:creator>
		<pubDate>Wed, 19 Aug 2020 23:33:52 +0000</pubDate>
				<category><![CDATA[Plugin]]></category>
		<category><![CDATA[PNG]]></category>
		<category><![CDATA[メディアライブラリ]]></category>
		<category><![CDATA[圧縮]]></category>
		<category><![CDATA[画質]]></category>
		<guid isPermaLink="false">https://blog.riverforest-wp.info/?p=2429</guid>

					<description><![CDATA[はじめに Twitter で以下のつぶやきを見つけました。 TinyPNG は、劣化がほとんど無く大幅な圧縮率を誇るサービスです。その画像を WordPress のメディアライブラリに新規追加すると、メディアライブラリに [&#8230;]]]></description>
										<content:encoded><![CDATA[
<h3 class="wp-block-heading">はじめに</h3>



<p>Twitter で以下のつぶやきを見つけました。</p>



<figure class="wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter"><div class="wp-block-embed__wrapper">
<blockquote class="twitter-tweet" data-width="500" data-dnt="true"><p lang="ja" dir="ltr">TinyPNGかけてアップロードした画像がWordPressでpxサイズ変更のエンコードされてpxサイズは小さくなっているのにファイルサイズが大きくなっているのえ、ちょっと待って状態</p>&mdash; つぶ (@tbshiki) <a href="https://twitter.com/tbshiki/status/1294089891395993600?ref_src=twsrc%5Etfw">August 14, 2020</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></figure>



<p><strong>TinyPNG</strong> は、劣化がほとんど無く大幅な圧縮率を誇るサービスです。その画像を WordPress のメディアライブラリに新規追加すると、メディアライブラリに作成されるサムネイルの方が大きなサイズになってしまいます！<strong>TinyPNG</strong> にアカウントを作成し、有償でそのサービスを使いサムネイルまで生成するようなプラグインも出ていますが、面倒です。そこで、少し画像は劣化してもかまわないから、サイズを圧縮したいという方向けにプラグインを作成してみました。</p>



<style>
.simpleblogcard_img_block814a2c9b434430b67a0e8665e15021f6 {
  float: right;
  padding: 10px;
}
.simpleblogcard_border814a2c9b434430b67a0e8665e15021f6 {
  border-left: solid 8px #cd162c;
  padding: 0.25em 0.25em;
  background: transparent;
}
.simpleblogcard_title814a2c9b434430b67a0e8665e15021f6 {
  line-height: 155%;
  font-weight: bold;
  display: block;
}
.simpleblogcard_description814a2c9b434430b67a0e8665e15021f6 {
  line-height: 155%;
  color: #333;
}
</style>
<div class="simpleblogcard_wrap">
			<a style="text-decoration: none;" href=https://tinypng.com/>
				<figure class="simpleblogcard_img_block814a2c9b434430b67a0e8665e15021f6">
			<img decoding="async" style="border-radius: 5px; width: 170px; height: 85px;" src="https://tinypng.com/images/social/website.jpg" alt="TinyPNG – Compress WebP, PNG and JPEG images intelligently" />
		</figure>
		<div class="simpleblogcard_inner">
		<div class="simpleblogcard_border814a2c9b434430b67a0e8665e15021f6">
			tinypng.com			<div class="simpleblogcard_title814a2c9b434430b67a0e8665e15021f6">
				TinyPNG – Compress WebP, PNG and JPEG images intelligently			</div>
							<div class="simpleblogcard_description814a2c9b434430b67a0e8665e15021f6">
					Free online image optimizer for faster websites! Reduce the file size of your WEBP, JPEG a&#8230;				</div>
					</div>
	</div>
	<div style="clear: both;"></div>
	</a>
</div>



<p>また、JPEG 用に、画質を変更するフィルター <strong>jpeg_quality</strong> があるのですが、PNG は無いのでプラグインでフィルターも提供するようにしました。</p>



<style>
.simpleblogcard_img_block5892d714ad501762dc59d34913a137a6 {
  float: right;
  padding: 10px;
}
.simpleblogcard_border5892d714ad501762dc59d34913a137a6 {
  border-left: solid 8px #cd162c;
  padding: 0.25em 0.25em;
  background: transparent;
}
.simpleblogcard_title5892d714ad501762dc59d34913a137a6 {
  line-height: 155%;
  font-weight: bold;
  display: block;
}
.simpleblogcard_description5892d714ad501762dc59d34913a137a6 {
  line-height: 155%;
  color: #333;
}
</style>
<div class="simpleblogcard_wrap">
			<a style="text-decoration: none;" href=https://developer.wordpress.org/reference/hooks/jpeg_quality/>
				<figure class="simpleblogcard_img_block5892d714ad501762dc59d34913a137a6">
			<img decoding="async" style="border-radius: 5px; width: 100px; height: 52px;" src="https://developer.wordpress.org/wp-content/themes/wporg-developer-2023/images/opengraph-image.png" alt="jpeg_quality – Hook | Developer.WordPress.org" />
		</figure>
		<div class="simpleblogcard_inner">
		<div class="simpleblogcard_border5892d714ad501762dc59d34913a137a6">
			developer.wordpress.org			<div class="simpleblogcard_title5892d714ad501762dc59d34913a137a6">
				jpeg_quality – Hook | Developer.WordPress.org			</div>
							<div class="simpleblogcard_description5892d714ad501762dc59d34913a137a6">
					Filters the JPEG compression quality for backward-compatibility.				</div>
					</div>
	</div>
	<div style="clear: both;"></div>
	</a>
</div>



<div class="pluginstatsview-card-wrap">
	<div>
		<img decoding="async" src="https://ps.w.org/png-compress/assets/icon-256x256.png?rev=2365345" alt="Png Compress のアイコン" class="pluginstatsview-card-icon" />
		<div class="pluginstatsview-after-icon">
			<div class="pluginstatsview-bold"><a href="https://wordpress.org/plugins/png-compress/" class="pluginstatsview-astyle">Png Compress</a></div>
			<div class="pluginstatsview-small">PNG ファイル圧縮。</div>
			<div class="pluginstatsview-small">作者: <a href="https://profiles.wordpress.org/katsushi-kawamori/">Katsushi Kawamori</a></div>
			<div style="clear: both;"></div>
		</div>
	</div>
	<div style="clear: both;"></div>

	<div class="pluginstatsview-small">
		<span class="pluginstatsview-card-left"><a href="https://wordpress.org/plugins/png-compress/#reviews" title="0.0(5点満点中)" class="pluginstatsview-astyle">	<span class="pluginstatsview-stars">
					<span class="dashicons dashicons-star-empty"></span><span class="dashicons dashicons-star-empty"></span><span class="dashicons dashicons-star-empty"></span><span class="dashicons dashicons-star-empty"></span><span class="dashicons dashicons-star-empty"></span>
			</span>
	</a>(0)</span>
		<span class="pluginstatsview-card-right">最終更新: 2日 前</span>
	</div>
	<div class="pluginstatsview-small">
		<span class="pluginstatsview-card-left">2,795ダウンロード</span>
		<span class="pluginstatsview-card-right">検証済み: 7.0</span>
	</div>
	<div class="pluginstatsview-small">
		<span class="pluginstatsview-card-left">ダウンロード: <a href="https://downloads.wordpress.org/plugin/png-compress.1.05.zip" class="dashicons dashicons-download pluginstatsview-download"></a></span>
		<span class="pluginstatsview-card-right">リリース: 2020-08-19</span>
	</div>
	<div class="pluginstatsview-small pluginstatsview-card-center">
		2026-03-31 09:29 時点の統計	</div>
</div>



<p></p>



<h3 class="wp-block-heading">概要</h3>



<ul class="wp-block-list"><li>メディアライブラリに PNG ファイルを追加する際に PNG ファイルを圧縮します。</li><li>品質を指定できます。</li><li>圧縮率を指定できます。</li></ul>



<h3 class="wp-block-heading">使用方法</h3>



<ul class="wp-block-list"><li>PHP で PNG を圧縮する関数は、デフォルトではたいした圧縮ができないため、一度、JPEG に変換しそこで画質を調整し、PNG に戻して圧縮するという２段階の方式をとっています。そのために、JPEG の中間ファイルの画質調整と、PNG の圧縮率調整が必要になります。また、それぞれのフィルターを提供します。<ul><li>JPEG 中間ファイルフィルター（0～100を指定）<ul><li>add_filter( &#8216;tmp_jpg_quality&#8217;, function(){ return 80; }, 10, 1 );</li></ul></li></ul><ul><li>PNG 圧縮率フィルター（0～9を指定）<ul><li>add_filter( &#8216;png_quality&#8217;, function(){ return 9; }, 10, 1 );</li></ul></li></ul></li><li>アップロードした元のファイルの圧縮の可否を指定できます。</li></ul>



<h3 class="wp-block-heading">スクリーンショット</h3>



<figure data-wp-context="{&quot;imageId&quot;:&quot;69cc6342ebd63&quot;}" data-wp-interactive="core/image" data-wp-key="69cc6342ebd63" class="wp-block-image size-large wp-lightbox-container"><img decoding="async" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://ps.w.org/png-compress/assets/screenshot-1.png" alt=""/><button
			class="lightbox-trigger"
			type="button"
			aria-haspopup="dialog"
			aria-label="拡大する"
			data-wp-init="callbacks.initTriggerButton"
			data-wp-on--click="actions.showLightbox"
			data-wp-style--right="state.imageButtonRight"
			data-wp-style--top="state.imageButtonTop"
		>
			<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
				<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
			</svg>
		</button></figure>



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