PS切图后图片过大该怎么压缩大小?

在网页设计中经常会用到切图,但有时候切出来的图片过大,那该怎么进一步压缩图片大小呢?一起来了解一下补救的方法。

操作方法

  • 01

    首先如果只是压缩的话,建议使用 ImageAlpha(专门压缩PNG) 以网上的一副海报为例(侵删) 正常从PS导出的PNG大小:

  • 02

    原本是 1.1 MB

  • 03

    在 ImageAlpha 中打开后可以看到在默认参数下可压缩 65%。

  • 04

    压缩后 379 KB。而且是几乎无损画面细节的。我一般在输出切图资源的时候都是靠 ImageAlpha 来完成素材的压缩。 而且 ImageAlpha 还可以通过调节颜色数位来进一步压缩,但是这样是有损的。

  • 05

    比如夸张一些将颜色数位调节到 4,细节就已经丢失的差不多了,但是能极大限度的压缩图像。 另外还有一些在线的图片压缩工具,最常用的也就是:TinyPNG 。和 ImageAlpha 的压缩默认压缩率差不多,所以具体喜欢用哪个来压缩还是看个人习惯了。 还有一种压缩方式是讲 PNG 转为 WebP 格式。 工具有 Webponize 等。

  • 06

    (图侵删)网上的测试结果压缩率还是非常可观的。 然而 WebP 还没有普及开来,大部分公司内部还是主要使用 PNG 来输出,所以还是要看公司大多数人的使用习惯来选择具体输出的格式。 另外如果是一些不带 Alpha (透明)通道的图,可以使用 JPG 来输出,比如移动端产品的引导页,一般情况同样大小的 JPG 格式文件都会比 PNG 小,还是以之前的图为例。

  • 07

    JPG 只有 338KB。直接导出 JPG 不用额外压缩,而且通过 PS 还可以直接选择你想输出的质量,通过降低质量来减小图片大小。

  • 08

    同时如果觉得降低 JPG 导出质量仍然还是偏大,还可以在 PS 里通过色调分离来进一步压缩图片的大小:

  • 09

    当然这个也是有损的,这里将参数设置到40时,已经出现了一些肉眼可见的质量损失:

  • 10

    所以具体怎么平衡质量与大小的平衡还是看实际情况来决定。 还有一种情况是图标素材的压缩,最理想的情况是将图片处理为矢量的 SVG 格式。一方面可以无损放大缩小,而且体积也相较于未压缩的文件来说有很大的减小。网上有很多转 SVG 的教程,我这里就不过多描述了。 最后关于系统中控件的输出,有一条原则就是能用代码来实现就用代码,最好不要用图片,一方面用素材输出就需要好几套素材来适配 xhdpi、xxhdpi、xxxhdpi,后期维护起来非常麻烦。而且程序在加载这些素材的时候也会占用内存,对稳定性和性能都会有影响,一张图可能不太明显,但是一个页面中如果大量的使用图片素材,那么影响就是非常巨大的了。 一般软件工程师都可以对矢量图形的圆角参数,描边,填充色,投影大小,投影距离,投影颜色进行定义,所以只要素材可以转换为实际可用的参数,都是建议写清楚参数,然后由软件工程师通过程序来实现。

(0)

相关推荐

  • 解决croppic插件切图后图片不更新的问题

    操作方法 01 croppic是程序员之间比较流行的 jQuery 图片裁剪插件,但是我们在使用的过程就会发现,当我们上传一幅图片点击切图后往往发现图片并没有自动更新.那么怎样解决这个问题呢,下面就给 ...

  • Assistor ps怎么切图 ASSISTOR PS切图教程详解(附下载地址)

    ASSISTOR PS是一款Photoshop的切图外挂神器,这款外挂插件对于设计师们来说无疑是一款神器,可以帮你很轻松的完成切图操作.主要功能有标注.切图.圆角设置等,当然它参考线自定义和单位换算功 ...

  • PS怎么快速切图将图片分割成好几个

    PS怎么快速切图是每个美工从业者必备的技能,学会这一招,可以让你在分割图片的时候节省不少的力气.例如我们对如图"大"字进行分割,方法如下: 操作方法 01 打开要分割的图片后,按c ...

  • ps裁剪后图片变大怎么办

    有一张长图,切片工具不好用,就用裁剪的笨办法处理,结果保存后图片太大了,原来是裁剪后,文档大小没有变,所以文件就大.压缩了怕画质受影响.研究了半天,找到个办法.存储为WEB格式就OK了. 操作方法 0 ...

  • PS切图的流程(网页制作)

    我们在制作网页的时候常常需要上传图片,如果图片比较大此时我们就需要对图片进行切片处理,下面我们就来看看使用ps是如何进行切图的吧. 操作方法 01 首先将ps打开然后按下Ctrl+O键就会弹出打开对话 ...

  • PS中保存的图片太大解决办法,指定大小储存图片

    很多朋友会遇到这样的问题,当使用PS软件处理图片时,所保存的图片大小都很大,根本达不到自己的要求.怎样解决呢?保存图片时能按自己要求的大小来保存吗?答案是能的,可以自定义图片内存大小. 操作方法 01 ...

  • 包教包会切图教程(教程插件大合集)

    相信咱们网站分享的文章大家都有阅读,但是每天分享的肯定是不同类型的, 不够具体. 那么今天给大家带来的是切图篇. 总结了之前发的切图分享 , 还有插件, 让大家能够具体的 清楚认识,设计师必须学会的一 ...

  • Ps中保存的图片太大如何解决

    PS全称是"Adobe Photoshop",它是由Adobe Systems开发和发行的图像处理软件. Photoshop主要处理以像素所构成的数字图像.使用其众多的编修与绘图工 ...

  • ps怎么切图?保存下来?

    下面介绍PS切图方法以及保存切片的方法,希望本指南能帮到大家. 切图方法 01 启动PS,把图片素材拉入到PS中. 02 如图所示,从工具栏中调出切片工具. 03 鼠标再右击画布上的图片,弹出右键菜单 ...