网页上带文字的图片的处理

WebDesign @ 01 November 2006, “3 Comments”

提到雅虎通Pingme服务的那篇里,我说到网页上的文案内容不该用图片来显示,但是没说为什么,只是加了个链接到W3C的相关规范。现在做个小结,说说把文案放在图片里显示的缺点和应该采用的办法,也算是补记一下笔记。对这方面很熟悉的读者可以不必看了。

  • 图片比文字占用带宽大得多,因为用户在使用带宽质量不好的时候或者在流量计费的情况下会特意关掉图片,但是不应该因此在使用网页上受到影响;
  • 图片不能缩放,视力不好或者显示器分辨率高的用户看起来就很吃力,再说浏览器上对文字放大缩小的功能已经存在很久了;
  • 为了自己工作省力省心,如果文字需要修改或者调整,那么每次修改(包括标点符号),负责文案的都得找你协调,你要重新再做一次,这还不包括不同语言和繁体简体的处理;
  • 除非搜索引擎做了对图片进行OCR或者其他分辨识别功能,否则搜索引擎爬虫是看不到图片里的文字的;

我当时说在IMG的ALT里添加图片上的文案内容其实只是一个勉强和粗糙的办法,最好的办法是用一个HTML元素,比如DIV,将图片的URL放在CSS该元素里的background-image属性里,文字内容就放在HTML里,直接写或者从数据库或者CMS系统提取,这么做基本上弥补了上面讲到的把文案放在图片里显示的缺点,一个例子就是雅虎自己的雅虎收藏+的首页Banner。

当然这种办法也有一些难度,主要有两个:

  1. 需要一定的CSS技巧(比如如何保证放大缩小时外框不会“破”掉,以及保证在跨平台跨浏览器上显示的统一),在此推荐一本好书:Bulletproof Web Design,里面有很多精彩的灵活使用HTML/CSS的方法和技巧。
  2. 不像用图片,使用CSS需要在不同的操作系统下和不同的浏览器里进行测试,这是比较麻烦,但也不是没有办法解决,这里提供一个在线测试页面在不同平台和浏览器下显示的服务:browsershots.org,另一个办法就是使用虚拟机,比如Virtual PC等。

再推荐个我刚刚发现的一个网页设计的专业Blog:淘宝UI团队的Blog,专业、专注,并乐于分享。我自己还没开始用淘宝,不过已经从几个地方听说淘宝的网页设计很专业,很高兴能看到他们也在使用blog这个工具。希望明年的网志年会能有一个专门的技术track,并且有个用户界面和网页标准方面的研讨会,让这样的团队blog跟大家见面和交流。

3 Responses to “网页上带文字的图片的处理”

  1. zola Says:

    淘宝的网页设计确实很专业,以前见过淘宝的网页在裸奔的样子就有这个感觉了。

  2. erning.net Says:

    http://www.uiplanet.com/taobao/ 怎么访问不了 :|

  3. Yining Says:

    Erning: 好像一直都可以访问…

Leave a Reply