图片压缩与合并

最新推荐文章于 2024-08-05 09:57:06 发布

Wei.Studio

最新推荐文章于 2024-08-05 09:57:06 发布

阅读量2.8k

点赞数

分类专栏：前端文章标签： web前端图片 css 压缩

本文链接：https://blog.csdn.net/abcxy2161/article/details/76096078

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

概述

Web前端需要做的漂亮，必定引入很多图片和图标来美化界面，但是嵌入式设备Flash有限，总共就那么几M空间，可用于Web资源存放区域很受限制，本文记录一种用于Web前端的图片压缩与合并方法，将多个制作好的图片和图标合并到一张图片中，既减小了占用Flash大小，又使得浏览器一次加载便可加载到所有图片

##CSS Sprite Generator
要使用一个在线图片压缩合并工具，CSS Sprite Generator，链接地址：http://spritegen.website-performance.org/
进入后在网页左上方一片区域，有open、Setting、Clear、Downloads和About，点击open打开所需合并的图片，该工具会自动优化对齐

这里写图片描述

做一个例子，如下图加载进来一些图片后，会自动对齐
这里写图片描述

点击其中一个图标，在右侧的设置区域可看到其坐标
这里写图片描述

这坐标怎么用？回到左边的区域，点击Downloads，右边区域会更改为下载选择，点击spritesheet会下载合并后的图片，点击stylesheet会下载所有图标的样式，如下图是合并后的图片

这里写图片描述

stylesheet样式文件内容如下

.sprite {
    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-icon-delete-normal {
    width: 50px;
    height: 50px;
    background-position: -5px -5px;
}

.sprite-icon-modify-normal {
    width: 50px;
    height: 50px;
    background-position: -5px -65px;
}

每个图标有width、height和background-position三个属性，这其实就是对应css样式，可按如下格式建立一个删除图标的样式

.icon-delete-normal {
	width:50px;
	height:50px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-image: url('../img/spritesheet.png');
	background-position: -5px -5px;
}

其中url中为从这个工具下载的spritesheet合并图片，HTML中就可以使用<div class="icon-delete-normal" ......>......</div>来完全显示该图标了