欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

关于创建Web图像时应记住的五个要素

程序员文章站 2024-01-10 23:02:04
1. 格式与下载速度 当前,Web上用的最广泛的三种格式是GIF、PNG和JPEG。我们的目标是选择质量最高,同时文件最小的格式。 WebP图像格式 谷歌建立了另一种图像格式,名为WebP。 这种格式既支持有损压缩也支持无损压缩,它产生的文件大小也远小于JPEG和PNG。跟PNG一样,它还支持alp ......

1. 格式与下载速度

当前,web上用的最广泛的三种格式是gifpngjpeg。我们的目标是选择质量最高,同时文件最小的格式。

关于创建Web图像时应记住的五个要素

webp图像格式

谷歌建立了另一种图像格式,名为webp

这种格式既支持有损压缩也支持无损压缩,它产生的文件大小也远小于jpegpng。跟png一样,它还支持alpha透明。

 

2. 颜色

大多数计算机显示器可以显示数以百万计的颜色 ,但也有例外的情况。

有的图像格式的调色板是有限的gifpng-8图像只256种颜色,对标志和图标来说通常这已经足够了

jpegpng-24png-32均支持超过1600万种的颜色,因此照片和复杂的插图应选择这些格式

不过,需要指出的是,对于这些图像,大多数情况下应使用jpeg

3. 大小(尺寸)

对于网站上的图像,多大合适呢?

简单地说 ,通常应控制在几百个像素宽

可缩放矢量图形(svg

对于使用svg图像语言创建的图像,无论放大还是缩小都不会影响其质量(以及其他的一些参数)。

而且,对于某个svg图像来说,无论它在页面中显示的尺寸是多大,其文件大小总是恒定的。

目前,几乎所有的现代浏览器都提供基本的svg支持

 

4. 透明度

可以利用透明度为图像创建非矩形的边缘,在图像的下面设置背景色或图案

pnggif都支持透明度,jpeg则不支持。

gif格式中,一个像素要么是透明的,要么是不透明的。这称作索引色透明index transparency)。

png则既支持索引色透明,又支持alpha透明alpha transparency)。alpha透明可以控制一个像素透明的程度

也就是说,一个像素可以部分透明,而非要么透明要么不透明

这意味着具有复杂透明背景的图像使用png的效果要好于使用gif的效果,因为使用png可以让边缘变得平滑,避免产生锯齿

png-8既支持索引色透明,也支持alpha透明 ,但需要使用fireworks这样的程序才能将图像保存为png-8格式。

photoshop不支alpha透明的png-8,但支持alpha透明的png-32

这也是万维网上大多数透明pngpng-32的原因。总之 ,对于透明图像,应使用png-8png-32。后者允许使用超过256种颜色。

关于创建Web图像时应记住的五个要素

 

5. 动画

动画可以保存为gif,但不能是jpegpng。实际上,使用图像表现动画已经用得越来越少了

(一种例外的情况是那些好玩gif动画,它们在tumblr这类网站相当流行。)

我们通常使用css动画、javascripthtml5 canvassvgflash创建动画

近几年,使用flash创建的动画越来越少了。这主要是由于ios不支持flash,且其他标准的web技术的能力和浏览器支持程度都提升了很多。