1Mall 1号店 图片设计及压缩技巧教程.ppt

Web图片设计及压缩技巧;JPG 有损压缩 在存储图像的时候并不完全真实的记录图像上每个像素点的数据信息，它会根据人眼观察现实世界的特性对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，使用附近的颜色通过渐变或其他形式进行填充。 既能大大降低图像信息的数据量，又不会影响图像的还原效果。 ; JPG的特性 1、支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。 2、有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。 3、JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。; 什么样的设计更适合web页面？ 慎用较“重”的视觉设计元素 好的设计应该是内容与形式的完美结合，而非形式的堆砌。 设计师在应用那些较“重”的视觉效果时，一定要想清楚这样做的目的和意义，以及是否与产品的特点和受众的气质相契合，要清楚不同设计形式的效果和实现成本。 ; 如上图，第一个Banner应用了较多纯色和简单渐变的应用，不仅能达到热烈、突出的视觉效果，在保证图片质量的同时也更好的压缩了文件大小；第二个Banner由于应用了过于复杂的渐变色和强烈对比，并且在局部区域采用太多的高光和阴影效果，导致图片的色彩层次过多，无法实现图像质量和文件大小的最优化。 ; 内容和形式的分离 通过大幅的背景图去进行意境的传达和气氛的渲染。 好的视觉设计最重要是意境传达和气氛渲染，使用高光、阴影等滤镜效果的目的仅仅是为了达到质感上的统一从而更好的去传达意境和渲染气氛，切忌为了质感而质感。体现设计品质不一定非要使用炫丽的滤镜，优美的布局和精巧的结构才是体现品质的关键。 ; 通过较小的视觉牺牲换取较大的性能提升 为了提升页面的加载速度达到更好的用户体验，对设计进行优化。 可以去掉一些不太重要的高光、渐变和阴影效果，从而大大降低文件大小。;photoshop优化图片方法 文件 - 存储??web和设备所用格式 ; ;其他优化工具