学校网站首页banner图和Logo替换教程_图片尺寸与格式优化指南
学校网站首页最显眼的就是banner大图和左上角的Logo，学校换校名、换校徽、做节日专题、迎接检查，都需要换banner和Logo。很多老师换完图片后发现变形、模糊、加载慢，是因为图片尺寸和格式没处理好。本文讲解学校网站banner图和Logo的替换方法，以及图片尺寸、格式、压缩的优化技巧。
先讲Logo替换。学校Logo一般是校徽+学校名称的组合，显示在网站左上角，尺寸不大但很重要。
Logo的标准规格： - 格式：PNG（透明背景，能适应任何背景色），不要用JPG（JPG不支持透明，会有白底） - 尺寸：高度40-60px，宽度根据Logo比例自动，一般宽度150-300px。比如校徽+横排校名，高度50px，宽度250px左右 - 文件大小：控制在20KB以内，越小加载越快 - 分辨率：72dpi（屏幕显示用72dpi就够，300dpi是印刷用的，文件大没必要）
Logo制作建议：如果有原始的AI/PSD校徽文件，导出PNG时选"透明背景"，尺寸设为高度60px，宽度自动。如果只有JPG校徽图片，需要用Photoshop或在线工具（比如remove.bg）去背景，保存为PNG。不要直接把JPG当Logo用，白底在非白色导航栏上会很难看。
Logo替换步骤（PbootCMS后台）： 1. 登录后台，进入"配置管理"-"站点信息" 2. 找到"网站Logo"或"PC端Logo"上传按钮 3. 点击上传，选择制作好的PNG Logo文件 4. 上传后预览，确认显示正常 5. 拉到页面底部点"保存" 6. 刷新网站首页，左上角Logo更新
如果后台没有Logo上传选项，说明Logo写在模板文件里。用FTP或文件管理器进入`template/模板名/head.html`，找到``，把新Logo上传到`template/模板名/images/`目录，替换src里的文件名，保存刷新。
手机端Logo：有些模板有独立的手机端Logo，在"站点信息"里找"手机端Logo"上传，尺寸可以小一点，高度30-40px。如果模板没有独立手机Logo，PC端Logo会自动缩放，但要确保在手机上不会太大或太小，用手机访问测试。
再讲banner大图替换。首页banner是网站的门面，学校重要活动、节日祝福、招生宣传都靠banner展示。
banner的标准规格： - 尺寸：宽度1920px（满屏宽度），高度400-600px。学校网站常用500px高度，太矮了显示不出内容，太高了首屏占比太大影响内容浏览 - 格式：JPG（照片类banner用JPG，压缩率高文件小），如果有透明元素用PNG-24（但文件大，不建议） - 文件大小：控制在200KB以内，最好100KB左右。1920x500的JPG，质量设为60-70%，大概100-150KB - 文字安全区：banner上的文字（比如"热烈庆祝XX中学建校50周年"）不要放在最左和最右，因为不同屏幕宽度不同，窄屏会裁掉两边。文字放在中间1200px宽度范围内，确保所有屏幕都能看到完整文字 - 分辨率：72dpi，sRGB色彩空间
banner制作建议： 1. 背景用校园风光照片（教学楼、操场、校门），叠加半透明蒙版，上面放文字，文字清晰不杂乱 2. 文字用粗体，颜色和背景对比强烈（深色背景用白字，浅色背景用深色字） 3. 一张banner只表达一个主题，不要堆太多文字，主标题+副标题+按钮就够了 4. 节日banner（国庆、元旦、春节）用红色系，招生季用蓝色系，日常用校园风景 5. 不要用网上随便找的有版权的图片，用自己学校的照片或免费可商用图片（unsplash、pexels）
banner替换步骤（PbootCMS后台）： 1. 登录后台，进入"扩展工具"-"轮播图管理"（或"广告管理"-"广告位管理"，不同模板位置不同） 2. 找到首页banner对应的广告位，一般叫"首页轮播"或"首页banner" 3. 点击"添加"或编辑现有banner 4. 上传banner图片（制作好的1920x500 JPG） 5. 填写链接地址（点击banner跳转到哪个页面，比如跳转到校庆专题页，没有就填`#`） 6. 填写标题（alt属性，描述banner内容，对SEO友好） 7. 排序数字（多个banner时控制轮播顺序） 8. 状态选"启用" 9. 保存 10. 刷新首页，banner更新。如果有多个banner，等轮播到对应那张确认
删除旧banner：在轮播图列表里找到不需要的banner，点"删除"。一般首页放3-5张banner轮播就够了，太多了用户看不到最后一张，也影响加载速度。
如果模板的banner不是通过后台轮播图管理的，而是写死在模板里，需要改`template/模板名/index.html`，找到banner部分的``标签，替换图片路径，把新图片上传到模板images目录。
图片压缩工具推荐： - 在线工具：tinypng.com（支持PNG和JPG，压缩率高，免费）、squoosh.app（Google出的，可调节质量，实时预览） - 桌面工具：ImageOptim（Mac）、RIOT（Windows）、XnConvert（批量压缩） - PS导出：存为Web所用格式，JPG品质60-70，勾选"优化"，不勾选"嵌入颜色配置文件"
压缩后检查：图片在网页上显示清晰，没有明显的马赛克或模糊，文件大小在目标范围内。banner图100-200KB，Logo 10-20KB，文章配图50-150KB，这个标准比较合理。
常见问题排查： - 换了Logo但前台还是旧的：清浏览器缓存（Ctrl+F5），清CDN缓存，确认上传到了正确的模板目录 - banner图变形：检查图片尺寸是否和模板要求一致，有些模板固定了banner高度，图片比例不对会被拉伸。用CSS设置`img{width:100%;height:auto;}`或背景图用`background-size:cover` - 图片加载慢：文件太大，压缩后再传。或者服务器带宽不够，大图片加载慢，用CDN加速 - 手机端banner文字太小：制作banner时文字放大，或者用CSS针对手机端单独调整banner高度和文字大小 - Logo在深色导航栏上看不清：Logo用白色版本，或者给Logo区域加背景色。准备两套Logo，浅色导航用深色Logo，深色导航用白色Logo，通过CSS切换
学校网站banner和Logo替换是日常维护中最常见的操作，掌握图片规格和替换方法，5分钟就能换好。建议学校准备一个图片素材库，分类存放Logo源文件、banner模板、校园照片，需要时直接用，不用每次临时做。
更新时间：2026-08-26 17:42:17
上一篇：修改帝国CMS模板出现Application Firewall Alert错误的原因与解决