如何替换公司网站的图片和视频：素材准备、上传、嵌入、优化全流程
公司网站更新图片和视频是日常内容维护从素材准备到上线优化的完整流程。
素材准备。图片1. 尺寸按网站位置准备（Banner 1920x600产品图800x800文章配图800x500）。2. 格式照片JPG透明图PNG图标SVG新格式WebP。3. 压缩TinyPNG在线压缩质量80%单张<300KB（Banner<500KB）。4. 命名英文小写用横线分隔如product-01.jpg不要用中文和空格。5. 版权用正版图片（摄图网、图虫创意、Unsplash）或自己拍摄避免版权纠纷。
视频1. 格式MP4编码H.264视频+AAC音频（兼容所有浏览器）。2. 分辨率1280x720（720p）足够网站用1080p文件大。3. 码率2-4Mbps时长控制在30秒-2分钟。4. 压缩HandBrake或FFmpeg ffmpeg -i input.mp4 -s 1280x720 -b:v 2M -c:a aac output.mp4。5. 准备封面图（poster）视频第一帧或自定义海报JPG格式视频加载前显示。6. 大视频（>50MB）建议传第三方平台不占服务器带宽。
图片替换流程。1. 确定替换位置文章内容图、产品图、Banner、Logo、装饰图。2. 后台内容里的图编辑器选中旧图删除上传新图调整大小填alt。3. 模板固定图（Logo、Banner）覆盖同名文件或改模板img路径。4. 产品缩略图后台编辑产品上传特色图。5. 保存清缓存。6. 前台Ctrl+F5验证。
视频嵌入方法。方法一HTML5 video标签（自托管视频）。1. 上传视频到/upload/video/目录（FTP或后台上传）。2. 编辑器切换源码模式插入： ```html ``` 3. controls显示播放控件poster封面图preload="metadata"不预加载整个视频（省流量）。4. 保存前台测试播放。5. 注意PHP上传大小限制要够（upload_max_filesize）。
方法二第三方平台嵌入（推荐大视频）。1. 视频上传到腾讯视频、优酷、B站、YouTube。2. 审核通过后获取分享代码（iframe嵌入代码）。3. 编辑器源码模式粘贴iframe代码。4. 优点不占服务器带宽平台自动转码多清晰度播放流畅有播放器。5. 缺点有平台Logo和广告（付费可去广告）视频在第三方平台。6. 微信内打开兼容好。
方法三视频平台API/插件。PbootCMS有视频插件或用dplayer、video.js播放器支持弹幕、清晰度切换。适合需要专业播放器的场景。
视频背景（无声循环）。首页全屏视频背景： ```html ``` autoplay自动播放muted静音（浏览器要求自动播放必须静音）loop循环playsinline iOS内联播放。视频要短（10-30秒）压缩到<5MB移动端可能禁用自动播放准备海报图兜底。
图片视频SEO优化。1. 图片alt属性描述图片内容含关键词如"公司生产车间"。2. 图片文件名含关键词如factory-workshop.jpg。3. 图片周围文字和图片内容相关。4. 视频加标题和描述transcript字幕（利于搜索引擎理解）。5. 视频结构化数据（VideoObject JSON-LD）利于百度视频搜索。6. 图片视频加载快利于SEO排名。7. 图片视频不要影响首屏速度懒加载。
性能优化。1. 图片懒加载img加loading="lazy"视频preload="metadata"或none。2. 响应式图片srcset提供不同尺寸手机端加载小图。3. WebP格式比JPG小30%
替换后验证。1. 图片所有页面新图显示无404手机端不变形alt正确。2. 视频Chrome、Safari、微信内播放正常有声音（如果需要）控件正常封面图显示。3. 加载速度F12-Network看图片视频大小和加载时间首屏<3秒。4. 跨域视频在CDN/OSS要配CORS。5. HTTPS图片视频URL都是HTTPS避免混合内容。6. 清缓存（CMS+浏览器+CDN）。
常见问题。问题一视频不能播放编码不是H.264转码或MIME类型没配Nginx加video/mp4。问题二视频黑屏poster没设或视频第一帧黑换封面图。问题三图片上传失败PHP大小限制改upload_max_filesize。问题四图片变形CSS固定宽高用object-fit:cover。问题五视频加载慢文件太大压缩或用第三方平台。问题六iOS不能自动播放必须muted+playsinline。
公司网站图片视频替换素材准备是基础（尺寸、格式、压缩）嵌入方法选对（自托管或第三方）性能优化是关键（懒加载、CDN、压缩）。按流程操作内容更新既好看又不拖慢网站。
更新时间：2026-08-26 17:38:23
上一篇：PbootCMS后台验证码不显示或看不清终极解决_GD库FreeType与代码修复