如何制作 @2x @3x 的雪碧图 和 在css里引用雪碧图

Question

在做响应式网站过程中，遇到图片处理的困扰。

因为：在1倍屏上用2倍图，图会模糊。 在2倍屏上用1倍图，图也会模糊。所以最佳适配是在1倍屏用1倍图，2倍屏上用2倍图。

我的问题如下：

1，在3倍屏上用2倍图，或在2倍屏上用3倍图，是不是也会模糊？

2，在制作@2x和@3x图时，是不是先做@1x图，再等比例放大？需要注意什么？

2.1，以PS为例，如果@1x图里的图形是‘形状’，那么放大后还不至于失真，如果图形是PNG或智能对象，使用“保留细节2.0”采样放大后多少还是会模糊，这种情况下是不是应该把“形状”的图形与“智能对象”的图形分开生成？ 把矢量的放大，把“智能对象”的用最高清的素材？

3，雪碧图，@2x和@3x的实际像素已经放大，但在样式里引用时，background-position 和 backgroun-size 两个样式的值是不是保持不变？ 图片及代码如下：其中的 "-90px 0px" 和 "300px 200px"

background:url('icon@1x.png') no-repeat -90px 0px;
/* background:url('icon@2x.png') no-repeat -90px 0px; */
/* background:url('icon@3x.png') no-repeat -90px 0px; */
background-size: 300px 200px;

4，如果@2x和@3x图使用手工对齐里面的图形，会导致图形之间的间距与@1x图不成比例，就没法用固定的 background-position 来统一定位了。请问这种倍率图该如何统一间距问题呢？

5，如果不使用雪碧图，就会形图N多个图标，如下图：一想到这N多图都要调用N多请求，就难受了。在响应式里，有些图只需要@1x，有些图只需要@2x，有些图@1x和@2x都需要，又该如何规划雪碧图呢？

我没有使用 less 预编译和 webpack 等工具，想先把原理搞清楚后再渐近学习。问题有点多，还请有经验的朋友不吝赐教。

Answer 1

等待大神解答