命名規范

命名全部用小寫英文字母、數字、 - 的組合，其中不得包含漢字、空格、特殊字符；盡量用易懂的詞匯, 便于團隊其他成員理解; 另, 命名如果需要分頭尾兩部分, 用-隔開, 比如 ad-left01.gif、 btn-submit.gif、page-video.mp4;

引入規范

使用相對路徑，不要指定資源所帶的具體協議 ( http:,https: ) ，除非這兩者協議都不可用。 推薦：

<img src="//reshw.ijunhai.com/public/img/normal.png" alt="圖片描述" > <video src="//reshw.ijunhai.com/public/img/video.mp4" type="video/mp4" muted autoplay="autoplay" loop="loop"> 復制代碼

不推薦：

<img src="http://reshw.ijunhai.com/public/img/normal.png" alt="" > <video src="http://reshw.ijunhai.com/public/img/video.mp4" type="video/mp4" muted autoplay="autoplay" loop="loop"> 復制代碼

存儲位置（CDN）

使用 CDN 提供靜態文件；CDN 不僅可以提升性能，也會為你管理文件的壓縮和緩存

圖片規范

圖片格式

常見的圖片格式有 GIF、PNG、JPEG、WebP、svg，根據圖片格式的特性和場景需要選取適合的圖片格式。

顏色較為豐富，文件體積較大的圖片

• 優先考慮 JPEG 格式
• 條件允許的話優先考慮 WebP 格式
• 盡量不使用 PNG 格式，PNG8 色位太低，PNG24 壓縮率低，文件體積大

顏色比較簡單、文件體積不大、起修飾作用的圖片

• PNG 與 GIF 格式，優先考慮使用 PNG 格式，PNG 格式允許更多的顏色并提供更好的壓縮率
• 圖像顏色比較簡單的，如純色塊線條圖標，優先考慮使用 PNG 格式，避免不使用 JPEG 格式
• 圖像顏色豐富而且圖片文件不太大的（40KB 以下）或有半透明效果的優先考慮 PNG 格式
• 需要良好的放縮體驗，需要動態控制圖片特效，兼容 IE8 以上的，優先考慮 svg

小圖標（icon）

• 優先使用 iconfont。
• 使用 CSS Sprites，對于一些多色圖標和需要過渡動畫需用到雪碧圖，把圖標整合到一張大的圖片中，再利用 CSS 的背景定位來顯示需要顯示的圖片部分。

圖片大小

• PC 平臺單張的圖片的大小不應大于 200KB。
• 移動平臺單張的圖片的大小不應大于 100KB。

必須指定 alt 屬性

<img src="" alt="圖片描述" > 復制代碼

視頻規范

視頻格式

支持 HTML5 視頻播放的瀏覽器支持 3 種視頻格式 MP4, OGG 和 WebM,但并非所有的瀏覽器都支持 3 種。

視頻大小

不超過 5M，如果視頻過大，加載時間大于 1s，需要在頁面開始時加上 loading，防止頁面出現時間過慢，影響用戶體驗

video 標簽設置自動播放

瀏覽器一般不會再用戶不同意的情況下就播放出媒體聲音，這是不允許的，所以有聲音就不能自動播放，所以需要在添加 autoplay 屬性后再加上 muted，靜音播放。

推薦：

<video controls="controls" muted autoplay="autoplay" loop="loop" ><source src="path-to-mp4.mp4" type="video/mp4" /><source src="path-to-webm.webm" type="video/webm" /><source src="path-to-ogv.ogv" type="video/ogg" />您的瀏覽器不支持 video 標簽。 </video> 復制代碼

插入外部視頻方法選擇

視頻作為背景

使用 video 標簽，并用在父集標簽上設置鋪滿整個可視范圍

頁面中嵌入視頻（優先使用 iframe 標簽）

• 上傳到 cdn 上引用
• 可先在各大視頻網站上上傳視頻后引用

國內優酷視頻：

<iframe height=498 width=510 src="http://player.youku.com/embed/XOTA1OTA2NjAw" frameborder=0 allowfullscreen></iframe> 復制代碼

海外YouTube視頻：

打開Youtube視頻，點擊視頻下方的“分享”，取到YouTubeID。

<!-- youtube視頻播放后不出現推薦視頻，配置參數rel=0，下列的PgHDnbWqFcc即為唯一id，每次只需替換掉該id即可 --> <iframe id="player" frameborder="0" allowfullscreen="1" allow="encrypted-media" title="YouTube video player" src="https://www.youtube.com/embed/PgHDnbWqFcc?rel=0&enablejsapi=1&widgetid=1"></iframe> 復制代碼

轉載于:https://juejin.im/post/5ce8c76c5188251a9b1d5475

總結

以上是生活随笔為你收集整理的前端规范之媒体文件规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。