css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题

原创 2015年06月09日 19:48:14

最近在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常。大概知道是分辨率适配等类型的问题,后来网上查找了一些办法,大部分的解决方案都是设计一套放大1倍的图标,再压缩显示。

我们都知道<img>标签可以通过固定宽高的方式来压缩大图,从而得到高清的显示效果,而图标一般用背景图来呈现,怎么搞呢?好吧,css3出了一个很牛逼的属性background-size可以直接设置背景图的宽高,直接解决了前者的疑惑。

那么问题来了,我们的网页不可能每个图标都独立一张图片来加载,那样每张图片将会是一个http请求开销,我们一般的做法是把多张小图片拼在一张大图里,然后通过sprite(精灵)background-position定位的方法来解决,只要加载一张大图,就可以完成多个图标的显示,减少http请求开销,提高性能。所以,我们也希望把放大1倍的高清图标也拼在一张大图里,通过background-position来定位到每个对应的图标上,并进行压缩。网上找了很多方法,终于找到了一个靠谱的方案:

1)首先,我们要准备两张排成一行(必须排成一行,下面解释)的图片,一张是原始大小,另一张是放大1倍的大小

(map-icon.png)

(map-icon@2x.png)


2) 最初的写法,主要是在电脑浏览器上显示,我们使用原图map-icon.png即可

/*
  //网页标签:
  <a class="control"><span class="car"></span></a>
  <a class="control"><span class="position"></span></a>
*/

/* 装载图标的容器,固定宽高,内距设为0 */
.control { display: block; text-decoration: none; padding: 0; width: 30px; height: 30px; }

/* 图标标签,宽高自动填充 */
.car,
.position,
.zoom-in,
.zoom-out {
	display: block; 
	width: 100%; 
	height: 100%; 
	background: url(images/map-icon.png) no-repeat;
}
.car { background-position: 0 0; }
.position { background-position: -30px 0; }
.zoom-in { background-position: -60px 0; }
.zoom-out { background-position: -90px 0; }


3) 问题是,我们怎么知道background-size属性值要设置为多少?后来找到有一个公式:
高分辨率图像宽度 / 目标图像宽度 = X
原始Sprites图像宽度 / x = background-size的宽度值
   好吧,公式的原理我们就不在这里展开了,直接写上去试试:

   60 / 30 = 2  即放大倍数

   7张60x60的大图总宽度 420

   420 / 2 = 210  即background-size的宽

   而background-size的高,我们这里设置为auto即可,然后换上@2x的大图进行压缩

   还有,我们必须在外层声明一个Media Queries,该Media Queries专门针对Retina屏幕设备显示器

/* 移动端媒体查询像素比 */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
.car,
.position,
.zoom-in,
.zoom-out {
	background: url(images/map-icon@2x.png) no-repeat;
        background-size: 210px auto;
}
/* 注意这里还是按30像素大小的位置来查找 */
.car { background-position: 0 0; }
.position { background-position: -30px 0; }
.zoom-in { background-position: -60px 0; }
.zoom-out { background-position: -90px 0; }
}
  相反,貌似也可以给定高度的值,宽度取auto自适应,但我尝试过,不太容易成功。我们以后就直接用一行图标排开,给背景图宽赋值就行了!

  最后,给出使用此方案的前后效果图:

(处理前)  


(处理后)



H5压缩图片 AJAX上传图片

HTML5 Canvas压缩图片 AJAX上传图片Canvas压缩图片 封装压缩图片的js function compress(event, callback){ //var inputI...
  • w_stronger
  • w_stronger
  • 2016年11月16日 17:49
  • 2380

利用H5Canvas进行前端图片压缩再上传笔记

前端代码如下://---------------------压缩图片上传插件--------------------------- var ImgFileGet_class = function(ms...
  • Gavin_new
  • Gavin_new
  • 2016年07月26日 16:43
  • 8050

H5+MUI+Node.js+Socket.io群组即时聊天+发送图片+图片压缩

--> .mui-bar-nav { background-color: #00abed; -webkit-box-shadow: none; ...
  • moniteryao
  • moniteryao
  • 2016年03月30日 10:23
  • 3322

利用exif.js解决ios手机上传竖拍照片旋转90度问题

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非...
  • linlzk
  • linlzk
  • 2015年09月22日 12:46
  • 42531

混合App应用实现本地头像剪切,压缩上传功能(支持任何H5框架)

头像上传是任何一个应用都会用到的功能,但是头像的尺寸往往需要控制一下,这样会有一个比较不错的显示效果,例如我们通常会控制用户的头像为正方形,这个切圆角边的时候不会变形,显示位置也很固定。对于H5混合应...
  • jiangbo_phd
  • jiangbo_phd
  • 2016年09月12日 12:13
  • 2812

H5技术完美实现调用手机摄像头、相册。图片上传base64,图片压缩、预览、删除以及图片旋转90度的处理--demo。

看了帖子上有很多关于H5调用手机摄像头、相册的例子,也有很多可靠的栗子,综合技术点针对HTML5调用用手机相机、相册的的一次代码整合。实现提供完成的Demo提供给大家,可直接应用于项目中需要图片上传的...
  • China_Guanq
  • China_Guanq
  • 2017年08月16日 23:50
  • 1412

移动端H5图片上传的那些坑

原文链接:https://segmentfault.com/a/1190000006140042 上周做一个关于移动端图片压缩上传的功能。期间踩了几个坑,在此总结下。 大体的思...
  • qq_36010204
  • qq_36010204
  • 2017年04月13日 11:11
  • 1600

html5+exif.js+canvas实现手机端照片上传预览、压缩、旋转功能

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。 因此解决这个问题的思路是:获取到照片拍摄的方向角...
  • z69183787
  • z69183787
  • 2015年12月15日 15:35
  • 7966

css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题

sprite背景图优化,通过设置css3 background-size来压缩大图达到高清效果,来解决H5网页在手机浏览器下图标模糊的问题。...
  • zhzhi2008
  • zhzhi2008
  • 2015年06月09日 19:48
  • 1270

安卓浏览器看图片,有些模糊,解决方案!

最近在用手机做网站的时候,发现,用同等比例的图片在
  • confidence68
  • confidence68
  • 2014年06月24日 10:18
  • 1070
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题
举报原因:
原因补充:

(最多只允许输入30个字)