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

  • 相关阅读:
    unable to start kestrel System.Net.Sockets.SocketException (10013): 以一种访问权限不允许的方式做了一个访问套接字的尝试。
    c# 复制文件夹内所有文件到另外一个文件夹
    git初始化
    c# 递归获取所有目录,所有文件,并替换文件
    新增项目 提交到gitee
    netcore3.1 跨域请求
    netcore appsettings.json 绑定对象
    nuget安装包
    做人六字诀:静,缓,忍,让,淡,平
    docker安装部署
  • 原文地址:https://www.cnblogs.com/jzm17173/p/3113551.html
Copyright © 2020-2023  润新知