Front-end specification of the media file specification

Naming conventions

Name in all lowercase letters, numbers, - a combination which can not contain Chinese characters, spaces, special characters; try to use the vocabulary easy to understand, easy to understand the rest of the team; the other, naming the head and tail points if you need two parts, separated by - , such as ad-left01.gif, btn-submit.gif, page-video.mp4;

Introduction of norms

Use a relative path and do not specify the resources brought specific protocol (http:, https:), unless the two protocols are not available. recommend:

<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">
复制代码

Not recommended:

<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">
复制代码

Storage location (CDN)

Use the CDN static files; CDN can not only improve performance, you will manage to compress and cache files

Picture Specification

Image Format

Common image formats are GIF, PNG, JPEG, WebP, svg, depending on the characteristics and scene image formats need to select a suitable picture format.

Colors are more abundant, the larger the file size of the picture

  • JPEG format is preferred
  • Conditions permitting priority WebP format
  • PNG format is not used as much as possible, the PNG8 color level is too low, PNG24 compression rate, file size large

Color is relatively simple, small file size, from the modification of the picture

  • PNG and GIF formats, giving priority to PNG format, PNG format allows for more color and better compression ratio
  • Image color relatively simple, such as lines of pure color icons, giving priority to the use of the PNG format, avoid using the JPEG format
  • The image-rich color and picture file is not too large (40KB or less) or translucent priorities PNG format
  • Need a good zoom experience requires dynamic control picture effects, compatible with IE8 above, giving priority to svg

Small icon (icon)

  • Priority use iconfont.
  • Use CSS Sprites, and the need for some multi-colored icons transition animations required to Sprite map, the icon integrated into a larger picture, and then use CSS background positioning to show part of the picture to be displayed.

size of picture

  • Size picture of a single PC platform should not exceed 200KB.
  • Size picture of a single mobile platform should not exceed 100KB.

You must specify the alt attribute

<img src="" alt="图片描述" >
复制代码

Video specifications

Video Format

Support HTML5 video player browser supports three kinds of video formats MP4, OGG and WebM, but not all browsers support three kinds.

Video size

No more than 5M, if the video is too large, loading time is greater than 1s, need to add loading when the page is the start page that appears to prevent the time is too slow, affecting the user experience

Set auto-play video tag

Under normal circumstances the browser user will not disagree on the media to play a sound, which is not allowed, so the sound will not play automatically, so it is necessary to add autoplay properties and then add muted, mute playback.

recommend:

<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>
复制代码

Insert external video Methods

Video as a background

Using the video tag, and a current collector tab is provided on the parent covered the entire visible range

Video embedded in the page (preferentially using iframe tags)

  • Upload a reference to the cdn
  • Can after uploading the video referenced in the major video sites

Domestic Youku video:

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

Overseas YouTube video:

Open Youtube video, click on the bottom of the video "share", taking into 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>
复制代码

Reproduced in: https: //juejin.im/post/5ce8c76c5188251a9b1d5475

Guess you like

Origin blog.csdn.net/weixin_33775572/article/details/93167249