zoukankan      html  css  js  c++  java
  • ↗☻【高性能网站建设进阶指南 #BOOK#】第10章 图像优化

    移除元数据、对颜色或像素信息进行更好的压缩,以及删除对web显示没有必要的块信息(这是针对png的情况)是减小图像大小的常用方法

    图形、照片

    隔行扫描
    当网速很慢时,大图像会随着下载的进度逐行显示,从上到下每次显示一行,缓慢地向下递进。为了提高用户体验,部分图像格式支持对那些连续采样的图像进行隔行扫描。隔行扫描可以让用户在完整下载图像之前,看到图像的一个粗略版本

    png8是用来显示图形的最佳格式

    设计师通过在图像周围添加一些和背景色相近的色块,来实现近似的透明效果

    当你使用alpha滤镜后,页面就不再支持渐进渲染。在所有必须的组件下载完成之前,用户只能看到空白页面。页面上得元素仍然可以并行下载,但是渲染会被阻塞,因为ie会在所有css都下载完毕后才开始进行渲染,但是css现在却依赖于一张需要经过滤镜处理的图片
    如果你在页面设置了几个alphaimageloader滤镜,那么它们的处理过程是串行的,这样问题就被成倍放大了

    使用alphaimageloader的另外一个负面效果就是增加内存占用,这些内存用于处理和应用滤镜

    当使用alpha滤镜后,background-position将不被支持。这种情况下,通常会使用clip属性来模拟ie下的背景位置

    渐进增强的png8

    超级sprite 模块化sprite

    避免不必要的空白
    将元素水平排列,而不是垂直的。这样sprite会稍微变小

    <link rel="shortcut icon" href="http://cdn/myicon.ico" />
    <link rel="apple-touch-icon" href="http://cdn/any-name.png" />

    png8 调色板png的别称
    png24 真彩色png的别称,但是不包含alpha通道
    png32 真彩色png的别称,包括alpha通道

    补充一下,PS、AI 中的 PNG24 其实就是 Fireworks 中的 PNG32,出现这种差异是因为 PNG 官方文档中并没有严格限定这两种名称,
    而另一个原因则是 Fireworks 与 Photoshop 这种 Adobe 原生软件一开始并不属于同一个血统,
    而在 Adobe 收购了 Macromedia 之后也没有对这种名称的设定进行统一,以致于很多人认为是 FW 不支持透明通道的 PNG24 格式。

  • 相关阅读:
    再也不用为word 中表达式的上标和下标发愁了
    创建链接
    ps钢笔工具隐藏的知识。
    学Ps个人遇到的小细节
    新手琢磨ps,学问深着呢。。
    数据库2012终于知道数据库攻击注入参数
    想脱离鼠标,不想要鼠标就只想用键盘完成所有编程,你说可能吗?
    vs2013中的快捷键
    如何在C/C++中动态分配二维数组【转载】
    转载:C++的那些事:表达式与语句
  • 原文地址:https://www.cnblogs.com/jzm17173/p/3113551.html
Copyright © 2011-2022 走看看