如何替换公司网站的图片和视频：素材准备、上传、嵌入、优化全流程
公司网站更新图片和视频是日常内容维护，下面是从素材准备到上线优化的完整流程。
素材准备。图片：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:31:56
上一篇：宝塔面板443端口被占用_Nginx_Apache_Docker_共存方案