图片 18

压缩图片,三个常用压缩图片工具网站

以往我们常常看到一些图片压缩软件,虽然可以达到压缩图片的效果,但往往要牺牲掉不少画质,因此需要在图片大小与画质间衡量。

图片类

数码后期介绍三个国外的压缩图片网站,压缩效果十分赞,分享给需要常压缩图片的同学们吧。

本篇文章所要介绍的工具可以改善上述的缺点,不但可以有效的压缩图片,透过独家的技术让图片压缩后仍不失真,有效减少空间的耗费。租用虚拟主机架设网站的朋友更需要注意到图档大小的问题,如果图片不是存放在如
Flickr
或无限流量图床的话就得特别计较图片可能带来的流量。总之,减肥一张算一张,减少
20% 的档案大小就等于节省 20 % 的储存空间或流量,何乐而不为。

图片压缩处理

在移动端,通常要保证页面中一切用到的图片都是经过压缩优化处理的,而不是以原图的形式直接使用的,因为那样很消耗流量,而且加载时间更长。

身为一名设计师,经常和前端开发小伙伴打交道。切完图之后,考虑到包的大小和页面加载速度等问题,特别是背景图,banner类型图片,一般都会压缩一下。安装包越小,老板越开心有木有。

图片 1 

使用较小的图片,合理使用base64内嵌图片

在页面使用的背景图片不多且较小的情况下,可以将图片转化成base64编码嵌入到HTML页面或CSS文件中,这样可以减少页面的HTTP请求数。需要注意的是,要保证图片较小,一般图片大小超过2KB就不推荐使用base64嵌入显示了。

.class-name {
background-image:
url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAYFBMVEWnxwusyQukxQudwQyZvgyhxAyfwgyxzAsUHQGOuA0aJAERGAFIXwSTugyEqgtqhghQZgUwQQIpOQKbuguVtQuKrAuCowp2kQlheghTbQZHWQU7SwVAVgQ6TgQlLwMeKwFOemyQAAAAVElEQVQI1y3JVRaAIAAF0UconXbvf5ei8HfPDIQQhBAAFE10iKig3SLRNN4SP/p+N08VC0YnfIlNWtqIkhg/TPYbCvhqdHAWRXPZSp3g3CWZvVLXC6OJA3ukv0AaAAAAAElFTkSuQmCC’);
}

如果你是运营汪,当你提交信息资料审核时,结果提示你图片大小超过了限定大小,那么你的内心肯定是万马奔腾,然后屁颠屁颠的跑到UI小妹那,帮忙压缩一下图片,如果UI正在焦头烂额的作图,那么,你惨了,然后一脸的不屑,丢给你三个字,“我没时间”……

图片 2 

使用更高压缩比格式的图片

使用具有较高压缩比格式的图片,如webp等。在同等图片画质的情况下,高压缩比格式的图片体积更小,能够更快完成文件传输,节省网络流量。

<img src=”//cdn.domain.com/path/photo.webp” alt=”webp格式图片”>

所以今天U妹本着让老板开心,让你提高工作效率,且不再看脸色的遵旨和精神,推荐3个图片压缩神器,让你今后图片压缩不再求人

与其他压缩服务的对比

图片懒加载

为了保证页面内容的最小化,加速页面的渲染,尽可能节省移动端网络流量,页面中的图片资源推荐使用懒加载实现,在页面滚动时动态载入图片。

<img data-src=”//cdn.domain.com/path/photo.jpg”
alt=”懒加载图片”>

1、 TinyPNG

使用方法

使用Media Query或srcset根据不同屏幕加载不同大小图片

在介绍响应式的章节中我们了解到,针对不同的移动端屏幕尺寸和分辨率,输出不同大小的图片或背景图能保证在用户体验不降低的前提下节省网络流量,加快部分机型的图片加载速度,这在移动端非常值得推荐。

STEP 1 上传图片

Step 1

使用iconfont代替图片图标

在页面中尽可能使用iconfont来代替图片图标,这样做的好处有以下几个:使用iconfont体积较小,而且是矢量图,因此缩放时不会失真;可以方便地修改图片大小尺寸和呈现颜色。但是需要注意的是,iconfont引用不同webfont格式时的兼容性写法,根据经验推荐尽量按照以下顺序书写,否则不容易兼容到所有的浏览器上。

    font-family: iconfont;
    src: url("./iconfont.eot");
    src: url("./iconfont.eot?#iefix") format("eot"),
           url("./iconfont.woff") format("woff"),
           url("./iconfont.ttf") format("truetype");

打开 TinyPNG
网站后,直接把要压缩优化的图片图片拖曳进来,或点击虚线框区域选择你要压缩的图片。(一次性可批量压缩最多20张不超过5M的JPG或者PNG图片,自打把这个网站介绍给前端同事之后,现在他都离不开它了。)

进入网站后,直接点选【 UPLOAD IMAGES 】按钮

定义图片大小限制

加载的单张图片一般建议不超过30KB,避免大图片加载时间长而阻塞页面其他资源的下载,因此推荐在10KB以内。如果用户上传的图片过大,建议设置告警系统,帮助我们观察了解整个网站的图片流量情况,做出进一步的改善。

图片 3www.16xx8.com

图片 4

STEP 2 压缩图片

Step 2

图片上传的同时,就会自动进行压缩处理,需要注意的是压缩后的图片会变成PNG格式。

选择要上传的图片后,按【确定】开始上传。

压缩后会显示原始图片大小及压缩后图片大小和压缩率,比原本的图片来得更小,画质几乎没有影响

※ 可按住「 Ctrl 」一次选取多张图片,但每张图片大小不能大于 350 k。

图片 5

图片 6

STEP 3 图片下载

Step 3

当上传的所有图片,压缩进度100%,转态为绿色时,压缩已经成功。(当压缩出错会变为红色,且提示错误)

图片上传完成后系统会自动开始压缩。

图片 7

图片 8

完成后,你可以点击后方「download」对图片进行下载,如果图片较多,则可以点击压缩框下方的「Download
all」按钮,进行全部下载,会将所有图片生成一个.ZIP压缩包,就ok了

待压缩结束就会出现压缩后图片的下载链接,按下绿色的【 DOWNLOAD
】钮下载图片。

图片 9

图片 10

优点:

画面上会显示压缩结果以及百分比,让你知道它帮你节省了多少。

无损压缩,保证了图片质量

支持多文件同时压缩,JPG/PNG均可同时存在

免费使用

缺点:

目前只能压缩JPG和PNG文件

一次最多不超过20个文件,每张图片大小不超过5M

2、 Jpeg.io

STEP 1

打开 Jpeg.io
网站后,直接把要压缩或转换的文件拖曳进来,或点选下方链结快速从你的云端硬盘批次汇入图片。目前没有限次单次压缩文件的图片数量和大哥文件大小限制,支持图片格式也相当丰富,几乎任何图片都能透过
Jpeg.io 来进行压缩处理。

图片 11

STEP 2

将图片导入 Jpeg.io
后,就会开始进行转换和压缩处理,比较特别的是优化后的图片都会一律变成 JPG
格式,如果没有特定格式要求其实没有关系。

压缩处理后会显示原始图片大小及压缩后文件大小,通常会比原本的图片来得更精简,画质几乎没有影响,点选后方的「Download
File」即可下载压缩后的文件。

图片 12

STEP 3

将鼠标光标移动到下载链接上方,还会出现图片预览,不过这么小张好像也无法看到什么,如果图片较多,可直接点选右下角「Download
All Converted
Files」将所有文件打包成Zip文件全部下载。(U妹曾一次性压缩过136张图片,和41.5M
PSD源文件,确实很给力)

图片 13

图片 14

优点:

在保证图像质量的前提下压缩率达40%-70%

支持多文件、多文件格式同时压缩,JPG、PNG、GIF、PSD、SVG等等文件格式

无大小、无文件数量上线限制

缺点:

所有文件压缩后格式为JPG

文件名是中文情况下,更改了原先的文件名,新文件名为__.jpg

3、 Imagify

Imagify 是一个 WordPress
外挂,可在用户上传图片时,利用远程服务器来进行图片压缩优化,是你想获得更小尺寸图片又不损失画质的好选择。

Imagify 除了外挂,也提供在线图片压缩功能, Imagify
有三种压缩模式调整(让你选择要压缩的程度以及是否破坏画质),免费帐户单张图片不超过
5 MB 限制,优化图片会保存一小时,你必须在删除前把图片手动下载下来。

STEP 1

打开 Imagify 网站,选择上方的「TRY FOR
FREE」功能,会看到如下画面,简单介绍一下如何使用,很简单,只要在左侧选择你要的压缩模式、输出设置(必须注册),然后把图片拖曳到右边框内,就能开始压缩。

图片 15

STEP 2

Imagify 有三种压缩模式:Normal、Aggressive 和 Ultra,预设为 Aggressive。

Normal 为无损压缩,不会破坏原有图片的画质,但压缩程度有限;Aggressive
会对图片产生些许破坏,不过肉眼几乎看不出来,能让图片获得最好的压缩效果。Ultra
将压缩发挥到极致,让你有最小的图片容量,但会对图片造成损坏。

图片 16

如果没有特殊需求,通常使用预设 Aggressive 就ok了。

STEP 3

最后把图片拖曳到右边框内,Imagify
就会使用它们的算法来进行压缩处理。压缩后图片会出现在下方,同时显示原有图片大小、压缩大小、总压缩率。

图片 17

点选图片最后面的「Download」或者点击绿色区域内的「Download All Optimized
Files」将所有图片打包下载。

图片 18

优点:

可自定义压缩模式设置

支持JPG、PNG、GIF图片格式

缺点:

更高级的使用需付费

单张图片不得超过2M

总结

TinyPNG,经典图片压缩工具,不足之处就是有最多图片数和最大图片的限制,而Jpeg.io唯一不足就是所有输出格式都是JPG,其他方面都很优秀,再来看看Imagify,可以自定义压缩模式和设置,但想要更好的使用,就需要付费了,所以,U妹推荐大家可以将TinyPNG和Jpeg.io结合使用,具体就看自己如何选择了!

更多影楼远程数码后期修片教程尽在全影网。

发表评论

电子邮件地址不会被公开。 必填项已用*标注