如何替换网站中的图片：文章图、模板图、Logo、Banner、背景图全攻略
网站图片替换分多种类型文章内容图、模板固定图（Logo、Banner、图标）、背景图。每种替换方法不同。
文章内容图片替换。1. 登录后台编辑文章。2. 编辑器里选中旧图片删除。3. 点上传图片上传新图（或从图库选）。4. 调整图片大小和对齐。5. 填alt属性（描述图片内容SEO用）。6. 保存文章。7. PbootCMS/WordPress直接生效织梦重新生成静态页。8. 清缓存前台查看。
模板固定图片替换（Logo、Banner、图标）。这些图片写在模板文件里后台改不了。方法一覆盖同名文件（最简单）1. 找到旧图片路径（F12看img的src或grep搜）。2. 新图片命名和旧图片一样。3. 宝塔文件管理器上传覆盖旧文件。4. Ctrl+F5刷新（浏览器可能缓存旧图强制刷新）。5. 注意新图片尺寸要和旧图一致否则布局变形。
方法二改模板路径1. 上传新图片到/template/模板名/images/或/upload目录。2. 编辑模板文件（head.html、index.html等）找到img标签。3. 改src为新图片路径。4. 保存清缓存。5. 适合新图片尺寸不同或想保留旧图的情况。
Logo替换注意。1. Logo通常在head.html格式PNG（透明背景）或SVG。2. 尺寸高度40-60px宽度按比例。3. 响应式手机端Logo可能要小一点CSS控制。4. alt属性填公司名。5. 有些主题Logo在后台主题选项里上传（WordPress外观-自定义-站点身份）优先后台改。
Banner替换。1. 首页大图Banner在index.html里。2. 尺寸PC端1920x600左右文件<300KB。3. 轮播Banner后台轮播管理（如果有）或模板里多个slide。4. 移动端Banner单独准备竖图或用CSS适配（object-fit:cover）。5. Banner上的文字如果是图片里的文字重新设计图片如果是HTML文字改模板里的文字。
背景图替换。1. CSS背景图在style.css里找background-image: url()。2. 改url路径或覆盖图片文件。3. 背景图设置background-size: cover（铺满）、contain（完整显示）、repeat（平铺）。4. 大背景图压缩<500KB。5. 背景图上加文字要注意对比度文字清晰可读。
图标替换。1. favicon（浏览器标签图标）根目录favicon.ico替换文件或模板head里改。2. 字体图标（Font Awesome）改class名如fa-phone改fa-envelope。3. PNG图标覆盖文件或改路径。4. SVG图标直接改SVG代码或替换文件。5. 图标尺寸统一视觉一致。
产品/文章缩略图。1. 后台编辑产品/文章上传缩略图（特色图）。2. WordPress文章编辑器右侧特色图像。3. PbootCMS文章编辑里的缩略图字段。4. 尺寸按模板要求通常800x600或正方形。5. 统一尺寸列表页整齐。
图片优化。1. 格式照片用JPG图标/透明图用PNG简单图用SVG新格式WebP（体积小30%）。2. 压缩TinyPNG在线压缩或ShortPixel插件质量80%肉眼无差。3. 尺寸按显示尺寸上传不要上传4000px大图显示400px。4. 懒加载img加loading="lazy"加快首屏。5. CDN图片走CDN加速。6. alt属性每张图加描述性alt SEO和无障碍。
替换后验证。1. Ctrl+F5强制刷新看新图。2. 多页面检查同一张图可能出现在多个位置。3. 手机端检查图片是否变形加载慢。4. F12-Network看图片是否200没有404。5. 图片加载速度大图片要压缩。6. 有CDN刷新CDN缓存。7. 检查图片alt属性。
常见问题。问题一替换后还是旧图浏览器缓存Ctrl+F5 CDN缓存刷新CDN。问题二图片变形新图尺寸和旧图不一致CSS固定了宽高用object-fit:cover或改CSS。问题三图片不显示404路径错检查src和文件位置。问题四上传失败PHP大小限制或目录权限。问题五手机端图片太大响应式图片用srcset或CSS max-width:100%。
批量替换图片。1. 数据库替换路径UPDATE ay_content SET content=REPLACE(content,'旧图URL','新图URL');。2. 模板批量替换grep找所有引用逐个改或sed批量。3. CDN刷新对应URL。4. 注意备份。
网站图片替换是日常维护核心是找到图片位置（文章里/模板里/CSS里）对应方法替换。覆盖同名文件最快改路径最灵活。替换后压缩优化清缓存验证。
更新时间：2026-08-26 17:45:18
上一篇：如何修改网站后台字体大小_后台界面字体调整_视力友好设置