• ↗☻【高性能网站建设进阶指南 #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 格式。

  • 相关阅读:
    mvc session验证
    mvc登录验证
    PHP中return的用法
    mvc框架类
    php mvc实现比赛列表
    php MySQLDB类
    php header的几种用法
    php isset()与empty()的使用
    jenkins+springboot+svn linux 自动化部署
    基于netty的websocket例子
  • 原文地址:https://www.cnblogs.com/jzm17173/p/3113551.html
Copyright © 2020-2023  润新知