<?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>PageTalks &#187; Wordpress</title>
	<atom:link href="http://pagetalks.com/category/site-development/wordpress/feed" rel="self" type="application/rss+xml" />
	<link>http://pagetalks.com</link>
	<description>Pure Web Development &#38; Design Ideas</description>
	<lastBuildDate>Thu, 19 Jan 2012 12:06:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Immigrate  WordPress &#8211; A Real Case</title>
		<link>http://pagetalks.com/2012/01/14/immigrate-wordpress-a-real-case.html</link>
		<comments>http://pagetalks.com/2012/01/14/immigrate-wordpress-a-real-case.html#comments</comments>
		<pubDate>Sat, 14 Jan 2012 12:39:12 +0000</pubDate>
		<dc:creator>Robin</dc:creator>
				<category><![CDATA[Site Development]]></category>
		<category><![CDATA[Technique]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[linux]]></category>
		<category><![CDATA[mysql]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[server]]></category>

		<guid isPermaLink="false">http://pagetalks.com/?p=539</guid>
		<description><![CDATA[上个星期，我终于决定把elfvision.com上的博客移到robinqu.me这个新域名上。由于使用wordpress已经很多年了，前前后后也做过不少wordpress的维护工作了，自我感觉良好，不料这次遇到不少麻烦，遂整... ]]></description>
			<content:encoded><![CDATA[<p>上个星期，我终于决定把elfvision.com上的博客移到robinqu.me这个新域名上。由于使用wordpress已经很多年了，前前后后也做过不少wordpress的维护工作了，自我感觉良好，不料这次遇到不少麻烦，遂整理成文。</p>
<p>分析一下我这里的案例，其实是要做以下这些事情（原站点简称A，新站点简称B）：</p>
<ol>
<li>制作A在B下的镜像</li>
<li>修改B下面的镜像Wordpress中域名设置</li>
<li>对A站相关地址进行转向到B站域名</li>
<li>清理A站的旧文件</li>
<li>在A站和B站上同时发出公告，安抚、告知用户</li>
</ol>
<h3>制作站点镜像</h3>
<p>开头很重要，如果你的站点无时无刻有访问量并产生数据，你面临两种选择：1、临时关闭站点，挂出维护通知 2、站点切换后再灌入差量数据。所幸，Wordpress站点往往基本没有实时数据，我的做法是没有关闭原站，而是直接复制数据的。</p>
<p>假设你可以登陆你的服务器，那么直接远程SSH就可以完成对文件的复制，即将wordpress站点的根目录直接复制到新位置。如果不能，那么就通过FTP慢慢拖吧⋯⋯</p>
<p>至于数据库部分，如果安装了phpMyAdmin，可以登陆到管理后台，直接选中数据库，然后在Operation选项卡中有Copy database的功能。</p>
<p>否则就得登陆mysql客户端，执行mysqldump了：</p>
<pre><code>mysqldump [db1] -u root -ppassword --add-drop-table | mysql [db2] -u root -ppassword</code></pre>
<p><span id="more-539"></span><br />
<h3>切换域名</h3>
<p>到这个时候，如果的B站点域名指向和主机配置都正确，访问B站应该被转向了A站，因为B站内部的wordpress设置的域名还是A站的。</p>
<p>切换域名分两方面：</p>
<ul>
<li>WordPress配置内部的域名设置</li>
<li>文章内容里面的链接内容</li>
</ul>
<p>对于前者，有两种办法，一种是直接登陆MYSQL，用SQL修改wp-options表的两条纪录，即siteurl和home的option_value。</p>
<pre><code>UPDATE  `wp`.`wp_options` SET  `option_value` =  'new_site_url' WHERE  `wp_options`.`option_name` ='home';
UPDATE  `wp`.`wp_options` SET  `option_value` =  'new_wordpress_url' WHERE  `wp_options`.`option_name` ='siteurl';
</code></pre>
<p>或者修改B站下面的wp_config.php，加入如下两句：</p>
<pre><code>define('WP_SITEURL', 'new_wordpress_url');
define('WP_HOME', 'new_site_url');</code></pre>
<h3>对A站的地址进行转向</h3>
<p>不少注重SEO的同学应该会单行A域名的PR值突然下降，那么我们可以设置nginx或者Apache的主机配置文件对以往链接进行304转向，将伤害降到尽可能小。</p>
<pre><code>server {
    listen 80;
    server_name www.siteB.com;

    index index.php index.html;
    root /var/www/siteB;

    location / {
        error_page 404 = /index.php?q=$uri;
		<strong>rewrite ^/(\d+)/(\d+)/(.*)$ http://siteB$request_uri permanent;</strong>
    }

}</code></pre>
<p>注意替换rewrite规则中的域名。详细文档：<a href="http://wiki.nginx.org/HttpRewriteModule#rewrite">http://wiki.nginx.org/HttpRewriteModule#rewrite</a>。</p>
<p>rewrite后面接受的第一个参数是url中path部分的正则匹配，这个正则应该按照之前wordpress的permanent链接的模式来写，最后一个参数permanent表示是304永久重定向。</p>
<p>注意，如果你是将Wordpress程序在同一个域名中迁移，例如从http://siteA.com/blog/迁移到http://siteA.com/，那么你可以尝试nginx的try_files规则：<a href="http://wiki.nginx.org/HttpCoreModule#try_files">http://wiki.nginx.org/HttpCoreModule#try_files</a>。</p>
<p>有一篇文章专门降到了利用这个指令来进行同域名不同虚拟目录的迁移：<a href="http://michaelshadle.com/2009/03/19/finally-using-nginxs-try-files-directive">http://michaelshadle.com/2009/03/19/finally-using-nginxs-try-files-directive</a>。</p>
<p>对于文章内部的链接数据，则要再次登陆MYSQL控制台或phpMyAdmin进行操作了。</p>
<p><code>
<pre>UPDATE wp_posts SET guid = replace(guid, 'http://www.siteA.com','http://www.siteB.com');
UPDATE wp_posts SET post_content = replace(post_content, 'http://www.siteA.com', 'http://www.siteB.com');
</pre>
<p></code></p>
<h3>清理旧文件</h3>
<p>登陆FTP或者SSH执行文件删除吧，不过个人建议不要删除，把所有文件都备份到另一个目录，带迁移成功后的一两个月之后再考虑是否删除。这样可以避免突发事件时的尴尬。</p>
<h3>通知用户</h3>
<p>好吧， 在两边都贴上大大的告示吧，以免用户感到困惑⋯⋯</p>
<h3>Next…</h3>
<p>我更新了另外一篇文章来阐述node里面的一些新加入crypto相关的API：<a href="http://pagetalks.com/2012/01/18/more-about-crypto-module-in-nodejs.html">http://pagetalks.com/2012/01/18/more-about-crypto-module-in-nodejs.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://pagetalks.com/2012/01/14/immigrate-wordpress-a-real-case.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Best Free WordPress Themes of 2009</title>
		<link>http://pagetalks.com/2010/03/26/the-best-free-wordpress-themes-of-2009.html</link>
		<comments>http://pagetalks.com/2010/03/26/the-best-free-wordpress-themes-of-2009.html#comments</comments>
		<pubDate>Fri, 26 Mar 2010 13:07:18 +0000</pubDate>
		<dc:creator>Robin</dc:creator>
				<category><![CDATA[Digest]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[theme]]></category>

		<guid isPermaLink="false">http://pagetalks.com/?p=370</guid>
		<description><![CDATA[In this article, we’re presenting our picks for the best free WordPress themes of 2009. There were plenty of free themes created in 2009, but here are the ones that we feel had a little something extra that made them stand out from the crowd. If you th... ]]></description>
			<content:encoded><![CDATA[<div class="text-en" lang="en">
In this article, we’re presenting our picks for the best free WordPress themes of 2009. There were plenty of free themes created in 2009, but here are the ones that we feel had a little something extra that made them stand out from the crowd. If you think we missed or left one out, let us know about them in the comments.
</div>
<div class="text-cn" lang="zh">
老外的Wordpress主题，有什么好说的呢，不乏大家熟悉的，例如Composito、Irresistible。用的时候要注意他们对中文字体支持并不是很好。拿过来就修改一下CSS吧。
</div>
<p><a href="http://webdesignledger.com/freebies/the-best-free-wordpress-themes-of-2009" class="external digest-continue more-link">Read More</a></p>
]]></content:encoded>
			<wfw:commentRss>http://pagetalks.com/2010/03/26/the-best-free-wordpress-themes-of-2009.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>13 Useful Code Snippets for WordPress Development</title>
		<link>http://pagetalks.com/2010/03/26/13-useful-code-snippets-for-wordpress-development.html</link>
		<comments>http://pagetalks.com/2010/03/26/13-useful-code-snippets-for-wordpress-development.html#comments</comments>
		<pubDate>Fri, 26 Mar 2010 12:57:39 +0000</pubDate>
		<dc:creator>Robin</dc:creator>
				<category><![CDATA[Digest]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[snippet]]></category>

		<guid isPermaLink="false">http://pagetalks.com/?p=368</guid>
		<description><![CDATA[WordPress has grown to be commonly defined as the core solution for your blogging needs. It is the most recognized and sought after Content Management System by writers and designers. Consequently, over the past few years there has been a voluble increas... ]]></description>
			<content:encoded><![CDATA[<div class="text-en" lang="en">
WordPress has grown to be commonly defined as the core solution for your blogging needs. It is the most recognized and sought after Content Management System by writers and designers. Consequently, over the past few years there has been a voluble increase in WordPress blogs, this has caused the “need” for useful tips, tricks, and hacks, all made to allow the customizing of your WordPress powered site. Here are 13 code snippets or hacks that will help you extend the capabilities of your WordPress site.
</div>
<div class="text-cn" lang="zh">
老外的文章总是“XX条关于XX的建议”，把发散的事物进行归纳，然后线性的罗列，这就是他们的思维。也是解释他们为何如此严谨的一个位置。<br />
Wordpress人人用，你记录过你写模板时的常用代码么？在我印象中，我总是翻看自己下载的那些Cheetsheets⋯⋯<br />
不过最近用上了一个叫<a href="http://www.apple.com/downloads/macosx/development_tools/snippet.html">Snippet</a>的小软件，极大程度上的提高了代码收集、重用的能力啊。这不是广告⋯⋯
</div>
<p><a href="http://webdesignledger.com/tips/13-useful-code-snippets-for-wordpress-development" class="external digest-continue more-link">Read More</a></p>
]]></content:encoded>
			<wfw:commentRss>http://pagetalks.com/2010/03/26/13-useful-code-snippets-for-wordpress-development.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Get to Know the WordPress Hierarchy</title>
		<link>http://pagetalks.com/2010/03/23/get-to-know-the-wordpress-hierarchy.html</link>
		<comments>http://pagetalks.com/2010/03/23/get-to-know-the-wordpress-hierarchy.html#comments</comments>
		<pubDate>Tue, 23 Mar 2010 12:27:17 +0000</pubDate>
		<dc:creator>Robin</dc:creator>
				<category><![CDATA[Digest]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[template]]></category>

		<guid isPermaLink="false">http://pagetalks.com/?p=355</guid>
		<description><![CDATA[WordPress’s popularity and usefulness as a multi-purpose content management system, continues to grow, and the more people flock to using this CMS the more an understanding of some of the basics of how it operates becomes necessary. In that vein, I hav... ]]></description>
			<content:encoded><![CDATA[<p><img alt="the WordPress Hierarchy" src="http://www.problogdesign.com/wp-content/uploads/2010/02/header5.jpg" title="the WordPress Hierarchy" class="aligncenter" width="560" height="145" /></p>
<div class="text-en" lang="en">WordPress’s popularity and usefulness as a multi-purpose content management system, continues to grow, and the more people flock to using this CMS the more an understanding of some of the basics of how it operates becomes necessary.</p>
<p>In that vein, I have put together this post that examines the WordPress template hierarchy and the use of conditional statements. Technically you only need two files for a WordPress theme to work, index.php and style.css.</p></div>
<div class="text-cn" lang="zh">
Wordpress的模板系统是其最大的魅力，这篇文章讲解了Wordpress的模板体系结构。对于喜欢制作Wordpress主题的同学有很多帮助。
</div>
<p><a href="http://www.dzinepress.com/2010/03/50-excellent-tutorials-for-web-development-using-css3/" class="digest-continue more-link external">Read More</a></p>
]]></content:encoded>
			<wfw:commentRss>http://pagetalks.com/2010/03/23/get-to-know-the-wordpress-hierarchy.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WordPress Plugin &#8211; Free Share</title>
		<link>http://pagetalks.com/2010/03/21/wordpress-plugin-free-share.html</link>
		<comments>http://pagetalks.com/2010/03/21/wordpress-plugin-free-share.html#comments</comments>
		<pubDate>Sun, 21 Mar 2010 04:55:04 +0000</pubDate>
		<dc:creator>Robin</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[share]]></category>
		<category><![CDATA[sharethis]]></category>
		<category><![CDATA[socials]]></category>

		<guid isPermaLink="false">http://pagetalks.com/?p=323</guid>
		<description><![CDATA[Introduction Add &#8220;Share&#8221; Button to anywhere you want! You don&#8217;t need to register in the Sharing or bookmarks site like Sharethis.com to embed a &#8220;Share&#8221; button! and you can choose your own lightbox effect to speed up the ui. ... ]]></description>
			<content:encoded><![CDATA[<div class="text-en" lang="en">
<h3>Introduction</h3>
<p>Add &#8220;Share&#8221; Button to anywhere you want!<br />
You don&#8217;t need to register in the Sharing or bookmarks site like Sharethis.com to embed a &#8220;Share&#8221; button!<br />
and you can choose your own lightbox effect to speed up the ui.</p>
<p>This plugin needs <a href="http://fancybox.net/">fancybox</a> lightbox effect! You can change it by editing lightbox function in sharethis.js to use you own lightbox effect.</p>
</div>
<div class="text-cn" lang="zh">添加“分享”按钮到你想要的地方。你也不必注册Sharethis.com之类的站点，同时你可以控制自己的站点列表！<br />
FreeShare能够带给你这些！<br />
这个插件需要<a href="http://fancybox.net/">fancybox</a>的lightbox效果! 你也可以自己更改自己为自己的lightbox效果。</p>
</div>
<p><span id="more-323"></span></p>
<div class="text-en" lang="en">
<h3>Download</h3>
Note: There is a file embedded within this post, please visit this post to download the file.
<h3>Installation</h3>
<ol>
<li>Include fancybox scripts! or use your own lightbox effect</li>
<li>Upload whole `freeshare` folder to the `/wp-content/plugins/` directory</li>
<li>Activate the plugin through the &#8216;FreeShare&#8217; menu in WordPress</li>
<li>Place `&lt;?php share-button();  ?&gt;` in the loop or in a single, PAGE</li>
</ol>
<h3>Frequently Asked Questions</h3>
<dl>
<dt>Why are there so many strange social sites in the list?</dt>
<dd>the default social sites list is made for users in China. You can easily custom it </dd>
<dt>How to use my own lightbox effect</dt>
<dd>open freeshare/sharethis/sharethis.js, you can find line 17, change the implementation of this function to adjust to your own lightbox effect</dd>
<dt>How to custom the site list</dt>
<dd>You can open freeshare/sharethis/sharethis.js, and you won&#8217;t miss the array that stores the site data.<br />
Don&#8217;t forget to assign an icon to each site.</dd>
<dt>Is there any option panel or something</dt>
<dd>No, at least in tis edition.</dd>
</dl>
<h3>Changelog</h3>
<dl>
<dt>1.0</dt>
<dd>First Release of FreeShare Plugin</dd>
</dl>
</div>
<div class="text-cn" lang="zh">
<h3>下载</h3>
Note: There is a file embedded within this post, please visit this post to download the file.
<h3>安装</h3>
<ol>
<li>引入Fancybox脚本，或者使用自己的lightbox效果</li>
<li>上传`freeshare` 整个文件夹到 `/wp-content/plugins/` 目录</li>
<li>在后台中激活 &#8216;FreeShare&#8217;</li>
<li>将 `&lt;?php share-button();  ?&gt;`放在loop循环中，或者PAGE、single的页面中</li>
</ol>
<h3>常见问题</h3>
<dl>
<dt>怎么会有这么多奇怪的社交站点？</dt>
<dd>默认列表是为中国用户准备的，你也可以去自定义这个列表的 </dd>
<dt>如何使用</dt>
<dd>打开freeshare/sharethis/sharethis.js,你可以在第17行找到lightbox函数, 你可以更改该函数的实现来兼容你的lightbox效果</dd>
<dt>如何自定义这个列表</dt>
<dd>打开 freeshare/sharethis/sharethis.js, 你应该能够很快看到储存社交站点数据的数组，修改吧！记得每个站点的图标文件</dd>
<dt>有插件的选项页面么？</dt>
<dd>没，至少这个版本没有</dd>
</dl>
<h3>更新日志</h3>
<dl>
<dt>1.0</dt>
<dd>FreeShara第一次发行</dd>
</dl>
</div>
]]></content:encoded>
			<wfw:commentRss>http://pagetalks.com/2010/03/21/wordpress-plugin-free-share.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Enable Thickobx in WordPress</title>
		<link>http://pagetalks.com/2008/08/29/enable-thickobx-in-wordpress.html</link>
		<comments>http://pagetalks.com/2008/08/29/enable-thickobx-in-wordpress.html#comments</comments>
		<pubDate>Fri, 29 Aug 2008 09:07:44 +0000</pubDate>
		<dc:creator>Robin</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[experience]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[js]]></category>

		<guid isPermaLink="false">http://pagetalks.com/?p=59</guid>
		<description><![CDATA[众所周知，WP2.3以后的版本其中都内置了jQuery的库，而WP2.5已在后台用了Thickbox！那么我们为何不在前台利用Thickbox来改善站点的用户交互体验呢？ 脚本在哪里？ 既然已经内置了，那么这些东西... ]]></description>
			<content:encoded><![CDATA[<p>众所周知，WP2.3以后的版本其中都内置了jQuery的库，而WP2.5已在后台用了Thickbox！那么我们为何不在前台利用Thickbox来改善站点的用户交互体验呢？</p>
<h3>脚本在哪里？</h3>
<p>既然已经内置了，那么这些东西都在哪呢？我们来查看管理页面的代码，会在HEAD部分发现如下两行：</p>
<pre>&lt;script type='text/javascript' src='http://www.elfvision.com/blog/wp-includes/js/jquery/jquery.js?ver=1.2.3'&gt;&lt;/script&gt;
&lt;script type='text/javascript' src='http://www.elfvision.com/blog/wp-includes/js/thickbox/thickbox.js?ver=3.1'&gt;&lt;/script&gt;
</pre>
<p>以上就是我们调用Thickbox所需要的脚本。如果你想使用和后台一样风格的Thickbox，可以直接引用后台中Thickbox的定义：</p>
<pre>&lt;style type='text/css' media='all'&gt;
@import 'http://www.elfvision.com/blog/wp-includes/js/thickbox/thickbox.css?1';
div#TB_title {
background-color: #222222;
color: #cfcfcf;
}
div#TB_title a, div#TB_title a:visited {
color: #cfcfcf;
}
&lt;/style&gt;</pre>
<p><span id="more-59"></span></p>
<h3>添加他们</h3>
<p>现在找到你使用的Theme下面的header.php，找到如下代码：</p>
<pre>&lt;?php wp_head(); ?&gt;</pre>
<p>在其之后添加上文找到的JS和CSS代码，这样你就可以正常地在前台页面里面调用thickbox了。当然，你可以实用Wordpress的内置函数来加入jQuery脚本。Wordpress其实已经内置jQuery的脚本库。</p>
<pre>&lt;?php wp_enqueue_script('jquery'); //Include jQuery ?&gt;</pre>
<h3>注意一些不同之处</h3>
<p>由于WP的开发小组为WP后台程序重新修改过thickobx的JS代码，所以使Thickbox的窗口有很大的不同。如果你想使用自己订制的，就不能按照上文所说的方法直接指向WP内置的相关脚本。你需要在HEADER部分链接自己的thickbox.js和thickbox.css文件。<br />
即时你使用的是WP原版的thickbox，你会发现直接调用，thickbox窗口右上角的&#8221;Close&#8221;按钮的图片无法显示。不用怀疑，绝对是相对地址所造成的问题。<br />
打开<br />
果然，我们可以找到图片都是相对引用，在不同的位置引用会造成URL错误。<br />
<code>var tb_pathToImage = "../wp-includes/js/thickbox/loadingAnimation.gif";<br />
var tb_closeImage = "../wp-includes/js/thickbox/tb-close.png";</code><br />
将他们更改为绝对地址的引用，例如：<br />
<code>var tb_pathToImage = "http://www.elfvision.com/blog/wp-includes/js/thickbox/loadingAnimation.gif";<br />
var tb_closeImage = "http://www.elfvision.com/blog/wp-includes/js/thickbox/tb-close.png";</code></p>
<p>OK，到这里，我们又榨干了WP的血。其实WP已经有Thickbox插件了，我们动手操作的意义何在？<br />
那是因为thickbox插件使用的是插件目录下的jQuery和Thickbox文件，意味着浏览者会下载双份的Js和CSS文件，无疑是浪费资源。而且，插件的jQuery文件不会随着WP的更新而更新……<br />
其实如果我有能力会编写一个在WP2.5下面，并且根据本文思路的Thickbox插件……可惜我不太会PHP，哪位有兴趣的朋友可以来试验一下。</p>
]]></content:encoded>
			<wfw:commentRss>http://pagetalks.com/2008/08/29/enable-thickobx-in-wordpress.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Pictures Are Not Simple</title>
		<link>http://pagetalks.com/2008/08/29/pictures-are-not-simple.html</link>
		<comments>http://pagetalks.com/2008/08/29/pictures-are-not-simple.html#comments</comments>
		<pubDate>Fri, 29 Aug 2008 08:01:40 +0000</pubDate>
		<dc:creator>Robin</dc:creator>
				<category><![CDATA[Technique]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[gif]]></category>
		<category><![CDATA[image]]></category>
		<category><![CDATA[jpg]]></category>
		<category><![CDATA[png]]></category>
		<category><![CDATA[svg]]></category>

		<guid isPermaLink="false">http://pagetalks.com/?p=32</guid>
		<description><![CDATA[前几天看到Soulman在他的站上直接用PNG格式做的一幅大图作为Bannar，效果是可想而知的，我等了近半分钟，图片还为显示。网页窗口的很大一部分持续呈现空白，这不是设计师想要得到的。于是... ]]></description>
			<content:encoded><![CDATA[<p>前几天看到Soulman在他的站上直接用PNG格式做的一幅大图作为Bannar，效果是可想而知的，我等了近半分钟，图片还为显示。网页窗口的很大一部分持续呈现空白，这不是设计师想要得到的。于是乎，有人开始思考，到底该如何将设计出来的作品有效的发布在网络上呢？在这里，图片文件格式的比较就很有必要了。<br />
如今网络上流传着多种图片格式，例如BMP、JPG（JPGE）、PNG、GIF等。其中JPG和GIF最为广泛，PNG由于最近才得到IE7的正式支持，许多设计师对于这种格式在IE7之前都是比较谨慎的。<br />
<span id="more-32"></span></p>
<h3>几种格式的理论分析</h3>
<dl>
<dt>JPG格式</dt>
<dd>JPEG 图片以 24 位颜色存储单个光栅图像。JPEG 是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的。渐近式 JPEG 文件支持交错。<br />
可以提高或降低 JPEG 文件压缩的级别。但是，文件大小是以图像质量为代价的。压缩比率可以高达 100:1。（JPEG 格式可在 10:1 到 20:1 的比率下轻松地压缩文件，而图片质量不会下降。）JPEG 压缩可以很好地处理写实摄影作品。但是，对于颜色较少、对比级别强烈、实心边框或纯色区域大的较简单的作品，JPEG 压缩无法提供理想的结果。有时，压缩比率会低到 5:1，严重损失了图片完整性。这一损失产生的原因是，JPEG 压缩方案可以很好地压缩类似的色调，但是 JPEG 压缩方案不能很好地处理亮度的强烈差异或处理纯色区域。<br />
JPG格式的优点可想而知，它能够在不大量损失画质的情况下实现不同比率的压缩，再加上24位全彩的支持，使他成为目前照片储存的标准格式（在Very High模式下，其质量已经和RAW不分上下，但是体积上JPG有绝对优势）。对于网页设计师来说，当JPG文件以Progressive模式压缩时支持交错，这个特性使它能同GIF一样，有从模糊到清晰的显示过程。<br />
JPG格式的致命伤也正是由于它的有损压缩，它的压缩损失是不可恢复的，而且当一幅JPG文件多次被修改，并再次保存时，它也就经历了多次质量损失，这个过程是积累性的。</dd>
<dt>GIF格式</dt>
<dd>GIF(Graphics Interchange Format)的原义是“图像互换格式”，是CompuServe公司在 1987年开发的图像文件格式。GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50％左右，它不属于任何应用程序。目前几乎所有相关软件都支持它，公共领域有大量的软件在使用GIF图像文件。GIF图像文件的数据是经过压缩的，而且是采用了可变长度等压缩算法。所以 GIF的图像深度从lbit到8bit，也即GIF最多支持256种色彩的图像。GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。<br />
众所周知，GIF主要分为两个版本，即GIF 89a和GIF 87a；前者支持多幅图片组成动态画面，这就是当今网络上流行的动画图片格式。尽管这种格式在网络上流传的很泛滥，它实际上是一种比较过时的格式，因为它仅支持256色，并通过抖动来“模拟”出更多色彩。网页设计师在早期使用GIF的理由大多是为了它的透明背景功能。
<dd>
<dt>PNG格式</dt>
<dd>PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG&#8217;s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。<br />
PNG格式的诞生和JPG与GIF密不可分，它就是为了弥补两个前辈的不足而诞生的。它同JPG一样支持压缩比率、Progressive模式压缩，与GIF一样有256色模式。还有诸多算法上的特性在此就不必指出，作为网页设计师，必须记得的是，PNG同时支持真彩色和16位Alpha通道。</dt>
</dl>
<h3>三种格式在照片环境下的对决</h3>
<p>选择的图片原件是未经处理的JPG文件，大小在经过25%缩放后为1.7MB。以下我选择了三种格式非常常用的设定来进行横向比较，下面那副图片以PNG格式保存，可以忽略质量的再次损失。</p>
<p>GIF设定：128位抖动，这是一个GIF中非常高的设定。<br />
JPG设定：质量为High（60），这个设定不高不低，通常我压缩图片可能会用95的质量。<br />
PNG设定：24位真彩，PNG的标准设定。</p>
<p><a href="http://pagetalks.com/wp-content/uploads/2008/08/image_4tpye.png"><img src="http://pagetalks.com/wp-content/uploads/2008/08/image_4tpye.png" alt="" title="Images Types Comparision" width="594" height="561" class="aligncenter size-full" /></a></p>
<p>从上图可以看出，GIF格式图片和原图相比已经出现了颗粒感，影响了表现；JPG格式相当接近原画，虽然细节表现上有一定损失；PNG格式文件则通过肉眼无法直接辨别两者的区别。<br />
质量上来看，PNG是毫悬念的冠军，但是文件大小上PNG竟然有964K，相比之下JPG格式的109K、GIF格式的211K是毫无优势可言的。大家如果注意GIF格式的大小和效果，你会发现GIF根本不适合作为照片文件的储存格式。也就是说，如果你的网页上面要讲色彩细节丰富的图片作为背景，那么GIF绝对不可以选，PNG格式则太臃肿，而JPG可以提供非常廉价的折中选择。</p>
<h3>简单文件的比较</h3>
<p>图片格式和相应参数和上次一样，这次我们来看看这三种格式对简单图案的细节的表现。大家一定会说，”这还用比？肯定是PNG&gt;JPG&gt;GIF“的结果么！”好吧，我们边走边瞧。</p>
<p><a href="http://pagetalks.com/wp-content/uploads/2008/08/image_4tpye_2.png"><img src="http://pagetalks.com/wp-content/uploads/2008/08/image_4tpye_2.png" alt="" title="Images Types Comparision 2" width="600" height="568" class="aligncenter size-full" /></a></p>
<p>你必须得相信你的眼睛，在这种环境下，GIF、PNG与原版设计图片毫无区别，但JPG竟然出现了澡点！如果你仔细阅读了前文对JPG格式的描述，那你应该可以预测到这个结果。<br />
再来看看文件大小，原文件PSD档680K，GIF格式文件15K、JPG格式文件38K，PNG格式文件44K。综合来看，GIF完胜PNG和JPG！希望你的下巴没掉到地上&#8230;&#8230;</p>
<h3>谈谈文件的选择</h3>
<p>文章到此处，我们已经可以得出这样的结论：1、需要表现丰富色彩的细节，例如照片、CG之类可以选择JPG；2、当想插入简单图案，色调单一的图像（图案）可以选择GIF。<br />
那么我们完全把PNG忽视了？<br />
别忘了我们之前说过PNG文件的两大特点：无损压缩真彩色和16位Alpha通道！光一个“无损”压缩就可以让它成为众多图片处理软件的最佳保存格式，而它的16位Alpha通道则使网页的表达千变万化。你可能又要问，GIF也支持透明啊，我为什么要用PNG？<br />
GIF的确支持透明，但有本事让他搞个半透明？看看下面这副图片。原图是在Photoshop中以较低的硬度用笔刷点下的一个点，相当于一个透明度延半径方向线性降低的一个圆。这其中当然就包括程度不同的透明度。结果很明显，GIF文件当插入白色背景的背景图片中时，无法体现出透明的层次，反而会用灰色来代替有透明度的像素；但PNG文件则不同，它体现出了透明的层次，并且和背景完美融合。</p>
<p><a href="http://pagetalks.com/wp-content/uploads/2008/08/image_type_png_gif.png"><img src="http://pagetalks.com/wp-content/uploads/2008/08/image_type_png_gif.png" alt="" title="GIF vs PNG" width="120" height="100" class="aligncenter size-full" /></a></p>
<p>PNG的这种特性使它能够处理网页中的阴影、插入不同层次的背景图片等应用。再另一方面，目前在设计图标时，也多用PNG文件储存，为了这些图标（如各种表情图标）能够完美和背景融合，也直接插入PNG格式的文件(但如果你的浏览着大多数都在使用不支持PNG的Alpha通道的IE6，那么就只能用GIF将就，或者使用相应的Hack）。这便是发PNG在网页设计领域无可替代的应用。可以说，把它作为插入照片的首选格式并不是明智的选择，毕竟人们从有损压缩的JPG格式那里可以得到更快的速度。</p>
<p><a href="http://pagetalks.com/wp-content/uploads/2008/08/saveforweb.gif"><img src="http://pagetalks.com/wp-content/uploads/2008/08/saveforweb.gif" alt="" title="Save For Web Dialog 1" width="300" height="306" class="aligncenter size-full" /></a></p>
<p>剩下的最后一个问题是这图片格式质量参数如何选，这个只能根据原文件的质量通过不同质量参数表较而成。现在Photoshop之类的软件都可以提供“为网页优化”的选择，可以方便的进行设置。</p>
<p><a href="http://pagetalks.com/wp-content/uploads/2008/08/saveforweb2.jpg"><img src="http://pagetalks.com/wp-content/uploads/2008/08/saveforweb2.jpg" alt="" title="Save For Web Dialog 2" width="600" height="306" class="aligncenter size-full" /></a></p>
<h3>未来图片格式的进化</h3>
<p>PNG格式的进一步优化无疑是未来的一大亮点。其他方面，更多全新的图形格式也在不断涌现，其中SVG是最引人注目的一个。</p>
<blockquote><p>SVG是一种矢量图形格式，SVG提供了GIF和JPEG所不能提供功能优势：</p>
<ol>
<li>放大　用户可以任意放大图形显示，但不会牺牲锐利度、清晰度、细节等。</li>
<li>文字状态依然保留　文字在SVG图像中保留可编辑和可搜寻的状态。没有字体的限制，用户将会看到和他们制作时完全相同的画面。</li>
<li>小文件　平均来讲，SVG文件比那些JPEG和GIF格式的文件要小很多，因而下载也很快。</li>
<li>显示独立性　SVG图像在屏幕上总是边缘清晰，并且可以使用你打印机的分辨率进行打印。不论是300 dpi，600 dpi还是更高，你都不会体验到难看的锯齿的点阵效果。</li>
<li>超级颜色控制　SVG提供一个16百万颜色的调板，支持ICC颜色描述<br />
文件，RGB，渐变和蒙版。</li>
<li>交互性和智能化　因为SVG是基于XML的，它提供无可匹敌的动态交互性。SVG图像可对用户的动作通过高光显示、工具技巧、特殊效果、声音和动画进行反应和显示。</li>
</ol>
</blockquote>
<p>虽然SVG的草案已经修订出来了，但是相应的软件支持还相当少，目前主流浏览器都不支持SVG。总之SVG能够带来更多的应用，可目前它离普及还有很远的一段路要走。</p>
]]></content:encoded>
			<wfw:commentRss>http://pagetalks.com/2008/08/29/pictures-are-not-simple.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
<!-- WP Super Cache is installed but broken. The path to wp-cache-phase1.php in wp-content/advanced-cache.php must be fixed! -->
