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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最后说点切实的

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

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

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