主流CSS image比较

iflove 发布于2019-08-28 17:58 / 2628人阅读

摘要：如何来对这些图片做优化呢本文简单的梳理了一下目前几种比较常用的使用方式。下文未对性能问题做真实的测试，请保持一颗好奇的心，并告诉我们这是目前使用比较多的方式。也是我个人认为相对最优的一种解决方式。采用用来显示也不失为一种好办法。

在还原设计图的时候，难免会碰到一些样式图片的引用。如何来对这些图片做优化呢？本文简单的梳理了一下目前几种比较常用的使用方式。
注：
1. 有更好的方法的话，欢迎补充。
2. 下文未对性能问题做真实的测试，请保持一颗好奇的心，并告诉我们

CSS Sprite

这是目前使用比较多的方式。也是我个人认为相对最优的一种解决方式。当然，这里的最优指的是特定环境。比如移动客户端，就不一定要这么干。CSS Sprite 是将页面中所使用到的小图片整合到一张大图上去。大家都知道，客户端向服务器发送请求是很有代价的，特别是在移动端，所以，sprite 的提出是为了减少 http 请求数，从而加快页面加载速度。

使用方式

先将小图片整合到一张大图上

css 引入背景图片

然后依据图标的位置使用 background-position 进行定位

使用技巧

切图的时候就构思拼接好图片（不然后期抓心挠肺的，当然，善用工具的出门右转）

排序有序，便于后期维护(个人建议图标从上到下排列)。有利于 background-position 定位

定位时避免使用 right, bottom 等（后期图片尺寸变化后就不一定了好不）

合理预留空白位置（空太多文件变大，太小引起图标重叠）

优点

减少 http 请求。（这个是最大的优点）

对你存在的图片一目了然（不知道这个算不算，如改进版3.0拿到的图哪些图标是之前已存在不需要重新切了的）

缺点

图片合并定位费时费力（谁用谁知道啊）

其它

github 上有个 grunt 合并 sprite 的组件，可以看看

image data URI

即将图片资源转换为 base64 字符串格式嵌到页面或样式中。这样连图片的请求链接都省了。
如：

使用方式

/** 数据格式 **/
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC

/** 样式引用 **/
.icon{
    width: 30px; height: 30px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC);
}

标签语法：

data : 取得数据协议

image/png : 取得数据的协议名称（注意这里也图片资源也可以使用字体等）

base64 : 数据编码方式

iVBOR... : 编码后数据

Base64编码自行百度科普吧。

优点

减少 HTTP 请求

避免某些文件跨域

无图片缓存等问题(但是一般 css 也是有缓存的好不好)

缺点

兼容性（ IE6,7 不兼容, 可以使用 MHTML 来解决）

浏览器不会缓存该图片（这里是否是这样我存有疑惑，因为好像看上去也是第一次加载的时候慢）

增加 css 文件大小

编码成本及维护(展示不直观，目前需手动转换，我暂时不知道自动替换之类的插件)

之前有看到过篇测评说性能上比 sprite 微弱一些，一时间找不到链接

综合起来，data URI可以使用在
* 图片尺寸很小，使用一条 http 请求有点浪费，如渐变背景框
* 图片在全站大规模使用，且很少被更新的，如 loading 图

在线转换工具

Encode Data URL

image to data URI

更新

github 资源 sus 可转换 data URI

参考资料

MDN - data URIs

icon fonts

由于移动端设备拥有不同分辨率，PPI 等引起的问题，常常需要针对不同屏幕分辨率来调整优化，如使用 @2x 图片， max-width 限制等。
采用 css @font-face 用来显示 icon 也不失为一种好办法。
因为 icon fonts (字体)是矢量图形，所以不受分辨率的影响，同时可以做到完美缩放；当然，也可使用在 WEB 端。

优点

文件小

加载性能好

支持 css 样式

IE6/7 下也支持

缺点

样式限制，使用扁平化风格

移动端还存在不兼容问题 (兼容表，作者不详)

少量移动设备和 icon fonts 字符编码冲突

FF和 IE9 下跨域问题

性能问题

使用方法

制作字体文件

可以利用字体工具手动制作

也可以利用在线工具自动生成

在 css 中引用，如下

引入字体文件

    @font-face {font-family: "iconfont";
        src: url("iconfont.eot"); /* IE9*/
        src: url("iconfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
        url("iconfont.woff") format("woff"), /* chrome、firefox */
        url("iconfont.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url("iconfont.svg#uxiconfont") format("svg"); /* iOS 4.1- */
    }

再定义一个 icon-* 通配我们所有图标的共有 CSS 样式，

    [class^="icon-"], [class*=" icon-"] {
      display: inline-block;
      speak: none
      font-family: "iconfont";
      font-size: 16px;
      line-height: 1;
      font-style: normal;
      /** 字体图标出现锯齿的问题： */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

最后是利用 :before 来注入每个 icon 对应的字体编码

    .icon-bell:before {
      content: "03432";
    }
    .icon-search:before {
      content: "03433";
    }

资源推荐

阿里巴巴矢量图标库

icnMoon

font awesome

参考资料

icon fonts 的探析及应用

其它一些想法

SVG绘图

HTML5 离线文件

localStorage 存储

idc机房托管服务器托管主流视频通话sdk比较比较主流的物联网技术标准 iMAG -images

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110922.html

响应式设计个人的一些总结

摘要：所以一个网，甚至是响应式设计，在两个平台上都会损害您整体的。三响应式与如果把网站作为一个单独的网站，如果网站的内容与桌面版的内容相对缺少，导致用户回到桌面端的网站，会记录这种选择，使搜索排名降低，国内百度就不知道会怎样。一、为什么需要响应式设计（responsible web design） 1. 响应式发展背景 1、屏幕尺寸的快速变化，iphone为320x480，分辨率在未来可以...

LeoHsiun 2019-08-01 15:32 评论0 收藏0
图解CSS3 读书笔记——背景

摘要：将保持背景的原始高度和宽度。对于平铺的重复性背景图像，确保背景图像不会有截断效果。解决屏幕双倍像素下背景图像模糊问题。将大图缩小一倍使用链接或者列表元素的背景图像能和文本一起进行缩放。内联元素背景图像平铺循环方式暂无文章多背景 CSS背景属性基本属性 background-color: 默认值为transparent，可以以颜色名、rgb(css3新增rgba)、hls(css3中新...

felix0913 2019-08-28 18:23 评论0 收藏0
两种主流上传图片的方法：jQuery+Multer || 原生JS

摘要：原文首发博主经过实践，这里给出两种处理用户上传图片的方法，前后端代码皆有前端后端的中间件提交告诉不要去处理发送的数据告诉不要去设置请求头后端代码用初始化项目之后，新建一个路由文件路由设置上传的图片文件存放的地方为根目录下的文件夹原文首发：https://shuirong.github.io/博主经过实践，这里给出两种处理用户上传图片的方法，前后端代码皆有． 1. 前端jQuery,后...

cnTomato 2019-08-21 11:41 评论0 收藏0
如何使用CSS和SVG剪切和遮罩技术

摘要：通过结合使用和遮罩技术，你将会拥有更多的可能性去使用网络图像。在图像上应用遮罩元素为了使用得到一种感觉，我们将在图像上使用遮罩。浏览器支持在我们使用这种新的处理图像的方法之前，注意到浏览器对剪切和遮罩的支持不一致是非常重要的。本文转载自：众成翻译译者：hidoos链接：http://www.zcfy.cc/article/1100原文：https://getflywheel.com/...

hover_lew 2019-08-29 11:14 评论0 收藏0
以后再有人问你selenium是什么，你就把这篇文章给他

摘要：不同目标的自动化测试有不同的测试工具，但是任何工具都无不例外的需要编程的过程，实现源代码，也可以称之为测试脚本。写在最前面：目前自动化测试并不属于新鲜的事物，或者说自动化测试的各种方法论已经层出不穷，但是，能够在项目中持之以恒的实践自动化测试的团队，却依旧不是非常多。有的团队知道怎么做，做的还不够好；有的团队还正在探索和摸索怎么做，甚至还有一些多方面的技术上和非技术上的旧系统需要重构……...

Keven 2019-05-23 12:07 评论0 收藏0