预览模式: 普通 | 列表

http://cssrain.cn

Fireworks vs Photoshop Compression
Fireworks 与photoshop的图片优化能力比较

Surprisingly enough, based on the findings from my recent survey there are quite a bit of Fireworks users. Personally, I never used Fireworks. Photoshop is alway my first choice for designing—from image editing to designing mock-ups. But, did you know that Fireworks is way better than Photoshop in term of image compression? I’m not a software engineer, I can’t explain why Fireworks can compress better. But I can prove it to you by showing a series of experiments I did.
简单说作者是一直坚持用photoshop的,无论做网页设计还是图片优化都是如此,但作者经实验实际发现fireworks在图片优化上有很好的性能

PNG Compression
以PNG格式优化输出的比较

For testing purpose, I used an un-compressed image with transparency. I used Photoshop to export the image to PNG-24 with transparency and the resulting file size is about 352 kb. Then I used the same image and exported it to PNG-32 with Fireworks. The file size is about 332 kb. Visually, they both look the same (at least to me). In term of file size, the image exported with Fireworks is about 20 kb less.

如下图效果:photoshop以png24格式输出,fireworks以png32输出,(不羁虫:个人认为这2个格式在2个软件里输出格式名称不同,实际是相同的,我把ps导出的png24格式拖到fs里打开就是png32格式,而fs里还有一个png24格式输出,个人感觉fs里的png24类于优化质量100%的jpg,有时kb数比jpg稍微小一些)实际得出fireworks得到的图片尺寸比photoshop要小20kb
(不羁虫:应该说图片的品质是一样的,我是没看出差别来)




GIF Compression
以GIF格式优化输出的比较

Next I exported the image to GIF 256 colors, adaptive, with no dither. The results are: Fireworks = 88kb, Photoshop = 92kb. That is 4 kb less. Also, they don’t look the same. I prefer the image exported with Fireworks because it has more image details.
如下面图所示,这次以gif256色导出图片,结果fireworks88kb,photoshop92kb,从尺寸上来看只相差4k而已,但是从导出的图片细节来看,fireworks导出的图片细节更多,看上去效果更好




JPG Compression
以JPG 格式优化输出的比较

Now, I’m going to try the JPG compression with a different image. I exported the image with Photoshop to 60% quality JPG and the file size is 80 kb. Then I exported the same image with Fireworks to 80% quality JPG and the result is 72 kb. Both exported images look pretty much the same, but Fireworks beats Photoshop by 8 kb in this case.
如下图:最后是以jpg格式输出的比较,在photoshop以品质60%导出,fireworks下以品质80%导出,(不羁虫:作者的体会和我一样,这2个软件导出品质不同,ps里的60%效果相当于fs里的80%),图片看上去效果差不多,不过尺寸上还是fireworks胜出,fs72kb,ps80kb。



Please note: Fireworks and Photoshop have different compression technology. 80% compression rate in Fireworks is relevant to Photoshop 60% compression rate.

What Is The Big Deal?
有什么大问题?

You’re probably thinking: what is the big deal? It is only a few kilobytes… Well, don’t under estimate the little difference in kilobytes, it can make a big difference on your bandwidth and load time. Lets use the background image on WebDesignerWall as an example. If I export the background with Fireworks, I can reduce its file size by 20 kb. I get about 16,000 visits per day on average. 20 kb x 16, 000 = 320, 000 kb. Yes, that is 320 megabytes per day! I’m only talking about the background image here. Could you imagine how much bandwidth I can save if I compress all the graphics on the site with Fireworks? Most importantly, I can make my site load faster and that is a big deal!
这段想法是比较深远滴,我就半参着自己的想法讲了可能从优化上来讲,从上面的实验我们可以看到,一个图片优化下来想得到同样效果的图片,ps和fs虽然只差3,5k(视图片尺寸和格式,尺寸越大的图片,这个差距应该是越大),但如果整站下来,你会发现,fs优化后得出的图片尺寸整体要比ps要小很多,而从单个图片来看,如果一个图片能小20kb,而你的网站每天的访问量如果是1万6,那网站所要承担的流量差距是:20k*16000=320m,而从用户体验上来讲,更快的下载将给浏览者带来更好更快的加载效果,更好的用户体验,这是个很大的问题!




Conclusion
结论:
If you have Photoshop and Fireworks installed on your computer, try it yourself. You will be surpised with the results. From now on, I’m going to use Fireworks to export my web graphics, particularly the template graphics.
不用说了,如果你还在使用ps优化网页图片的话,赶紧换用fireworks吧,ps不是万能的,用fs优化图片的、将得到更好的效果,而且优化图片的方式你会发现ps的切片将会让你的优化操作更快更准确


最后,我觉得很讽刺也比较可笑的是:
我想作为大多数fs用户着来讲,很多还和我一样,停留在使用fireworks8的阶段,
对adobe这几年对fs的更新实在是很失望,
cs3,cs4里实在是没有太多有用的东西,
除了添加了不能兼容的ps图层效果和一些莫名其妙的多页面导出方式之外,
真没有看到什么有用的更新,
而且安装文件的大小是成倍的往上翻,真是很adobe,
可以说adobe对fs的态度基本是不改进也不丢弃,fs完全处于不死不活的状态,

可是当你真正熟悉fireworks时,你会发现在fs里做个web2.0的按钮是多么的方便快捷,
虽然只是8.0版,2005年上市的软件,但图片的优化能力,现在的ps根本没法比,这确实是个讽刺,
当然使用8.0版还有一个好处,估计adobe是不会来向你收版权费,
呵呵,毕竟fireworks8.0还是属于MacroMedia,没有什么adobe验证措施,
你就是全公司办公人员装了fs8.0,adobe也不会来向你要版权费

希望越来越多的网页前端工作者加入使用fireworks的行列,
当你熟悉他以后,你会发现fireworks才是真正为网页设计及优化而生的软件

分类:学习专栏 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1

1.尺寸

  a)800*600能照顾到所有网友的电脑,但相当是张“小报”。

  b)1024*768渐成主流。1024*768能比800*600多出一栏的信息。

  c)正文页采用自适应设计,能在正文页做更多相关内容。首页也可以尝试自适应的设计。自适应设计的核心是要留出宽度伸缩自如的栏。

查看更多...

分类:网页技术 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2

个人知识管理的29个原则

1、持续的学习成为个人生存和发展的基础。持续学习不一定能带来成功,但不学习一定失败。

2、信息和知识爆炸,在一段时间和时期内,学习的内容必须聚焦。起码要在一个领域内成为专家。

3、你应该学习的内容取决于你的价值观、特长、个性和目标。

4、你必须学会如何有效的评估信息和知识,所以你必须根据你的价值观、特长、个性和目标确立自己对信息和知识的“过滤器”;

查看更多...

分类:收藏专栏 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 0

网站改版需要注意的六个问题

网站改版,如何改?如果只是设计、功能和栏目等的稍微变动,这些很简单,从技术上说并没有多少难度。只是对于网站本身的发展来说,没有多大的作用,尤其是一些存在很严重的对搜索引擎不友好问题的网站,没有针对性的改版,相当于只给网站换了一个外壳,治标不治本。网站遭遇发展瓶颈时候,是需要改版还是重新建设?不管是改版还是重建,都需要先进行分析诊断,找出问题所在进行有效的优化改版,而不是盲目的去重新建设新的网站。事实上,倘若不是存在着很严重问题的网站,经过网站优化后,都能取得更好的发展。

对于国内很多没有经过优化的网站来说,网站改版相当于网站的二次重建。针对改版的策划方案,对于改版是否成功起着至关重要的作用。网站改版方案的策划,不仅仅要涵盖前台设计,功能模块设计,栏目设计,数据库设计,团队合作等各个环节,还需要把搜索引擎优化的思想结合在里面。使网站系统完善的同时,增加用户友好度和搜索引擎友好度。

以下是针对网站改版可能遇到的几种情况以及建议,仅做参考:

一、网站改版选择什么样的内容管理系统(CMS)

查看更多...

分类:网页技术 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 0

设计网页的23条有用技巧

在网络设计领域关于Eye-Tracking的研究十分火爆,但是如何把这些研究结果转变为具体可行的设计来运作依旧是个难点。以下就是一些来自于Eye-Tracking研究结果的窍门,可以为改进你的网站设计提供些意见:

1.对比图像,文字更具吸引力

与你所认为的相反,在浏览一个网站的时候,能够直接吸引用户目光的并不是图像。大多数通过偶然点击进入你的网站的用户,他们是来寻觅信息的而不是图像。因此,保证你的网站设计凸现出最重要的信息板块,这才是设计的首要原则。

2.眼球的第一运动聚焦于网页的左上角

查看更多...

分类:学习专栏 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1

windows 环境下配置apache+mysql+php

从三者的官方网站下载最新for windows版本, 分别安装在c:php,  c:mysql, c:apache2下, 安装顺序php, mysql, apache.
1. 安装php. 解压安装文件到c:php. 复制php5ts.dll及ext下的所有文件到c:windowssystem32(数字5以及复制的目标文件夹视php版本及系统不同而不同). 将php.ini-dist复制到c:windows, 并更名为php.ini. 并作如下修改:搜索extension_dir = ./ 这行,并将其路径指到你的PHP目录下的ext目录,比如:extension_dir = C:phpext
2. 安装mysql, 直接setup.exe即可, 安装到正确的目录, 环境变量需要设置, 略过.
3.安装apache. 修改C:Apache2confhttpd.conf这个文件
找到#NameVirtualHost *这一行
修改为:
NameVirtualHost 127.0.0.1
找到:
修改下面几行:
ServerAdmin (你刚才安装时候输入的管理员信箱)
DocumentRoot c:Apache2htdocs
ServerName Apache2
ErrorLog c:Apache2logserror_log
CustomLog c:Apache2logsaccess_log common
找到:
AddType application/x-tar .tgz
在下面添加以下两行:
AddType application/x-httpd-php .php
AddType image/x-icon .ico
找到:
#LoadModule ssl_module modules/mod_ssl.so
在下面添加一行:
LoadModule php4_module C:phpsapiphp4apache2.dll
增加默认文件:
找到DirectoryIndex * 这行,可以这样修改,添加默认的文件名:
DirectoryIndex index.php default.php index.htm index.html default.htm default.html
保存文件, 重启apache
win
 

分类:学习专栏 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2