.

素材的大小优化

小常发表于:2017年09月30日 15:59:41更新于:2021年08月17日 10:17:12

通过阅读该须知,可以在制作H5作品前后检查作品素材大小,是否播放流畅。

一、作品大小建议

原则上在不加入本地视频的前提下,整个作品5M以内可达到最佳播放效果。

优化素材参考建议

1.没有视频的情况下,整个H5作品建议5M以内最佳;10M可以接受,具体要看页面多少,素材多少

2.满屏大图200K以内;小图十几几十KB

3.素材太大压缩网站tinypng.com

4.不建议直接放GIF,如果需要动态图,建议GIF导出成序列帧,PS导出序列帧教程:http://support.epub360.com/hc/kb/article/1144534/

5.PS导出的时候应该注意下大小,最好是在在导出时就是符合要求的,长图要裁切优化处理,长图裁切教程:http://support.epub360.com/hc/kb/article/1189468/

二、如何查看作品大小

1.点击左上角发布,如图:

编辑版式文档_-_后台管理系统.jpg


2.进入到下图的作品发布设置页面:

作品《几个按键演示动画控制》发布设置.jpg


3.关于图片大小限制。

在保证场景效果的前提下,背景全屏图片,一般不要超过200-400kb,其他图片尺寸尽量小,一般不要超过50kb;同一张图片,PNG格式相比于JPG格式更容易消耗内存,建议能采用jpg格式代替png格式。

图片批量压缩网址:tinypng.com


4.如何查看图片大小。

(1)选中图片——右侧属性设置面板的素材资源——图片缩略图的右侧小眼睛Banners_and_Alerts_和_编辑版式文档_-_后台管理系统.jpg


(2)点击小眼睛后弹出图片大图,右上角的i可以查看图片大小编辑版式文档_-_后台管理系统.jpg


4.关于GIF图。如果GIF图片较大,建议导出成为多张图片,使用序列帧组件


5.图片模糊的解决方式:在图片组件右面板,可以选择系统预先处理好的几个尺寸,一般只要不是满屏的图片,640可以了。也可以使用tinypng.com进行图片压缩后替换,我们推荐使用http://tinypng.com进行图片压缩。图片压缩后,可以直接双击替换原有图片。

blob.png


6.那么,如何替换图片、又不影响既有的交互设定呢?

(1)怎么替换图片

(2)如何替换幻灯片里的图片/调整顺序


7.关于视频大小的限制。如果使用本地视频组件,视频本身需要酌情压缩,建议不要超过50M;

如果是几秒的视频,并且希望灵活控制,建议使用序列帧组件,序列帧组件相比视频组件占内存小,灵活易于控制;序列帧图片上传前,建议先看下每张图片的大小,以便于压缩;


8.关于音频大小的限制。添加到作品中的音频文件大小需要限制,背景音乐可以循环的尽量使用循环的,原则上不要超过500k。

音频压缩