zoukankan      html  css  js  c++  java
  • 浅谈CSS样式png、gif、jpg图片优化的方法

    一、PNG、GIF、JPG图片对比

         在我们进行图像优化技术前,需要学习有关的图片格式的一些技术细节,每个图形格式都有自己的优势和拖弱点,知道他们会使你得到更好的视觉质量和压缩品质。

    网页图片优化是网页加速中非常重要的一步,对图片进行压缩,不仅能够节约带宽,并且加快网页的速度,我们常用的图片编辑软件可以在压缩图片。

    PNG-8的高压缩比

    切图时,有时选择PNG-8可以获得更高的压缩比,注意,是PNG-8,不是PNG-24,不过有些情况下还是GIF或JPG会小一些,需要根据实际情况调试以选择最佳方案。

    对比大小:

    1、图型类、照片类

    对于图像格式的选择,我们还需要考虑图片的使用场景或功能,概括为两类:图形类、照片类

    图型类:图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性,颜色数量较少。

    图型类一般可以使用PNG格式或者GIF格式。优化时可采用PNG格式为PNG8或者PNG24,品质为32,如果色彩有损失可采用品质64或者128.

    例如:首页左导的图标、feed区图标、勋章图、表情动画都属于图形。

    照片类:照片通常含有百万数量级的颜色,包括平滑的颜色过度和渐变,如果是图形较为复杂,图中有时会出现真实的照片。

    照片类一般用PNG和JPG。可以根据图片色彩的丰富程度而定。

    PNG的品质一般要到128.JPG的品质一般要在70-80之间,以躁点的程度确定。

    例如:皮肤背景图、发布器、按钮背景、发布器下方的tips、右侧广告、用户头像、用户发布的图片。

    2、通用类、随机类

    按照首页图片出现的频率分成:通用类、随机类

    通用类:每个人首页都会看到,图标、按钮、小背景

    例如:顶部托盘图标、左导图标、feed区图标、发布器图标、身份图标、操作类图标、状态类图标、按钮。尽可能的采用PNG的格式保存,文件会相对来说较小一些。

    下图为微博的按钮盒左侧导航icon小图的,使用GIF和PNG格式的大小对比:

    下图为微博的按钮背景图分别使用GIF和PNG格式保存的大小对比:

    随机类:根据自己定义和发布的内容而定。

    A、表情GIF

    可以使用FireWork或者ImageReady,建议使用ImageReady.

    最好是手动一张张的调整,因为这些表情图的色彩值都比较少,如果使用比较大的颜色时会存储量较大。

    B、换肤类图片

    采用JPG格式或者PNG格式

    皮肤的主要背景图中如含有真实的照片或者文字,可采用JPG格式,为了保证更接近设计图需要采用85以上的品质压缩图片,如果色彩跨度不大的背景图片,可采用PNG格式。

    C、勋章类

    目前有GIF和PNG两种格式,GIF的是小图,PNG的是中图和大图,品质选128即可。

    D、各种广告:

    发布器下方tips、右侧广告,底部广告,采用JPG格式或者PNG格式。

    E、用户相关图:

    头像、用户发布的图这个需要在后台控制压缩品质,采用JPG格式或者PNG格式。

  • 相关阅读:
    冒泡排序
    数组去重
    DOM 操作入门(二)
    DOM 操作入门(一)----- 在指定位置动态插入节点
    事件流的捕获和冒泡 ---- 事件对象
    call, apply, bind -----【改变this指向的三大利器】
    闭包和垃圾回收机制
    回调函数 -----【全球化下的产业分工】
    处理Excel表格里面的数据
    Web后台获取服务器相关信息
  • 原文地址:https://www.cnblogs.com/chenguiya/p/3216909.html
Copyright © 2011-2022 走看看