质量不要太高,画质能忍受就好(储存为web时品质50-70)

另外用 ctrl+alt+shift+s 储存为web所用格式,比直接另存为jpg少了很多备注信息,会小一点

jpg质量和文件大小的平衡点大约在7左右,大于7之后,画质增加缓慢,大小增加很快,小于7之后,画质下降很快,大小减少较慢

如何用Photoshop优化你的网页图片

0
By xtremefuture000 :: 小技巧 :: 八月 5th, 2011

要想制作一个优秀的网页,好的图片时必不可少的,但在把各种图片加到你的网页中之前,对这些图片进行优化是非常必要的,否则就可能让你的网页出现加载时间过长,浪费流量或者图片画质低下的问题。这里我们就来了解一下如何用Photoshop全方位优化你的图片。

在进入正题之前,我们先来了解一下各种常有的图片格式:

1.BMP(BitMap)

这是Windows系统中的标准图像格式,不采用任何压缩方法,但颜色深度可以任意改变。所有在Windows系统上运行的图片浏览软件都一定能支持BMP格式,但由于它没有经过任何压缩,体积过大,因此网页中是不能使用这种格式的所有的论坛、博客的上传功能中都不支持BMP格式的图片。另外,有一种叫WBMP(Wireless BMP)的格式,专门用于移动设备,仅支持黑白两种颜色。在前些年单色屏幕手机霸占市场的时候拿它来做WML网页中的图片是最佳选择,但在这个彩屏普及的年代,这种格式也被淘汰了。

2.JPEG(Joint Photographic Experts Group)

可以说这种格式是网页中最常用的格式,大部分数码照相机生成的图像文件也默认是这个格式。JPEG支持8位(不常用)和24位色彩的图像。它之所以流行于各种网页,是因为它具有很高的压缩比(1MB的BMP图像最高可以压缩到20多KB),但这种高度压缩却会牺牲图片的品质,这也是我们看某些网络图片带有大量模糊斑块的原因。幸运的是,在Photoshop等图片处理软件中我们可以在生成JPEG图像时调整图片的品质(这也是我们优化图片的重点),来寻找画质与体积的平衡点

一个品质被设定得很低的JPEG图片,我们可以看到很多模糊斑块。在颜色丰富的区域还会出现马赛克。

3.GIF(Graphics Interchange Format)

GIF格式使用的是一种LZW的压缩算法,一般情况下压缩率在50%多(但如果图片中有大片平色区域的话压缩比会更高,可能会压到几KB或更少),是一种无损压缩。但这种格式并不适合色彩太丰富的图片,因为GIF最高只支持8位256色的色彩深度,因此如果图片色彩太多或优化不好的话会严重失真。GIF还有一个最大的特点就是支持动画,这是其它图片格式办不到的。

4.PNG(Portable Network Graphic Format)

PNG格式可以说是一种万能的图像格式,在网络图片上可以替代GIF,在打印机设备上可以替代TIFF,它还支持很多GIF不能实现的特性,如它可以支持最高48位的色彩深度(但我们在Photoshop中生成的PNG大多是24+8位或8位的),支持流式读写和渐次显示(允许边下载边显示),还能完美的展示半透明效果[因为它的Alpha通道最高可以有16位,而GIF只能有一位]。PNG使用LZ77无损压缩,在高色彩模式下可以避免任何失真,不过这也使文件体积相对于JPEG来说稍微大一些。PNG与GIF相比唯一的不足就是不支持动画。

好了,我们现在开始了解如何全方位优化图片:

1.JPEG,GIF or PNG?

一般网络图片也就这三种格式,而我们优化图片首先就要选择合适的格式,这样才能达到最佳的效果。

先说JPEG。JPEG虽然是有损压缩,但它损失的并不是图片中的重要部分,而是一些不引人注意的细节,况且我们可以调节图像质量,因此我们并不需要担心有损压缩能让图片变得多难看。JPEG最适合各种照片和屏幕截图(一般照相机默认生成的就是JPEG格式)等色彩丰富的图片。

至于GIF,可就不能用于色彩丰富的图片了,特别是照相机拍摄出来的作品,因为照片的色彩一般非常丰富,而GIF最多能显示256种颜色,这样出来的照片色彩失真就会很严重了。但是GIF处理平色的能力很强,还支持背景透明,适合网页中的Logo、导航条等基本元素,因为这类图片使用的色彩一般并不是很多。还有,制作动态图片也可以用到GIF格式。

PNG我在前面也说了,它不仅是无损压缩,还支持与JPEG一样的色彩深度,但是上传的照片、截图最好不要用这种格式,因为它的体积还是有点大,如果上传这种大文件的话会影响网页加载时间,还可能浪费移动设备用户的网络流量。不过PNG适合那些带有半透明和阴影效果的图标和网站Logo,如AtomSquare的Logo就是PNG格式的。

2.裁剪/缩小图片

一个尺寸过大的图片是不能放在网页上的,这样可能会使图片超出整个浏览器的阅读范围而影响视觉效果,还会让文件体积变大,因此我们需要控制图片的尺寸。

首先我们应该裁减掉图片周围不需要的部分,如大片的白纸、无用的背景等,这在Photoshop中很容易办到,使用裁剪工具即可。

例如:我不需要这张照片周围的白纸部分,因此我要对其进行裁剪。方法很简单,点击Photoshop工具箱中的裁剪工具,然后选中你想留下的部分,然后右键点图片,按"裁剪"即可。这样可以省去不需要的背景,从而增加网页的可读性,还可以为移动设备用户节省流量。

照相机生成的照片通常有几百万甚至上千万像素,这样的照片放在网页上毫无疑问会超出浏览器的可读范围,也会使体积剧增,因此我们还要在最后缩小这个图像。放在网页上的图像宽度应该在650像素左右(大约是AtomSquare中放置正文的宽度)。虽然一般网页的总宽度都在1000多像素,但放置正文的宽度应该窄一些,这样能使阅读更舒适。

在"储存为Web和设备所用格式"中点击"图像大小"即可设置图像的尺寸。注意,一定要"约束比例",也就是等比缩放,否则出来的图片可能会非常令人尴尬,不是地球变瘪了就是正方型变成长方形了。

尺寸调整好以后先不要急着保存,还有一些地方需要设置

3.JPEG的各种配置

JPEG是一种有损压缩,但我们可以调整它的品质损耗程度,使图像在微小损耗的条件下获得最高的压缩比。Photoshop中JPEG的品质级别为0-100,0为最差,压缩比最高,100为最好,但图像体积很大。但品质与文件体积之间并不是一个线性关系在50-60和80-100之间曲线非常陡,而其他范围曲线比较平缓

事实证明,当品质为80时几乎看不出图片品质的损耗,而此时文件体积比品质为100时要小一半多,因此80的品质是JPEG的最佳选择。如果不需要高画质的话可以选择50,但再往下就没必要了:品质低于50图像的模糊斑块数量会剧增,但文件体积并不会减小多少

我们再看一下其他的选项。"优化"可以进一步缩小文件体积,但可能会降低兼容性;"连续"是干什么的呢?"连续"的JPEG图像可以先显示低分辨率,下载完以后再呈现高分辨率的图像。ICC配置文件用于打印机等设备的色彩补偿。

由于JPEG适合平滑颜色的压缩,因此适当模糊可以减小体积。在Photoshop中我们还可以对JPEG图像进行"加权优化",也就是选取一块需要高清晰度的区域,剩下的背景按普通品质来压缩。具体方法如下:

1.在图片上选择一块区域。

2.点选择->保存选区,然后随便给新加的通道命名。

然后保存为JPEG格式,在"品质"右边有一个小按钮,点击它,进入"修改品质设置"对话框

通道选择刚才新建的通道,然后把品质调成比较高的一个值,然后确定。

这样被选取的区域很清晰,而剩下的不需要强调的区域则是普通画质。

优化好了以后保存即可。

4.GIF/PNG-8的配置

对于GIF来说,我们不需要调整它的品质(因为它是无损压缩,虽然它有"损耗"选项,但这种损耗将会使图片有被撕裂的感觉),要调整的是调色板类型、仿色和透明度。

Photoshop内置了很多标准调色板,分别有可感知、可选择、随样性、受限、自定义、Mac、Windows、灰度、黑白这几种。其中前三种调色板是Photoshop根据图像的色彩自动生成的,可以保证图像尽量少失真;受限、Mac、Windows是使用固定的调色板,图像会失真(由于现在基本上没人使用256色的显卡,这三种调色板也就没什么意义了);灰度可以处理黑白相片,而黑白仅仅是单色图像,就像WBMP一样。

为了减少图像失真,仿色是必须使用的,但Photoshop提供的三种仿色(扩散、图案、杂色)需要根据图片来选择,哪种仿色的效果好就使用哪种。

至于透明度,GIF虽然支持透明但仅支持1位Alpha,这种透明也就仅仅能做到背景透明了,虽然它有"透明度仿色"可以模拟出半透明的效果,但实际效果并不是太好,所以如果你的图片存在必要的半透明效果,那么请使用PNG格式。

还有颜色深度,如果你需要减小图像体积,那么你就应该通过适当减少颜色深度来达到这个目的。减少时需要一点点地尝试,当图像刚好不大量失真时的颜色数为最好。

注:PNG-8与GIF的配置是一样的,但PNG-8生成的图像体积似乎要比GIF小;还有任何带有标志的选项都可以像JPEG的品质那样进行加权优化

5.PNG-24配置

PNG24的配置选项就很少了,因为它是无损压缩,不需要调节品质,又支持真彩色,不需要调色板和仿色,我们能选择的仅仅是是否支持透明度和是否交错。这里我就不多说了,根据自己的需要进行配置就可以了。

结束的分割线

经过这些全方面的优化,我们终于可以存储制作好的图片并把它加入到网页或上传到Blog/Forum中了,这样也就不会让网页半天加载不完或浪费无线网络用户的流量了。这篇文章或许并不是非常的专业,仅仅能提供基本的优化知识(我在本文中基本上没提到各种格式的底层工作模式),但对于制作网站或上传博客、论坛图片的人是非常有帮助的。

关于 网页图片优化和体积压缩相关推荐

  1. 前端优化-网页图片优化

    前端在工作中,一定会经常涉及到图片,甚至很多人认为前端就是切图的,还有人说前端是用div+css布局的,如果从事了这项工作,你一定不这么认为,相信大家都知道前端绝对不是用PS切片工具把网页切成小图片这 ...

  2. 前端性能优化(图片优化)

    从输入URL到页面加载完成的过程:首先通过DNS(域名解析)把URL解析为对应的IP地址,然后与该IP地址确定的服务器建立起TCP网络连接.随后向服务器发送HTTP请求,服务器处理完HTTP请求后把目 ...

  3. Android:最全面详细的性能优化攻略(含内存优化、内存泄漏、绘制优化、布局优化、图片优化、APK优化、多线程优化、列表优化等)

    前言:佛教中有一句话:初学者的心态,拥有初学者心态是件了不起的事情.真正的大师永远怀有一颗学徒的心. 一.概述 在Android中,性能优化是细分领域中最难且也是知识面涉及最深和最广的方向之一. 更快 ...

  4. 前端开发:浅谈图片优化的方法

    在网站优化中,如果图片优化得好,不但可以提高页面的加载速度,提升网站的用户体验,而且还可以通过图片优化来节省网站的带宽.那么作为页面构建工程师应该采用什么方法来优化图片,既能保证UI的还原度,又使图片 ...

  5. 网页图片压缩优化,提高网站打开速度

    最大程度的压缩了网页大小,提高访问者的用户体验.对于一个网站而言,页面的开启速度是至关重要的.它不仅直接影响到该网站在搜索引擎中的排名参数,更为重要的是,会减缓访客的页面开启速度. 图片优化基本原则: ...

  6. 网页图片加载优化方法总结

    目录 1.压缩 2.直接一开始用压缩过的体积小的图,等加载完毕后,再用高清无码图来替换掉 3.使用base64编码代替图片 4.更好的图片格式 5.合并图片sprite(雪碧图) 6.使用css.sv ...

  7. js压缩图片_Web 性能优化: 图片优化让网站大小减少 62%

    图像是web上提供的最基本的内容类型之一.他们说一张图片胜过千言万语.但是如果你不小心的话,图片大小有时高达几十兆. 因此,虽然网络图像需要清晰明快,但它们尺寸可以缩小压缩的,使用加载时间保持在可接受 ...

  8. 网页优化(布局优化、图片优化)

    为什么页面优化? 页面扩展灵活 提高页面的加载速度 提高用户的体验 布局优化-高度自适应 自适应 1.宽高不写 注意:当子元素浮动时,父元素不写高度会引起高度塌陷 2.宽高写%单位 3.使用max-w ...

  9. 小程序包体积压缩优化,下降500k起步

    由于公司小程序包体积过大,已经达到1.9m了,微信定义小程序单个代码包(主包/分包)上限为2m,所以小程序该减肥了 如果你按我的步骤都做了,体积没有减少,ok,来打我 文章目录 第一步:最直接的方式 ...

最新文章

  1. python分析excel数据-总结:像Excel一样使用python进行数据分析
  2. linux的备份和恢复命令,Linux基本命令——备份与恢复文档
  3. 也许,DOM 不是答案
  4. PingingLab传世经典系列《CCNA完全配置宝典》-5.8 静态NAT
  5. 硕士论文研究「AI预测性取向」:化妆等因素并不影响判断
  6. 如何使用计算机管理来为硬盘分区,电脑如何硬盘分区合理_电脑硬盘分区的基本步骤-win7之家...
  7. 2019 CCF CSP-J2题解
  8. opencv 模板匹配 掩膜 matchtemplate with mask
  9. 关于MSTP的个人总结,如何查看华为生成树状态信息
  10. 用VB实现的QQ自动登录器
  11. 赵小楼《天道》《遥远的救世主》深度解析(6)为什么肖亚文说丁元英是魔是鬼都可以,就是不是人?
  12. ECSHOP漏洞集:http://sebug.net/appdir/ECSHOP
  13. Go解决报错 error obtaining VCS status: exit status 128 Use -buildvcs=false to disable VCS stamping
  14. 学习笔记:云计算第二天
  15. Jeecg-Boot前端部署
  16. 通俗易懂区块链系列——双重支付/双花支付
  17. apollo自动驾驶进阶学习之:ST与ST迭代过程
  18. crontab每周一到周五
  19. WinXP系统怎么重装?
  20. NVMe SSD 基本功

热门文章

  1. GOOGLE无法访问的解决
  2. vue购物车思路及代码(更新)
  3. 上海虹口区python培训
  4. 【动态规划】宠物小精灵之收服
  5. 【Go学习】实现一个用其他终端远程控制电脑鼠标的小程序
  6. 《种子的梦想》(顾城 )
  7. LightTools 中的颜色分析
  8. JNDI对应调用各种应用服务器 InitialContext 的写法
  9. 惠普战66一代拆机_惠普战66拆机教程;惠普战66怎么加内存-聚超值
  10. 好吃不过饺子 不想事儿不过睡觉