400-114-0800

企业邮箱经销商/代理商

网建知识

您当前位置 > 首页 > 文章栏目:网建知识

 

浅谈网站设计当中的图像处理技巧

发表时间:2014-05-04

 

网站设计师们应当注意网站中每个图片的尺寸,检查是否可以将图片的调色板设置为256色或者更少。当然,这也取决于图像和文件格式。网站中有照片、线图和屏幕截图等,每种类型都需要认真处理。这是一项乏味得几乎没人想从事的工作。金华微信平台的工程师们提供一个快捷的方法:打开Firefox并访问你的网站。在浏览器的右下角,可以看到Smush.IT的图标。单击它就会出现一个新的浏览器窗口。这个Web服务会获取网站的所有图片,然后进行压缩。下载经过优化的打包ZIP文件替换服务器中的文件。同样,在其他有图片的页面中进行相应的处理。
 
 
 
QQ截图20140504155716.jpg
 
 
 
假设你有一个论坛。论坛中的人们喜欢使用表情图标来表示自己的感情。因为表情图标很多,你就需要很多不同的图片文件,这增加了每个页面的HTTP请求数。大量的文件下载大大地降低了网站的加载时间。想象一个48×16像素的图片平均分成3列,每一列都是16×16的表情图标:一个是悲伤的表情,一个是高兴的表情,一个是生气的表情,等等。这种单独文件包含了3张图片的方式就是图片聚合。使用CSS的“background—image”和“background—position”属性就可以确定想要显示的图片。例如,在页面上只显示高兴的表情。这样,我们可以将所有的表情都放到一个单独的文件中,极大地减少了HTTP的请求次数和时间。自然,图片聚合得越多,你的受益也就越大。这项技术最早源于计算机游戏行业,适用于一些不经常更新的图片,例如笑脸、箭头、背景图片以及项目符号。我们不推荐在菜单图片上使用这种技术,因为图片可能时不时地发生变化,因此每次你必须小心地进行修改,否则很容易出错。仔细的看看电脑杂志上关于这个话题的讨论吧。
 
最后,关于图片传输的问题,传输图片文件会消耗很多时间。另外,由于浏览器需要自己将图片缩小,这也会消耗一定的时间而且效果不会太好。所以将图片处理好之后再部署到服务器上,有很多的免费工具可以进行图片的处理,例如GIMP和Paint.NET。

随机推荐查看更多