减小文件大小而不会降低质量


11

我想在Photoshop中保存文件,但要使其尽可能小。

我使用“为Web(和设备)保存”并另存为JPEG。这是我使用的设置:

设定值

我真的不想降低质量设置,因为我使用文本,如果设置太低,有时会看到伪像。

根据图像的大小,这会产生数百千字节的文件大小。虽然这不是一个大问题,但这些图像用于网络,较小的图像更好。什么是不降低质量来减小文件大小的技术?

更新:

要在此处添加更多信息:

我使用和创建的许多图像都是通过电子邮件发送的。这分别限制了我可以在图像上使用HTML和CSS放置文本的方式。

我也使用各种字体。有些我可以使用CSS在网络上使用,@font-face但是您会遇到大文件大小的情况,在某些情况下,您无法将字体合法地上传到网络上。我可以使用Typekit之类的服务,但是Typekit无法使用我使用的许多字体。

这是一个示例图像:

范例图片


1
对此有几个答案-您正在讨论的图像示例会有所帮助。
e100 2012年

1
@ e100-我更新问题以提供示例图像并添加更多信息。
2012年


如果您要控制网站,请查看代码/构建选项。我是专业网络团队的设计师,我们将全屏视频提供给台式机/手机,而不会受到太大的影响。除非严格要求,否则图像均为矢量SVG,并以字体加载。大大减少页面KB数。2000像素宽的英雄横幅是JPG的85%,这些家伙会在背景中预加载。最终用户设备将被检测并传递文件的相对版本(即,用于移动设备的较小版本)。到用户通过主页时,屏幕负载即刻显示。我们的目标是最大2秒首页。
Applefanboy

Answers:


15

最佳压缩方法的选择取决于您的图像内容。如果您尝试使用多种颜色保存图像并在它们之间进行平滑过渡,则选择JPEG。否则,如果您有一些线稿,文本和具有几种颜色的图像,则应尝试使用PNG。

具体的压缩方案,参数,色彩还原等取决于具体情况。您可以通过将JPEG压缩“滑块”设置为30或40来安全保存一些图像,而不会出现明显的伪像。其他一些要求设置80或更高。你的眼睛应该是法官。

当我们谈论JPEG压缩时,请毫不犹豫地尝试使用“ Progressive”选项或将“ Blur”设置为非零值(细微的模糊会掩盖严重的压缩伪像)。

在使用PNG的情况下,您应尽量减少使用的颜色数量(为此使用PNG-8)。当需要“平滑处理”时,请尝试使用不同的抖动算法。

这是几个示例:

JPEG,渐进式,质量:40,模糊:0.18 JPEG,优化,质量:60,模糊:0 JPEG,逐行,质量:60,模糊:0 PNG-8,抖动:漫反射,256色

从左到右,从上到下,它们的参数是:

  1. JPEG,渐进式,质量:40,模糊:0.18,大小:9672字节
  2. JPEG,优化,质量:60,模糊:0,大小:16898字节
  3. JPEG,渐进式,质量:60,模糊:0,大小:11104字节
  4. PNG-8,抖动:漫射,颜色:256,大小:4528字节

目视比较它们,然后仔细查看它们各自的数据大小。第一对约为9.7 kB,而前为16.9 kB。其次是11.1 kB和4.5 kB。所有这些(恕我直言)可以忽略不计。


我对渐进式选项的最大关注是对电子邮件客户端的支持。我在问题中添加了更多信息来解释这一点。
2012年

1
据我所知,“渐进式”是JPEG标准的一部分,而不是奇特的东西,因此支持率应该几乎是100%。但这是“我认为”而不是“我知道” :)。
thebodzio

我同意,我相信您是对的,我已经在Webmaster SE上问了这个问题,在最坏的情况下,图像会显示出来,但要等到它们完全加载后才能显示。
L84 2012年

1
这就是“渐进式”工作的确切方式:随着可用数据的增加,它应连续显示图像的越来越详细的版本。
thebodzio

对不起,我的意思是什么也没显示,直到图像加载与逐次扫描加载。
2012年

10

以下是一些选项:

  • 使用JPEG以外的其他格式(PNG或GIF);文件大小和图像质量方面的结果将取决于图像的内容;每种都在某些内容上更好
  • 使图像在像素方面更小-这将产生非常显着的效果,如果您可以控制整体布局,那么绝对应该考虑
  • 尽可能使用非图像元素,例如,尝试用HTML文本替换图像中的文本;尝试用HTML元素替换颜色块。

在最后两点进行扩展时,您应该在将时间花在减少现有图像的文件大小上之前,最大程度地减少布局中图像的范围。


2

我将尝试回答一些迄今为止尚未解决的问题:

我使用和创建的许多图像都是通过电子邮件发送的。这分别限制了我可以在图像上使用HTML和CSS放置文本的方式。

您可以发送html电子邮件(制作新闻通讯的方式)。带有html和内联CSS(出于兼容性考虑)。图像必须在服务器上,并且您必须将完整的URL放在styles / img-tags中。这是在不同的电子邮件客户端中起作用的列表

我也使用各种字体。我可以使用CSS的@ font-face在Web上使用某些字体,但是您可能会遇到较大的文件大小,并且在某些情况下,无法将字体合法地上传到Web。

尝试使用google webfonts,这是迄今为止最好的webfont-source。全部免费使用。另一个是方松鼠。(它也使用@ font-face)。


感谢您的链接。我浏览了Campaign Monitors的一些网站,但没有看到CSS页面。那里非常有用的信息。
L84 2012年

-1

您无法做到这一点。JPEG是有损格式。在质量和文件大小之间始终存在交易。


除了使用JPEG以外,还有其他建议。PNG怎么样?
L84

1
PNG无损但也很大。您在哪里使用此图片?如果是用于网络,最好对文本进行编码。
Jannik Ruf 2012年

JPEG和GIF是Web视图的不错选择(很少使用PNG)。但这很大程度上取决于您要执行的操作:背景,图像幻灯片,缩略图或图标等…
want252 2012年

如果仅是没有效果的文本(即黑色背景上的白色文本),Gif很好,而且尺寸很小。
Jannik Ruf 2012年

4
这并不是一个很好的答案。有几种减小文件大小的方法。不能说Web上很少使用PNG。
e100 2012年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.