精湛的企业网站建设,学习网站建设的网站,网站横幅怎么制作教程,毕业设计网站建设题目目录#xff08;1#xff09;矢量图#xff08;2#xff09;位图 2.1 分辨率2#xff0c;图像格式格式选择建议#xff1a;#xff08;1#xff09;矢量图
被定义为一个对象#xff0c;包括颜色#xff0c;大小#xff0c;形状#xff0c;以及屏幕位置等属性…
目录1矢量图2位图 2.1 分辨率2图像格式格式选择建议1矢量图
被定义为一个对象包括颜色大小形状以及屏幕位置等属性
矢量图的优点 能够在任何缩放比例下呈现出细节同样清晰的展示效果。
矢量图的缺点对细节的展示效果不够丰富对足够复杂的图像来说 比如要达到照片的效果若通过svg进行矢量图绘制所的的文件就会大得离谱。
2位图
是通过对一个矩阵的栅格进行编码来表示图像每个栅格只能编码表示一个特定的颜色对于一个照片像素点越多那这个照片就会越清晰。
但随着像素点越多图像文件就会越大 在一定网络速度的前提下下载完一张图像就会更慢。
对于性能的考虑在使用图像时必须要考虑对图像进行压缩采用什么样的图像格式使用什么样的压缩算法以及压缩到何种程度。 2.1 分辨率
在代码css中我们经常为图像设置显示所需的长度像素值但在不同的设备屏幕上有时候相同的图像以及相同的设置其渲染出来的图像清晰度会有所差别产生这个现象的原因涉及到两种不同的分辨率 屏幕分辨率和图像分辨率。
图像分辨率表示该图像文件所包含的真是像素值信息比如200px * 200px就定义了长宽各200个像素点的信息。
设备分辨率显示器屏幕所显示的最大像素值。
两者有何不同
10px ** 10px 的图像分辨率既可以使用10px ***10px的屏幕来显示也可以使用20px ** 20px 的屏幕显示。
更高的设备分辨率有助于显示更加绚丽多彩的图像。
为了能在不同的分辨率下使项目中所包含的图像都能得到恰当的展示效果可以利用picture标签和srcset属性提供图像的多个变体。
用于插入图像的img标签有一个srcset属性可以用来针对不同设备提供不同的分辨率的图像文件
img srcphoto.jpg srcset photo2x.jpg 2x,photo3x.jpg 3x,photo4x.jpg 4x
在srcset属性可以设置多种分辨率的图像文件以及使用条件浏览器在请求之前便会对其进行解析只选择最合适的图像文件进行下载如果浏览器不支持那么就可以在src中包含默认的图像文件。
使用picture标签则会在多图像文件选择时获得更多的控制维度比如屏幕方向设备大小屏幕分辨率。
picture
source media (min-width: 800px) srcsetphoto.jpg pthot2x.jpg 2x/source
source media (min-width: 400px) srcsetphoto-s.jpg pthot-s2x.jpg 2x/source
/picture
picture标签或许会有兼容性问题。
2图像格式
不同的图像格式在于他们进行有损压缩和无损压缩过程中采用了不同的算法组合。
格式选择建议
