如何修改网站后台的图片大小和尺寸_Logo_Banner_产品图_规范
网站后台图片修改涉及尺寸规范和压缩优化，不同位置的图片有不同要求。
Logo图片： - 尺寸：宽200-400px，高50-100px，根据导航栏高度调整。 - 格式：PNG（透明背景）或SVG（矢量，任意缩放）。 - 大小：控制在50KB以内。 - 上传：后台系统设置→Logo上传，或模板设置里。 - 注意：Retina屏幕需要2倍尺寸（如实际显示200px宽，上传400px宽的图）。
Banner/轮播图： - 尺寸：PC端1920x500px或1920x600px，根据模板要求。 - 移动端：单独的手机Banner，750x400px左右，或响应式自动裁剪。 - 格式：JPG（照片类），大小200KB以内。 - 安全区域：重要内容（文字、产品）放在中间1200px范围内，两侧留空，小屏只显示中间部分。 - 上传：后台轮播图管理，多张Banner按排序轮播。
产品图： - 主图：800x800px正方形，白底，清晰，200KB以内。 - 详情图：宽750px，高度自适应，单张150KB以内。 - 格式：JPG（产品照片），PNG（透明背景产品图）。 - 规范：所有产品主图尺寸统一，前台列表整齐。 - 上传：后台产品管理→编辑→产品图片区上传。
文章配图： - 缩略图：300x200px（列表页显示），100KB以内。 - 正文图：宽750px以内，高度自适应，单张200KB以内。 - 格式：JPG。 - 上传：文章编辑器里插入图片，自动生成缩略图。
图标： - 尺寸：32x32、48x48、64x64px，根据用途。 - 格式：PNG透明或SVG。 - 大小：10KB以内。 - 位置：模板images目录，替换同名文件。
favicon（浏览器标签图标）： - 尺寸：32x32px或16x16px。 - 格式：ICO或PNG。 - 上传：根目录放favicon.ico，或模板head里加``。
图片压缩工具： - 在线：TinyPNG（tinypng.com），支持PNG和JPG，压缩率高无损。 - 软件：ImageOptim（Mac）、RIOT（Windows）。 - 命令行：jpegoptim、optipng。 - 压缩后视觉质量几乎无差异，体积减少50-80%。
图片格式选择： - JPG：照片、复杂图像，不支持透明。 - PNG：图标、Logo、透明背景、简单图形，体积比JPG大。 - WebP：新一代格式，比JPG小25-35%，兼容性越来越好（现代浏览器都支持）。 - SVG：矢量图标、Logo，任意缩放不失真，文件小。
上传后检查： - PC和手机端看图片是否清晰、不变形、不拉伸。 - 图片加载速度（用浏览器开发者工具Network看加载时间）。 - alt属性是否填写（SEO和无障碍）。 - 图片文件名用英文数字，不要中文（部分服务器编码问题）。
修改图片不生效的常见原因： - 覆盖了同名文件但浏览器缓存旧图：Ctrl+F5或加版本号（logo.png?v=2）。 - 上传到了错误目录：确认路径和模板引用路径一致。 - CDN缓存了旧图：CDN控制台刷新。 - 模板里图片路径写死了：改模板里的img src。
图片是网站的重要组成部分，尺寸规范、压缩到位的图片提升用户体验和页面加载速度，进而影响SEO排名。花时间优化图片值得。
更新时间：2026-08-26 17:26:47
上一篇：CMS后台修改网页内容操作指南_PbootCMS/WordPress文章页面编辑详解