<?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>Dmitri's Blog &#187; Images</title>
	<atom:link href="http://www.dmitri.me/blog/tag/images/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.dmitri.me/blog</link>
	<description>Dmitri Smirnov. Web development in Estonia.</description>
	<lastBuildDate>Tue, 10 Aug 2010 12:07:30 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Internet Explorer intepolation mode for images</title>
		<link>http://www.dmitri.me/blog/internet-explorer-intepolation-mode-for-images/</link>
		<comments>http://www.dmitri.me/blog/internet-explorer-intepolation-mode-for-images/#comments</comments>
		<pubDate>Wed, 11 Feb 2009 13:09:59 +0000</pubDate>
		<dc:creator>Dmitri</dc:creator>
				<category><![CDATA[HTML and CSS]]></category>
		<category><![CDATA[web-development]]></category>
		<category><![CDATA[bicubic]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[ie]]></category>
		<category><![CDATA[Images]]></category>
		<category><![CDATA[microsoft]]></category>

		<guid isPermaLink="false">http://www.dmitri.me/blog/?p=221</guid>
		<description><![CDATA[Every self-respecting web-designer and web-developer know that when scaling images browser makes picture smaller or larger by definite &#8220;magic&#8221; algorithms. All browsers except IE, do that much-less correctly.
In Internet Explorer you should setup that algorithm manually as CSS property.

img { -ms-interpolation-mode:bicubic }

So here is result, screenshot are taken in IE7 withimage scale about 50-60%.

Bicubic algorithm disabled (default)

Bicubic [...]]]></description>
			<content:encoded><![CDATA[<p>Every self-respecting web-designer and web-developer know that when scaling images browser makes picture smaller or larger by definite &#8220;magic&#8221; algorithms. All browsers except IE, do that much-less correctly.</p>
<p>In Internet Explorer you should setup that algorithm manually as CSS property.<br />
<code><br />
img { -ms-interpolation-mode:bicubic }<br />
</code></p>
<h4>So here is result, screenshot are taken in IE7 with<br />image scale about 50-60%.</h4>
<p><img src="/misc/ie-algo/without-algorithm.jpg" alt="Without algorithm" /><br />
<em>Bicubic algorithm disabled (default)</em></p>
<p><img src="/misc/ie-algo/with-algorithm.jpg" alt="Without algorithm" /><br />
<em>Bicubic algorithm enabled</em></p>
<p>Read more on <a href="http://msdn.microsoft.com/en-us/library/ms530822(VS.85).aspx">MSDN website</a> about this issue.</p>
<p>Enabling interpolation algorithm is useful for any kind of *boxes like <a href="http://fancy.klade.lv/">Fancy Box</a>, <a href="http://mjijackson.com/shadowbox/">Shadowbox</a>, <a href="http://www.huddletogether.com/projects/lightbox2/">Light Box</a>, etc&#8230;</p>
<p><strong>NB! Enabling algorithms can decrease IE&#8217;s performance up 2 times!<br />Nice joke, BILL!</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.dmitri.me/blog/internet-explorer-intepolation-mode-for-images/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Optimizing PNG images</title>
		<link>http://www.dmitri.me/blog/optimizing-png-images/</link>
		<comments>http://www.dmitri.me/blog/optimizing-png-images/#comments</comments>
		<pubDate>Tue, 14 Oct 2008 20:09:25 +0000</pubDate>
		<dc:creator>Dmitri</dc:creator>
				<category><![CDATA[web-development]]></category>
		<category><![CDATA[work]]></category>
		<category><![CDATA[Images]]></category>
		<category><![CDATA[Optimization]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[PNG]]></category>

		<guid isPermaLink="false">http://www.dmitri.me/blog/?p=6</guid>
		<description><![CDATA[PNG is quite popular and versatile format for web, but not so as we all want. Why? Because software cannot render, save and open it correctly. Only IE6 is worth to remember, I hope soon that wretched browser will stay in far-far past. Sometimes happens that PNG&#8217;s file size is quite heavy.
OK, lets begin our [...]]]></description>
			<content:encoded><![CDATA[<p>PNG is quite popular and versatile format for web, but not so as we all want. Why? Because software cannot render, save and open it correctly. Only IE6 is worth to remember, I hope soon that wretched browser will stay in far-far past. Sometimes happens that PNG&#8217;s file size is quite heavy.</p>
<p>OK, lets begin our story. When you create a PNG files in Photoshop they seems to be quite large. “Why” you ask? I answer, because Adobe Photoshop (even CS3) don&#8217;t know how to save PNG format correctly (strange, but Adobe Fireworks does). Ok, lets see why <span id="more-6"></span></p>
<p>Look at these vivid magenta zones? What are they?</p>
<table border="0">
<tbody>
<tr>
<td width="275" align="center">
<div class="png-container"><img src="/misc/png/fire_zones.png" alt="PNG Photoshop unsaved zones" width="200" height="300" /></div>
</td>
<td width="275" align="center">
<div class="png-container"><img src="/misc/png/girl_zones.png" alt="PNG Photoshop unsaved zones" width="200" height="300" /></div>
</td>
</tr>
</tbody>
</table>
<p>These magenta zones are pixels with real transparent color values, but other transparent stuff have different data (if you fluent in Russian you can read <a href="http://www.artlebedev.ru/tools/technogrette/img/png-3/">this page</a> and learn how to remove this extra data manually in Photoshop). So we need to remove this extra data to make file size lesser.</p>
<p>As technology guy I&#8217;m too lazy to do these removing operations by hand. So I have written script to make this work faster and more happy. Moreover the script uses all power of zlib to compress PNG images, what Photoshop doesn&#8217;t fully use.</p>
<p>Script is written in PHP and I recommend to run it from command line, not from browser, because it can hang up your Firefox.</p>
<p><a href="/misc/png/optpng.zip">Download</a> or check <a href="/misc/png/optpng.phps">source</a>.</p>
<p>To run script, use this command in your console, be sure that your PHP is complied correctly with GD library:<br />
<code>$php optpng.php [dir]</code><br />
For more information see comments inside script.</p>
<h3>Some examples</h3>
<table border="0">
<tbody>
<tr>
<th width="275" align="center"><strong>Before</strong></th>
<th width="275" align="center"><strong>After</strong></th>
</tr>
<tr>
<td align="center">
<div class="png-container"><img src="/misc/png/fire.png" alt="PNG before optimization" width="200" height="300" /></div>
</td>
<td align="center">
<div class="png-container"><img src="/misc/png/fire_optimized.png" alt="PNG before optimization" width="200" height="300" /></div>
</td>
</tr>
<tr>
<td align="center"><em>59 606 bytes</em></td>
<td align="center"><em>50 915 bytes</em></td>
</tr>
<tr>
<th width="275" align="center"><strong>Before</strong></th>
<th width="275" align="center"><strong>After</strong></th>
</tr>
<tr>
<td align="center">
<div class="png-container"><img src="/misc/png/girl.png" alt="PNG before optimization" width="200" height="300" /></div>
</td>
<td align="center">
<div class="png-container"><img src="/misc/png/girl_optimized.png" alt="PNG before optimization" width="200" height="300" /></div>
</td>
</tr>
<tr>
<td align="center"><em>53 696 bytes</em></td>
<td align="center"><em>50 869 bytes</em></td>
</tr>
</tbody>
</table>
<p>In this examples we get a slight gain, but when you use more larger images your winning in size up to 50% without any lose of quality. Anyway as tests show you will win average 25% in size. See example of script <a href="/misc/png/pngtest.txt">output information</a> (265 Kb less, not bad).</p>
<p>When I learn Ruby better I will do clone in Ruby.</p>
<p>So have fun and don&#8217;t believe what you see!</p>
<p>PS. You can use much better image optimizer <a href="http://www.smushit.com">Smush it!</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.dmitri.me/blog/optimizing-png-images/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
