官网图片设计高频踩坑误区
一、画质与素材类（常见）
- 图片拉伸变形直接把小图硬拉大填充 banner、模块，人物 / 产品压扁拉长；或是宽高比例不统一，页面参差不齐。很多人只看电脑端，忽略移动端裁剪，手机上关键主体被裁掉。
正确：提前定好容器比例，用原图裁剪，不要拉伸；主体放在安全区内，适配多端裁切。
- 低清盗版素材网上随便搜图直接用，存在版权风险（肖像权、图片版权，容易收到索赔）；截图、压缩图、模糊网图，放大后噪点严重，拉低品牌质感。
正确：商用图库、实拍图；优先 WebP 格式，平衡清晰度和体积。
- 素材和业务不匹配比如工业官网用外国模特摆拍假图、科技公司用和产品无关的通用商务图，图片和企业真实场景脱节，用户一眼觉得不真实，信任感下降。
二、性能加载误区（影响 SEO + 用户体验）
- 大图不压缩，文件体积爆炸直接上传相机原图，单张几 MB 甚至十几 MB，网页加载缓慢，白屏、滚动卡顿，跳出率飙升。很多人只看电脑网速，忽略手机弱网环境。
- 没有做响应式图片手机端依然加载电脑端超大原图，浪费流量；不做懒加载，首屏一次性加载全部图片。
正确：图片压缩、WebP/AVIF 格式、懒加载，区分首屏图和非首屏图。
- 图片缺少 alt 标签只上传图片不写 alt，一方面不利于搜索引擎识别图片，影响官网 SEO；另一方面屏幕阅读器无法识别，存在无障碍缺陷。
三、视觉与品牌规范误区
- 风格混乱，没有统一调性一张图写实、一张扁平插画、一张滤镜很重；色彩冷暖不一，有的图亮度高有的很暗。官网是品牌门面，图片风格碎片化，品牌记忆弱。
文字叠加在图片上可读性差banner 文字直接放在浅色高光 / 复杂纹理区域；不加蒙版、渐变遮罩；文字颜色和背景对比度不足，手机小屏完全看不清。
坑：蒙版透明度太高，文字发虚；蒙版太低，盖住原图主体。
- 信息过载，图片内容太杂一张大图塞多个人物、产品、标语，用户 3 秒抓不到核心信息。官网图片大多是辅助传递信息，不是海报，信息要极简。
- 配色不考虑品牌色冲突配图自带大面积撞色，和官网主色、辅助色打架，破坏整体页面版式。
四、内容与转化类误区（容易被忽略）
- 重好看，轻业务目标一味追求炫酷视觉，图片和转化无关。比如招商官网放抽象艺术图，没有体现实力、产品、案例，无法支撑用户决策。
- 人物肖像表情违和模特表情僵硬、过度摆拍；多人合影视线方向混乱；产品实拍角度奇怪、反光严重，无法突出产品卖点。小细节：照片里出现无关水印、杂物、杂乱背景。
- 图片信息过时还在用旧厂房、旧产品、几年前团队照片；地址、设备、人员已经更新，图片没同步，用户会怀疑企业是否还在正常运营。
五、交互与适配坑
- 只在 PC 预览，不测试移动端PC 端看着完美，手机端：主体被裁切、文字被挤出去、图片太小看不清。Banner 是重灾区。
- 图标 / 功能图分辨率不足官网小图标、列表缩略图，在高清屏（Retina）下模糊；只做 1 倍图，没考虑 2 倍图。
- 图片占用过多首屏高度超大 banner 占满一屏，用户看不到任何业务介绍，很多访客不知道网站是做什么的。
六、合规坑（风险很高）
- 肖像权问题：随便用网络人物照片、员工照片未经许可对外展示。
- 授权范围搞错：图库素材仅限个人非商用，却放在官网商用；素材授权不包含广告 / 官网使用。
- 涉密内容：实拍图里拍到内部文件、保密设备、带隐私信息的屏幕。
快速自检清单
- ✅ 无拉伸变形，多端测试裁切效果
- ✅ 图片压缩，首屏图片优先轻量化
- ✅ 全部商用授权，实拍确认肖像授权
- ✅ 图文对比度达标，文字清晰可读
- ✅ 风格统一，每张图都服务业务目标
- ✅ 图片加 alt 标签，设置懒加载
