在做响应式网站过程中,遇到图片处理的困扰。
因为:在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('[email protected]') no-repeat -90px 0px;
/* background:url('[email protected]') no-repeat -90px 0px; */
/* background:url('[email protected]') no-repeat -90px 0px; */
background-size: 300px 200px;
4,如果@2x和@3x图使用手工对齐里面的图形,会导致图形之间的间距与@1x图不成比例,就没法用固定的 background-position 来统一定位了。请问这种倍率图该如何统一间距问题呢?
5,如果不使用雪碧图,就会形图N多个图标,如下图:一想到这N多图都要调用N多请求,就难受了。在响应式里,有些图只需要@1x,有些图只需要@2x,有些图@1x和@2x都需要,又该如何规划雪碧图呢?
我没有使用 less 预编译和 webpack 等工具,想先把原理搞清楚后再渐近学习。问题有点多,还请有经验的朋友不吝赐教。
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…