如何修改公司网站图片_产品图banner图替换与优化完整指南

公司网站图片需要定期更新，新产品上线换产品图、节日活动换banner、公司环境变化换实景图。很多企业网站图片还是建站时的旧图，模糊、过时、和实际不符，影响企业形象。本文讲解公司网站各类图片的替换方法和优化技巧。

公司网站图片分六类：logo、banner轮播图、产品图、文章配图、背景图、图标。每类图片替换方法和优化要求不同。

一、logo替换。

logo是企业标识，替换频率低，但换logo（公司更名、品牌升级）时要全站替换。

方法： 1. PbootCMS后台"配置管理"-"站点信息"里有logo上传按钮，直接上传新logo（PNG透明背景，高度40-60px），保存。 2. 如果后台没有logo上传，logo写在模板里，用FTP上传新logo到`template/模板名/images/`，替换旧logo文件（文件名保持一致），或修改模板里的``路径。 3. 手机端logo：有些模板有独立手机logo，在后台或模板里单独替换。 4. 页脚logo、微信二维码旁边的logo：检查模板其他位置，确保所有logo都更新。

优化：用PNG透明背景，文件20KB以内，尺寸高度50px左右。如果有SVG版本更好，矢量清晰文件小。

二、banner轮播图替换。

首页banner是网站门面，活动、节日、新品都要换banner。

方法： 1. PbootCMS后台"扩展工具"-"轮播图管理"（或"广告管理"），找到首页banner位，点击"添加"或编辑现有banner。 2. 上传banner图片，填写链接地址（点击跳转的页面）、标题（alt属性）、排序，保存。 3. 删除旧banner：在轮播图列表里找到不需要的，点删除。一般保留3-5张轮播。 4. 如果banner写死在模板index.html里（不是后台管理），用FTP上传新banner到模板images目录，修改index.html里的``路径或背景图路径。

规格： - 尺寸：宽度1920px，高度400-500px（根据模板）。 - 格式：JPG（照片类），文件200KB以内。 - 文字安全区：文字放在中间1200px范围内，窄屏不裁掉。 - 数量：3-5张，太多用户看不到最后一张，加载慢。

制作：用PS或在线工具（Canva、创客贴），背景用公司实景或产品图，叠加半透明蒙版+文字，主标题+副标题+按钮，一张banner一个主题。

三、产品图替换。

产品图是企业站最重要的图片，客户通过产品图了解产品。

方法： 1. 后台"内容管理"-"内容管理"，找到对应产品栏目，编辑产品文章。 2. 缩略图：产品列表页显示的小图，在文章编辑页的"缩略图"字段上传，尺寸建议400x300px，文件50KB以内。 3. 正文图：产品详情里的图片，在富文本编辑器里点击"插入图片"，上传产品图。建议3-5张：产品主图、细节图、使用场景图、参数图、包装图。 4. 产品相册：有些模板有产品相册功能，在后台产品编辑页的"相册"字段批量上传。

规格： - 主图：宽度800px，正方形或4:3，文件100KB以内，白底或场景背景。 - 细节图：宽度800px，突出产品细节、材质、接口。 - 场景图：宽度1200px，产品在实际使用环境中，有代入感。 - 所有图片统一尺寸和风格，列表页整齐。

优化： - 拍摄：用单反或手机拍摄，白色背景，光线充足，多角度拍摄。不要用网图冒充自己的产品，客户收到货发现不符会投诉。 - 修图：PS裁剪、调色、去背景，产品图干净专业。 - 压缩：TinyPNG压缩，单张不超过150KB。 - 加水印：产品图加公司logo或网址水印，防止被盗图，在PbootCMS后台"配置管理"-"全局配置"-"水印设置"里开启自动水印。 - alt属性：每张图片加alt描述，包含产品名称和关键词，比如`alt="XXX型号自动化设备"`。

四、文章配图替换。

新闻、技术文章里的配图，提升阅读体验。

方法：编辑文章时，在富文本编辑器里点击插入图片，上传配图。文章开头建议配一张封面图（缩略图），正文每300-500字配一张相关图。

规格：宽度800-1200px，JPG，文件100KB以内。图片和文章内容相关，不要用无关的网图。

优化：文章配图统一风格，比如都加灰色边框或统一圆角。图片下方加图注说明图片内容。首图作为分享图（微信、社交平台分享时显示），尺寸建议1200x630px。

五、背景图替换。

页面区块的背景图（关于我们板块背景、CTA板块背景、页脚背景），一般在CSS里用background-image设置。

方法： 1. 用F12检查元素，找到背景图的CSS规则和图片路径。 2. 上传新背景图到模板images目录。 3. 修改CSS文件里的`background-image: url("新图路径")`。 4. 或者在模板HTML里找到行内样式`style="background-image: url(...)"`，修改路径。

规格：宽度1920px，高度600-1000px，JPG，文件300KB以内。背景图要模糊或叠加半透明蒙版，避免背景干扰文字阅读。

优化：背景图用高质量但压缩的图片，加载快。用`background-size: cover`铺满，`background-position: center`居中，`background-attachment: fixed`可以做视差滚动效果（移动端慎用，影响性能）。

六、图标替换。

网站上的小图标（电话、邮箱、地址、服务图标、社交图标），一般用iconfont字体图标或SVG/PNG。

方法： - iconfont图标：在模板HTML里改class名，比如``，从iconfont.cn找对应图标替换class。需要更新iconfont字体文件（.woff/.ttf）。 - PNG/SVG图标：上传新图标到模板images目录，修改HTML里的``路径或CSS背景图路径。图标尺寸统一（24x24或32x32px），风格统一（线性或面性）。