Astros默认加载了一些能提高图片处理效率的实用中间件。

## 二倍图处理

该功能通过中间件 `astros-2ximg` 实现

项目中如果需要针对高清屏设置二倍图时，通常的做法是切两个尺寸的图片。在Astros中，你只需要准备好一张二倍图。存储图片时，文件名以`2x`结尾。正常引用1倍图和2倍图即可，例：

**图片位置：**

    root/img/logo2x.png
    
**如何引用：**

root/pages/user/login/login.html：

    <img src="$res(~/img/logo.png)"， srcset="$res(~/img/logo2x.png) 2x" />

root/components/header/header-menu.html：

    <img src="$res(~/img/logo.png") srcset="$res(~/img/logo2x.png) 2x" />

root/components/header/header-menu.less：

    background:url(~/img/logo.png);
    background:url(~/img/logo2x.png);

你没有看错，除了文件名末尾加`2x`，不需要其他额外的操作。


## 雪碧图

该功能通过中间件 `astros-css-sprite` 实现

也许你曾经为拼接雪碧图、手动量坐标发愁。后来找到了自动合并图片的方案，你发现还要手动更新样式，Astros一直在尝试让这些琐碎、无意义的工作变得简单。Astro中，你只需要按目录存放图片，书写时正常引用单张图片，Astros会在发布时自动合成雪碧图并替换图片引用。

图片存放在图片目录的`sprite`目录下，按类别存放

**图片存放**

    root/assets/img/sprite/button
                        home.png
                        back.png
                        user.png
    root/assets/img/sprite/form
                        del.png
**引用**

root/components/header/header-menu.less：

    /*没错，正常引用，没有特殊的有要求*/
    background:url(~/img/sprite/button/home.png);

**发布后**

发布后，图片引用会被自动替换成对雪碧图。

    background:url(~/img/sprite_button.png) no-repeat 0 0;
   
## 图片压缩及交错属性

该功能通过中间件 `astros-img-interlace` 实现

网站发布时，Astros 不仅支持CSS和JS文件压缩，同时支持对图片的无损压缩，并自动增加交错属性。

##### 注意：该功能默认是关闭的，因为它依赖[graphicsmagick](http://www.graphicsmagick.org/)组件，开启之前，请安装它。

Windows中，[下载安装文件](ftp://ftp.graphicsmagick.org/pub/GraphicsMagick/windows/)，双击即可完成安装。

Mac可通过[brew](http://mxcl.github.io/homebrew/)安装
    
    brew install imagemagick
    brew install graphicsmagick

更多下载地址：[http://www.graphicsmagick.org/download.html](http://www.graphicsmagick.org/download.html#download-sites)