网页上常用的素材种类

打开任何一个网页，网页你最先注意到的上常素材往往不是代码，而是种类那些看得见、点得着的网页东西——图片、图标、上常素材按钮、种类视频。网页这些东西统称为“网页素材”。上常素材它们不是种类随便堆上去的，每一种都有自己明确的网页岗位。

图片：最基础的上常素材视觉材料

JPG、PNG、种类WebP、网页SVG，上常素材这几个格式几乎覆盖了九成以上的种类网页图片需求。JPG适合照片，压缩率高，但边缘会有噪点；PNG支持透明通道，做Logo或者带透明背景的插画很合适，代价是文件偏大。WebP是Google推的，同等画质下比JPG小30%左右，现在主流浏览器都认。SVG不一样，它是矢量图，放大缩小都不糊，适合图标和简单图形，代码里直接写<svg>标签就能渲染，连图片请求都省了。

我见过不少新手把一张2MB的PNG直接扔到首页轮播图位置，结果手机用户打开页面要等好几秒。图片素材的第一原则不是好看，是“别拖慢页面”。

图标：小尺寸，大讲究

图标（Icon）和图片是两回事。图标讲究识别效率，一个放大镜代表搜索，一个房子代表首页，用户不需要思考就能理解。以前大家用雪碧图（CSS Sprite）把几十个小图标拼成一张大图，靠background-position来定位，减少HTTP请求。现在更流行图标字体（比如Font Awesome）或者直接内联SVG。图标字体用起来像文字，可以改颜色、改大小，但加载一个几百KB的字体文件只为用其中五六个图标，有点浪费。SVG图标更轻，还能单独控制每个路径的颜色。

视频与动图：注意性能代价

首页放一段自动播放的背景视频，视觉冲击力确实强。但一个10秒的1080p视频，压缩后可能也有3到5MB。移动网络下，用户可能直接关掉页面。GIF动图更麻烦，它没有音频轨道，但文件体积往往大得离谱——一个5秒的GIF轻松超过2MB。现在更推荐用<video>标签加无声的MP4或WebM，体积能小一半以上，还能用poster属性指定封面图，避免加载时一片空白。

按钮与表单控件：交互素材

按钮算素材吗？算。它的背景色、圆角、阴影、悬停状态，都是设计素材的一部分。一个常见的坑是：设计师给了一张按钮的PNG图片，前端就得为不同状态（正常、悬停、按下、禁用）各切一张图。更好的做法是用CSS直接写样式，改起来快，适配不同屏幕也方便。表单里的输入框、下拉菜单、复选框，同样属于交互素材，它们的默认样式在不同浏览器里长得不一样，通常需要重置或自定义。

字体：容易被忽略的素材

网页字体（Web Font）也是一种素材。系统自带的宋体、黑体、微软雅黑，加载快但选择少。用Google Fonts或者自己托管字体文件，能获得更统一的视觉风格。但中文字体文件动辄几MB，不可能全量加载。常见做法是只取用到的字符做子集化，或者标题用特殊字体、正文用系统字体。我见过一个页面加载了四种中文字体，首屏文字等了三四秒才从默认字体切换过去，体验很割裂。

背景与纹理：氛围素材

纯色背景太单调，很多设计会用渐变、几何纹理、噪点图来增加层次。这类素材通常尺寸不大，但要注意平铺时的接缝问题。CSS的linear-gradient和radial-gradient能直接生成渐变，不需要图片。噪点可以用SVG滤镜或者一张极小的PNG反复平铺。纹理图尽量控制在几十KB以内，否则为了氛围牺牲加载速度不划算。

素材的选择和优化，直接决定了一个网页是“打开就舒服”还是“等半天才出来”。技术控看页面，第一眼是Network面板里的请求数和体积，第二眼才是设计。两者都过关，才算合格。

(责任编辑：热点)