做网页最头疼的不是写代码，，，，，，，而是找图。。。。。。。。找来找去，，，，，，，不是太大就是太糊，，，，，，，要么就是风格跟页面齐全不搭。。。。。。。。今天这篇就专门聊聊网页素材图片这件事，，，，，，，顺便把我在选图、用图上踩过的坑都翻出来说说。。。。。。。。?

先搞懂网页素材图片到底是什么

这里说的网页素材图片，，，，，，，领域挺广的。。。。。。。。布景图、头图、插图、图标、按钮上的幼图形、甚至宰割线，，，，，，，都算。。。。。。。。它们不是为了堆满页面，，，，，，，而是为了让用户一眼就知路这个页面在讲什么、接下来该点什么。。。。。。。。?

好多人感触找图和排版是两码事，，，，，，，其实不是。。。。。。。。一张好的素材图，，，，，，，能省掉你写一堆诠释案牍的功夫。。。。。。。。好比一个咖啡店的首页，，，，，，，用一张有质感的咖啡豆照片，，，，，，，比写十句“我们很好喝”都管用。。。。。。。。这就是网页素材图片的价值。。。。。。。。

找素材的渠路其实就那么几个

免费的高清图库，，，，，，，我用得最多的是 Unsplash、Pexels、Pixabay。。。。。。。。这三个素材风格比力全，，，，，，，从城市街景到天然景致都有，，，，，，，适合做网站的大布景和横幅。。。。。。。。但要把稳，，，，，，，图库的图是“通用”的，，，，，，，好多人都在用，，，，，，，撞图概率高。。。。。。。。所以偶然要去一些冷门点的图库找，，，，，，，或者加个滤镜、裁剪一下，，，，，，，让它不那么“公共脸”。。。。。。。。?

图标的话，，，，，，，Flaticon 和 Icons8 都不错，，，，，，，能够按色彩、风格筛选。。。。。。。。若是你有设计基础，，，，，，，直接用 Figma 插件拉图标也行，，，，，，，效能更高。。。。。。。。

另表，，，，，，，若是是做产品演示页，，，，，，，能够思考插画风格的素材。。。。。。。。好多图库也提供插画包，，，，，，，好比 unDraw、Storyset，，，，，，，里面的人物和场景能够自界说色彩，，，，，，，跟品牌色能统一路来。。。。。。。。这个极度适合做首页的主视觉。。。。。。。。

挑素材别光看好不好看，，，，，，，这三点才是关键

第一是尺寸和分辨率。。。。。。。。一张图 5MB，，，，，，，加载起来转圈转半天，，，，，，，用户早跑了。。。。。。。。选图的时辰看一眼文件大幼，，，，，，，尽量节造在几百 KB 以内。。。。。。。。大布景图能够用压缩工具处置一下，，，，，，，画质变动不大，，，，，，，体积能幼好多。。。。。。。。?

第二是风格统一。。。。。。。。一个页面里，，，，，，，图片风格要一致。。。。。。。。你用了高鼓和度的摄影图，，，，，，，旁边又放一个低鼓和的插画，，，，，，，视觉上会很割裂。。。。。。。。最好的做法是定一个主色或一个滤镜风格，，，，，，，所有素材图都往那个方向靠。。。。。。。。

第三是留白和构图。。。。。。。。图上的主体别太靠边，，，，，，，由于后面可能要盖文字。。。。。。。。出格是移动端，，，，，，，屏幕幼，，，，，，，图片中央有内容，，，，，，，边缘留白，，，，，，，这样排字才不打架。。。。。。。。

用的时辰把稳两个细节，，，，，，，履历差不少

体式怎么选！。。。。。？？？？？？？？大尺寸的布景图，，，，，，，用 WebP 体式最好，，，，，，，体积幼画质好。。。。。。。。若是老浏览器兼容不了，，，，，，，就退一步用 JPEG。。。。。。。。必要通明布景的，，，，，，，必须用 PNG。。。。。。。。图标别用 img，，，，，，，直接用 SVG 代码，，，，，，，无限缩放还不卡。。。。。。。。?

加载方式也要管一下。。。。。。。。图片多的页面，，，，，，，肯定要加懒加载，，，，，，，让图片呈此刻视口边缘才起头加载。。。。。。。。这个步骤很单一，，，，，，，但好多人不知路，，，，，，，或者知路也懒得加。。。。。。。。加上之后，，，，，，，首屏速度肉眼可见解提升，，，，，，，用户停顿功夫也会变长。。。。。。。。

还有一个幼技巧：给图片加上 alt 属性。。。。。。。。这不仅是对 SEO 有援手，，，，，，，更是为了在图片加载失败时，，，，，，，用户能看到文字描述，，，，，，，不会是一张破碎的图。。。。。。。。这个细节出格加分。。。。。。。。?

最后说点切实的

网页素材图片这件事，，，，，，，说起来单一，，，，，，，真正做好的靠的是平时的堆集。。。。。。。。你能够在浏览器里建个书签文件夹，，，，，，，看到好的视觉参考就存起来。。。。。。。。做的时辰，，，，，，，从里面挑风格类似的，，，，，，，再去找对应素材，，，，，，，效能会高好多。。。。。。。。

别老想着“一次到位”，，，，，，，边做边调才是常态。。。。。。。。素材图放上去之后，，，，，，，多预览几遍，，，，，，，换几张对比一下，，，，，，，往往能发现更好的选择。。。。。。。。?

你平时做页面都去哪找图？？？？？？？？若是有什么私藏渠路，，，，，，，欢迎分享给我。。。。。。。。