做网页时需要照片、插画、图标、字体或背景图形，可以从下面10个免费素材网站按类型挑选：Unsplash、Pexels和Pixabay偏向照片与视频；unDraw、ManyPixels和SVG Repo提供插画或矢量素材；Heroicons、Google Fonts、Font Awesome和Haikei适合补充界面图标、字体与背景。下载前先看单项素材的格式、尺寸和授权说明，再按网页用途调整。

照片与视频：适合首页主视觉和内容配图

1. Unsplash：高质量摄影图片

   Unsplash以摄影图片为主，适合首页横幅、品牌故事区、文章封面和产品场景图。选图时优先找主体清楚、留白充足的横向照片；网页首屏可选较大尺寸，再按实际容器裁切并压缩为WebP或合适质量的JPG。使用时将图片下载到项目中，设置合适的宽高与替代文本，避免原图过大拖慢首屏加载。商用前仍应阅读图片授权，并留意人物肖像、商标等可能涉及的额外权利。

   入口：unsplash.com

2. Pexels：照片和短视频素材

   Pexels同时提供照片与视频，适合需要统一视觉风格的活动页、作品集和品牌介绍页。照片可用于卡片配图或背景；视频更适合短时展示产品环境、城市氛围等动态场景。使用视频时先确认素材比例、时长和文件大小，网页背景视频宜静音、循环，并准备静态封面，以免移动设备加载压力过大。下载后按页面比例裁切，使用前检查对应素材的许可说明。

   入口：pexels.com

3. Pixabay：照片、插画、矢量和视频综合素材

   Pixabay适合一次寻找多种类型的配图，例如文章照片、装饰性插画、矢量图和短视频。进入素材分类后，可按主题和方向筛选；用于网页卡片的图片建议统一比例，用于背景的素材则优先挑选边缘简洁、方便叠加文字的画面。下载时根据用途选择位图或矢量格式，放大使用的图形尽量选SVG或高分辨率文件。不同素材的授权与限制可能不同，发布前应查看单项说明。

   入口：pixabay.com

插画与图标：适合功能说明、空状态和界面组件

1. unDraw：可调整主色的网页插画

   unDraw提供偏简洁的扁平插画，适合产品介绍、服务流程、注册引导和空状态页面。挑选时先确认人物动作和画面方向是否贴合文案，再调整主色，使插画与品牌色一致；可下载SVG用于需要缩放的网页模块，也可按场景选择PNG。放入页面后检查图形细节在手机尺寸下是否仍清楚，并为表达信息的插画补充简短替代文本。入口：undraw.co

2. ManyPixels Gallery：多风格插画素材

   ManyPixels Gallery适合寻找成套视觉风格的插画，可用于功能介绍、服务步骤、团队展示和营销落地页。浏览时先确定页面需要线条感、扁平感还是更丰富的彩色画面，再筛选主题相近的插画，避免同一页面混用差异过大的画风。下载时根据实际用途选择SVG或PNG：SVG便于缩放和调整颜色，PNG则适合不需要编辑的快速插入。使用前查看素材页面的许可与可编辑范围。入口：manypixels.co/gallery

3. SVG Repo：图标与矢量图形库

   SVG Repo适合补充常见界面符号、标识图形和装饰性矢量素材。搜索时尽量使用明确对象名称，并优先选择轮廓粗细、视角和细节密度一致的一组图标；下载SVG后可在代码或矢量编辑器中调整尺寸与颜色。它适合导航、功能卡片和按钮图标，不宜把复杂插画直接缩成很小的界面标记。素材授权可能因条目而异，使用前逐个核对。入口：svgrepo.com

4. Heroicons：风格统一的界面图标

   Heroicons适合网站导航、表单提示、操作按钮和信息卡片。它提供不同视觉样式的SVG图标，使用时先选定同一套样式，再保持图标尺寸、描边粗细和周围留白一致；例如将搜索、菜单、关闭等图标用于同一导航栏，可以减少界面风格跳跃。按页面实际尺寸调整SVG宽高，并为具有操作含义的图标配上文字或无障碍说明。入口：heroicons.com

字体、图标套件与背景：补齐网页视觉细节

1. Google Fonts：网页字体资源

   Google Fonts适合为标题、正文和界面文字挑选字体。选择字体时先看中文或目标语言覆盖情况，再确定字重范围；正文通常不需要加载过多字重，以免增加资源体积。可下载字体文件并按项目方式配置，也可按网站提供的使用说明嵌入字体。上线前检查中英文、数字和标点的实际显示效果，并核对所选字体的许可信息。入口：fonts.google.com

2. Font Awesome：常用符号图标

   Font Awesome适合需要社交媒体、文件类型、设备或常见操作符号的网页。挑选时通过Free筛选范围确认可用图标，再用SVG或项目支持的图标方式放入页面；例如在联系信息区使用电话、邮件图标，在功能列表中配合短文字说明。应统一图标尺寸与颜色，避免用图标代替不够直观的文字标签；同时区分免费资源与付费资源，并查看具体授权要求。入口：fontawesome.com

3. Haikei：可生成的抽象背景与装饰图形

   Haikei适合制作波浪、渐变、层叠形状等装饰性背景，可用于首页分区过渡、卡片底纹和标题区域。使用时先挑选生成器中的图形类型，再调整颜色、密度和构图，确保文字区域有足够对比度；完成后按场景导出SVG或PNG。SVG适合缩放和后续编辑，PNG更适合直接作为静态背景。装饰图形应服务于信息层级，避免遮住正文或与按钮争抢注意力。入口：haikei.app

按网页场景筛选与使用素材

首页首屏：优先从Unsplash、Pexels或Pixabay挑选主体明确、留白适合放标题的照片；如果采用视频，准备静态封面并控制文件体积。产品功能区：可从unDraw或ManyPixels寻找同一画风的插画，再用Heroicons或Font Awesome补充操作符号。文章与内容页：用Pixabay或Unsplash寻找主题匹配的配图，统一裁切比例，避免卡片高度不齐。品牌与界面：用Google Fonts确定标题和正文字体，再从Haikei制作少量背景装饰。

实际落地时，先确认素材表达的主题与页面文案一致，再核对格式、尺寸、透明背景需求和授权条件。位图用于照片和复杂画面，SVG更适合图标、插画和可缩放图形；上传前压缩图片，删除无用的大尺寸文件，并为有信息含义的图片填写描述性替代文本。若素材用于商业项目、广告或模板再分发，应特别查看对应条目的许可范围、署名要求和禁止用途，不要仅凭网站提供免费素材就推断所有文件都适用于所有场景。

hqh7uz0bxgvi9cae16khzr8p4lyp