点击播放优酷视频教程

作用：图片H5最基础的元素，视觉的主要呈现部分，常用的幻灯、二维码、DIY图片都是基于图片容器。

使用权限：体验版及以上版本

一、组件介绍

图片(Image)组件是最基本的构成元素，掌握了图片组件的使用，Epub360基本上就算是入门了。

格式：JPG/JPEG、GIF（素材大小在30KB以内）、PNG（裁切掉不需要的透明区域）、SVG（矢量图），更多图片素材的注意事项请看这里。

二、场景应用

图片组件能做到的事情有很多，遮罩属性可以配合滑动和重力感应达到丰富有趣的交互效果，（重力感应需要先勾选可滑动，只能手机端预览）；图片勾选可编辑，可以被分享转发；勾选长按二维码可识别，二维码图片可以被识别，图片可以被用户选择是否长按保存到手机。

三、素材准备

1.图片格式，PS导出图片时，PNG格式选择较小文件、JPG格式选择相对较小品质。

2.图片尺寸

如果是设计背景图，需要尺寸要跟画布外框匹配，画布外框尺寸是422X748PX。

因为图片放在编辑器里会压缩到一半大小，所以设计铺满全屏的图片需要准备844X1496px（如下图），分辨率72dpi；页面中其他的图片，就按显示尺寸的2倍大小准备即可。

PS中的设计尺寸：

3.素材大小

在保证场景效果的前提下，满屏大图，导出图片文件一般不要超过200kb，其他图片尺寸尽量小。

4.图片压缩工具

• 图片在线压缩网址：www.tinypng.com

• 电脑端软件，建议格式工厂

四、组件用法

基本用法

1.点击图片组件，添加图片

2.会弹出一个素材窗口，如果没有素材，就需要我们点击上传标志上传素材

3.在这里我们选择最左侧的公共素材库，去添加素材

4.素材上传完成后，可以将鼠标移动到某个图片上，会出现【预览】跟【添加】图片的标志。

我们选择大一些的图，待会用作背景图，点击右侧的【添加】标志，将图片添加到页面中。

5.图片添加到页面后，默认的显示方式是撑满，我们可以理解为图片组件是一个容器，图片用所有画面像素撑满了这个容器。

6.因为图片尺寸不是按照要求设计的，但是我们想要让它铺满整个画布，就需要做个简单调整。

7.如果添加的图片原本就是按照素材规范设计的，那么上传到编辑器里，默认就是合适的大小，不需要做调整，所以按照尺寸规范作图十分重要。

8.关于其他图片尺寸的显示问题。如果不小心将图片拉变形了、或者图片不清楚该如何处理。

高级用法

1.图片属性里的可编辑，勾选了可编辑，该图片就具备了2个属性

（1）点击这张图，上传照片

（2）图片设置了可编辑，便具备了可以被分享出去的属性。比如该图片被用作上传照片后的替换图，那么当图片上传完成并转发给好友后，好友打开看到的就是上传后的照片，这个就是图片的分享功能。

2.点击“二维码（支持微信识别）”，在长按这张照片时，系统会弹出保存照片的提示，一般只在微信打开H5时有效。

（1）如果希望自己的图片，在H5中长按可以保存到手机，那么可以勾选【二维码】

（2）如果自己上传的是一张二维码图片，想要被长按识别，那么勾选一下元素属性的的【二维码】选项即可。

3.链接。是指点击这张图的时候，让它去做什么，比如跳转页面、打开一个网址、拨打电话，如果在这里设置了链接，就不需要到其他地方设置了。

4.遮罩属性。遮罩类似于设计软件里的蒙版，但这里的遮罩是指要显示的区域。相关教程可查看【图片遮罩属性】。

5.可擦除属性。

6.可拖动属性。勾选了可拖动，这张图就可以在画布里用手指或鼠标点住，自由拖动了，并且可以设置一些拖动的效果，一般是用默认的，可以自己设置下拖动属性测试下效果。

7.图片大小调整。可对图片进行尺寸及位置调整，宽高进行可单独设置，也可以锁定比例后再调整，不变形。

8.图片样式：边框及圆角设置。

9.在右侧属性面板切换到“背景及边框模块”，可以设置以下参数：

（1）线宽：以像素位单位

（2）线条颜色：选择线框的颜色

（3）样式：设置边框的样式，从左往右依次为：无边框、直线线框、点线线框、线段线框

（4）图片圆角：以像素为单位，默认是四个角统一调整，也可以单独设置某一个角的圆角值，以左上角为例，如下图，

（5）阴影设置（在边框及圆角设置面板的下方）可以为图片素材添加阴影。

如上图所示

a.可以设置X、Y轴的数值

b.选择阴影颜色

c.设置阴影的虚化值，默认的阴影是非常生硬的效果，如下图，

（6）滤镜效果（在阴影设置面板的下方）可以为图片素材添加高斯模糊的滤镜效果。

a.虚化，数值越大，素材越模糊

b.饱和，数值越大，素材颜色越鲜艳

c.色调，中间值为暖色调，两侧数值为冷色调

d.亮度，数值越大，素材明暗面都会整体提亮

e.对比，数值越大，素材的明暗对比度明显

五、相关Q/A

1.如何让图片可以长按保存？

    选中图片，右侧面板勾选二维码可识别即可。这个方式也适用于二维码图片的识别。具体的可以戳链接了解。

2.怎么替换图片？

    替换图片的方式有三种，详细请点击标题查看。

3.H5作品中的图片要做多大才合适？

    没有视频的情况下，整个H5作品建议5M以内最佳；10M可以接受

    满屏大图200K以内；小图十几几十KB

4.怎样压缩H5中的图片？

    长图，建议在PS、AI等设计软件中进行裁切导出，或者可以在压缩网站 tinypng.com进行压缩。

5.上传到编辑器的图片为什么是糊的？

    一般大的素材图片在上传到意派编辑器中会压缩，有基本三种处理方式。

6.H5中的图片不显示了怎么办？

    将该素材重新上传替换一次即可。

7.铺满画布的图片要做多大，有什么要求？

    意派Epub360的画布具备自适应的功能。具体可点击标题查看。