U老师发表于：2016年07月13日22:58:05更新于：2022年05月20日11:41:01
作用：图片H5最基础的元素，视觉的主要呈现部分，常用的幻灯、二维码、DIY图片都是基于图片容器。
使用权限：体验版及以上版本
一、组件介绍
图片(Image)组件是最基本的构成元素，掌握了图片组件的使用，Epub360基本上就算是入门了。
格式：JPG/JPEG、GIF（素材大小在30KB以内）、PNG（裁切掉不需要的透明区域）、SVG（矢量图），更多图片素材的注意事项请看这里。
二、场景应用
三、素材准备
1.图片格式，PS导出图片时，PNG格式选择较小文件、JPG格式选择相对较小品质。
2.图片尺寸
如果是设计背景图，需要尺寸要跟画布外框匹配，画布外框尺寸是422X748PX。
因为图片放在编辑器里会压缩到一半大小，所以设计铺满全屏的图片需要准备844X1496px（如下图），分辨率72dpi；页面中其他的图片，就按显示尺寸的2倍大小准备即可。
PS中的设计尺寸：
3.素材大小
在保证场景效果的前提下，满屏大图，导出图片文件一般不要超过200kb，其他图片尺寸尽量小。
4.图片压缩工具
电脑端软件，建议格式工厂
四、组件用法
基本用法
1.点击图片组件，添加图片
2.会弹出一个素材窗口，如果没有素材，就需要我们点击上传标志上传素材
3.在这里我们选择最左侧的公共素材库，去添加素材
4.素材上传完成后，可以将鼠标移动到某个图片上，会出现【预览】跟【添加】图片的标志。
我们选择大一些的图，待会用作背景图，点击右侧的【添加】标志，将图片添加到页面中。
5.图片添加到页面后，默认的显示方式是撑满，我们可以理解为图片组件是一个容器，图片用所有画面像素撑满了这个容器。
6.因为图片尺寸不是按照要求设计的，但是我们想要让它铺满整个画布，就需要做个简单调整。
7.如果添加的图片原本就是按照素材规范设计的，那么上传到编辑器里，默认就是合适的大小，不需要做调整，所以按照尺寸规范作图十分重要。
8.关于其他图片尺寸的显示问题。如果不小心将图片拉变形了、或者图片不清楚该如何处理。
高级用法
1.图片属性里的可编辑，勾选了可编辑，该图片就具备了2个属性
（1）点击这张图，上传照片
（1）如果希望自己的图片，在H5中长按可以保存到手机，那么可以勾选【二维码】
（2）如果自己上传的是一张二维码图片，想要被长按识别，那么勾选一下元素属性的的【二维码】选项即可。
5.可擦除属性。
6.可拖动属性。勾选了可拖动，这张图就可以在画布里用手指或鼠标点住，自由拖动了，并且可以设置一些拖动的效果，一般是用默认的，可以自己设置下拖动属性测试下效果。
7.图片大小调整。可对图片进行尺寸及位置调整，宽高进行可单独设置，也可以锁定比例后再调整，不变形。
8.图片样式：边框及圆角设置。
9.在右侧属性面板切换到“背景及边框模块”，可以设置以下参数：
（1）线宽：以像素位单位
（2）线条颜色：选择线框的颜色
（3）样式：设置边框的样式，从左往右依次为：无边框、直线线框、点线线框、线段线框
（4）图片圆角：以像素为单位，默认是四个角统一调整，也可以单独设置某一个角的圆角值，以左上角为例，如下图，
（5）阴影设置（在边框及圆角设置面板的下方）可以为图片素材添加阴影。
如上图所示
a.可以设置X、Y轴的数值
b.选择阴影颜色
c.设置阴影的虚化值，默认的阴影是非常生硬的效果，如下图，
（6）滤镜效果（在阴影设置面板的下方）可以为图片素材添加高斯模糊的滤镜效果。
a.虚化，数值越大，素材越模糊
b.饱和，数值越大，素材颜色越鲜艳
c.色调，中间值为暖色调，两侧数值为冷色调
d.亮度，数值越大，素材明暗面都会整体提亮
e.对比，数值越大，素材的明暗对比度明显
1.如何让图片可以长按保存？
替换图片的方式有三种，详细请点击标题查看。
3.H5作品中的图片要做多大才合适？
没有视频的情况下，整个H5作品建议5M以内最佳；10M可以接受
满屏大图200K以内；小图十几几十KB
一般大的素材图片在上传到意派编辑器中会压缩，有基本三种处理方式。
将该素材重新上传替换一次即可。
意派Epub360的画布具备自适应的功能。具体可点击标题查看。