百度 | 神马 | 搜狗 | 技术文档 | 学习资料分享 - 记录帝国CMS及运维技术的点点滴滴
你的位置:首页 > 实用IT技术 » 正文

【工具类】CyotekSpriter:网站图片拼接CSS工具

发布时间:2020-09-17

作品分类:工具类  图片  小图  请求  拼接  工具  图片  网站  CyotekSpriter

Cyotek Spriter 是一款支持网站开发的工具,可以帮助设计师们把网站上的图片拼接起来然后生成CSS代码,可以让你自设图片的间距、合并模式、图片输出自动压缩、自动修改CSS名称,并提供即时预览、CSS原始码、转存后的图片、实际的HTML码,非常简单又好用。

制作网站通常会有很多小图案,但是每一张图案都单独使用会增加网站的请求连线数,让网页载入变慢。因为出现了一种所谓的「CSS Sprite」,帮你把所有的小图拼贴成一张大图,只要请求一张图片,就能把所有小图一并请求,加快网站的载入速度而不把网站连线数浪费在等这些小图的请求。

拼贴这些CSS用的小图,最简单的方式就是自己开一个空白透明底图,把图片放上去排列好,但是当你要引用图片的时候,你知道这些小图的座标吗?相信你应该会用到很辛苦,光是算座标就算到天荒地老。是否有更快的方式可以处理?其实有线上版的图片合并服务,不过香肠平常做网页偏好使用「Cyotek Spriter」这个免费软体,他会自动帮你合并输出图片、输出CSS、输出HTML,让你快速可以使用这些小图。

Top