Web设计小组介绍:


网络上的图像使用



图像是人们觉得无法从网站中排除的一个设计元素。在大多数情况下,图像在正确使用时确实会增强和添加到站点中,然而,当图像被滥用时,它们可能会破坏一个原本富有创意和信息丰富的站点,并确保访问者不会回来。

可用主题


JPEG-vs-GIF?

具有各种经验的网页设计师经常会问这个问题。要记住的最简短的规则是:

“大量颜色,JPEG…纯色或无渐变,GIF。”

关于GIF和JPEG图像格式,首先要了解的是它们都是基于压缩的格式。换句话说,他们获取未压缩的图像,如位图图像,并将其压缩到较小的文件大小。这种转换的通常结果是图像尺寸大大缩小。

它可能会似乎一种压缩方法总是会导致较小的文件大小,但事实并非如此。GIF格式非常适合压缩颜色相对较少且没有渐变的图像。事实上,以GIF格式保存的大多数小型网络图形都不应超过10kb。现在在图像的世界里。。。那太小了!相比之下,JPEG压缩在颜色较少且没有渐变的情况下,通常会产生比GIF对应图像更大的图像,并且会出现明显的退化。

如前所述,每种格式都有其独特的优势。虽然GIF可能会以非抖动、较少的彩色图像取胜,但JPEG是抖动连续色调图像的王者。连续色调图像具有从一种颜色到另一种颜色的平滑过渡或混合。照片就是一个很好的例子。很少有单一颜色的图片。对象上有许多颜色变化、阴影甚至颜色渐变。所有这些浮动的颜色和阴影都需要JPEG格式。

如果您对更多技术细节感兴趣,请查看JPEG常见问题或访问图形页面。请记住,如果您试图优化站点的性能,请以两种格式保存每个图像,然后进行比较,以确定在特定情况下哪种图像最好!

在Windows95中使用与Photoshop兼容的过滤器进行此操作的一个简单方法是PhotoImpact的Smart Saver它允许您在做出最终决定之前预览图像和大小。此工具在创建下面讨论的透明图像时也很有用。


透明 图像

透明图像是指其背景允许页面背景显示通过的图像,因此图像周围似乎没有可见的边框。当页面的背景颜色与图像的背景颜色不同时,这很有用。如果没有透明度,图像周围会有一个边框,但当使用透明度保存时,图像看起来会在页面背景上浮动。目前唯一支持透明的格式是GIF和PNG格式。

例子:

非透明圆
非透明

透明圆形
透明

透明图像的一个问题是,并非所有浏览器都能正确显示它们。一些较旧的浏览器无法区分GIF87非透明格式和GIF89a透明格式之间的差异,将显示原始背景色。因此,图形艺术家需要尝试使图像的背景色与预期页面的背景色相同,即使他们以透明格式保存图像也是如此。

您可以在以下位置找到透明图像的“操作方法”:


交错

与非交错图像相比,交错图像容易被发现。对于那些不知道区别的人,请密切关注,因为你的视力取决于此!交错是在一系列过程中绘制图像的过程,而不是同时绘制所有图像。第一遍跳过一定数量的行,然后在连续的遍中填充跳过的行。这会产生一个开始模糊然后聚焦的图像,而不是从上到下绘制图像。

交错的图像开始时可能很模糊,但使用它们有两个非常独特的原因。首先,他们给客户一些东西看,而不是空白。这会对客户的注意力产生捕获作用。其次,随着图像逐渐淡入,客户可以决定他们是否愿意留下来看看图像的其余部分,或者干脆继续。

为什么不交错所有图像?嗯,和生活中的其他事情一样,总是有一个折衷的方法。交错通常会增加图像大小,所以尽管它们可以预览。。。他们确实会等待更长的时间来完成图像。这通常是可以接受的,除非图像太小以致于隔行扫描图像没有意义,而且令人惊讶的是有时实际上也会隔行扫描减少非常小的图像上的文件大小。

我的眼睛怎么了?!已经确定。。。电脑显示器也有交错和非交错两种。交错的监视器在每个连续的过程中每隔一条线绘制一条线,从而产生轻微的闪烁效果。你可能看不见它,但它确实会给你的眼睛带来更大的压力。如果您不确定您的显示器是否隔行,并且您有摄像机,请通过摄像机的目镜查看显示器。。。如果你看到它闪烁的交错!因此,如果你正在寻找一个新的显示器,请确保它明确表示它是非交错的!


动画Gif

动画Gif利用了Gif格式包含多个图像的能力。它们是通过拼接单独的帧并在不同帧的显示之间指定延迟时间来创建的。以这种方式,图像可以显示为动画,也可以显示为处于更改状态。

动画gif在万维网上用于小图标和徽标时最有效。当动画gif用于创建大图形时,文件大小通常禁止在网上使用。动画也可以通过在网页中插入Java Applets和其他基于插件的技术来实现,然而,动画gif通常要小得多,可以在更多客户端浏览器上工作,而不需要插件应用程序支持。

使用动画gif需要注意一些事情。首先,并非所有浏览器都支持它们。不支持这种类型gif的浏览器只会显示其中多个帧中的一个帧。这意味着必须仔细构建图像,以便与不支持的浏览器一起使用。还要记住,那些不支持的浏览器仍然必须下载整个gif才能显示它。

其次,使用动画gif会导致许多较旧的浏览器不断在状态栏中闪烁消息。这已经成为许多Web用户的一大抱怨,因为闪烁的状态栏妨碍了预览超链接将指向的位置。

最后,如果在考虑了所有这些因素之后,它是动画gif,请查看以下资源:


主页,论坛,参考,工具,常见问题解答,文章,设计,链接

版权© 1996 - 2006.Web设计组保留所有权利。