图像缩放技巧

新利在线娱乐网——2011年8月9日,星期二

最近,抹茶总裁/创意总监Chris Lo和我在讨论一个问题的解决方案. 我们需要为客户创建打印质量的图像, 把这些图片放到他们的网站上, 我们也在建造. 问题是,打印需要高密度的图像看起来很好- 300dpi是标准. 当显示在屏幕上时,图像文件的DPI属性与它的物理大小无关. 这是因为使用的DPI实际上是屏幕的DPI. 因此,如果我们有一个图像,打算打印在3英寸宽,300dpi, 它有900像素宽, 哪个在大多数屏幕上都很大.

最简单的解决方案是在HTML中指定图像标签的宽度和高度, 但有几个原因说明这是一个糟糕的想法. 首先,图像文件的下载量非常大. 第二个, 我们依靠浏览器的渲染引擎来缩放图像,并且看起来还不错, 有些人会悲惨地失败. 和第三, 并不是所有的浏览器都支持动态缩放元素背景图像, 因为它是CSS3特性.

显然,唯一可行的解决方案是为每张图像生成两种不同尺寸的图像. 通常,72dpi用于在屏幕上显示的图形. 但是,将900像素的图像缩放到216像素的结果并不理想. 视情况而定, 一个usm锐化, Photoshop的“立方体(锐利)”选项, 或者其他一些过滤可能足以使图像看起来很好. 然而,在某些情况下,我们意识到图像太扭曲了.

如果你处理的不是比矢量图形和梯度更复杂的东西, 简单地放大或缩小图像应该不是问题. 矢量图形并不局限于全像素空间, 如果按比例产生一个分数, 这不是问题. 另一方面,栅格图像的缩放并不总是那么优雅.

因为缩放像素的工作方式,以2的幂重新采样是最简单的. 例如,从300dpi调整到150,或者从72调整到144. 问题是,我们从比例到四分之一只差了3 - pi. 在这种情况下, 我们知道我们希望网站上的图像的大小, 但打印图像的规格只是大概的. 所以我们的解决方案是创建高分辨率的图像,尺寸是我们在网络上需要的4倍, (少数为8倍)并重新采样至75dpi. 然后,为了保持一致,将图像的dpi设置为72,不重新采样. 结果是非常清晰的图像和正确的像素尺寸的网页, 高分辨率的版本足够大,可以打印出来.

这可能不太适合你的情况. 如果你不能让它为2的幂,试着做一个不同的整数倍. 缩放到1/5仍然比24%好. 如果你知道你需要的两个确切的尺寸, 这和数字没有明显的关系, 试着让原来的比两个都大, 同时也为较小的缩放尺寸. 以奇数的百分比进行少量缩放通常比以奇数的百分比进行大量缩放效果更好, 所以如果印刷质量是原版的97%,它看起来还是不错的. 同样,您可能需要对各种过滤器进行反复试验,以获得最佳结果.

新利在线娱乐网
新利在线娱乐网是一家专注于全方位服务的创意机构 网页设计打印身份品牌界面设计视频制作静止摄影 和 运动设计. 用我们对卓越的热情,多元文化背景,和 获奖 实践, 我们一贯提供高品质的, 自定义, 创新的解决方案,以满足客户多样化的营销需求. 欲了解更多信息,请访问 www.MatchaDesign.com.