在
网站设计中都可以找到很多图片。但是怎么压缩却成为很大的难题,GIF,PNG和JPEG之间的差别是如何的信息被压缩,并在屏幕上显示。在网络上发布有很多技巧来构成出色的图片压缩软件,但是许多设计师仍然不了解其中的一些基本原理。
本期深圳网站设计公司Angle想分享一些有关正确进行JPEG压缩的方法。你想优化图像以减少网页加载时间,同时还要保持不错的质量。这是在文件大小和屏幕描绘之间找到平衡的全部方法。没有完美的解决方案供设计师遵循。它需要一些初步的实践,但是一旦你了解了图片压缩,将来开发网站就会变得更加容易。
1、避免节省100%
你在网站设计中永远都不要以100%的质量保存JPEG图片。这将不会产生最可能的“优化”图像。它实际上是通过优化限制公式计算得出的,该公式极大地增加了文件大小。即使与90%或95%的质量相比,你也会看到文件大小显着下降。大多数情况下,建议你保存质量远远低于90%的图像。如果在Photoshop中打开“另存为Web”对话框,你会注意到它们提供了可以选择的预设值。
我在下面添加了可能的JPEG值-请注意固有的命名约定。
-
低– 10%
-
中– 30%
-
高– 60%
-
很高– 80%
-
最高– 100%
即使在Adobe Photoshop中,60%的图像质量也被认为是“高”的。许多网络开发人员会提供50%-70%的安全范围。
2、压缩选项
首先,我们要弄清“压缩”和“质量”这两个词,它们是相反的。这意味着,如果你以40%的压缩率保存JPEG,则将获得60%的质量(相比之下,没有压缩的最大质量为100%)。这些是最基本的选择,在保存到网络上时就足够了。普通用户不会进行更深入的自定义。在将RGB图像转换为YCbCr(亮度,色度蓝,色度红)的过程中,采样会变得更加复杂。
3、不同的网络媒体
网络上也充满了各种图像媒体。你可以拥有照片、图标、按钮、徽章和大量其他图形。但是值得注意的是,比较按钮和照片之间的质量是没有意义的。使用照片或详细图像时,请考虑链接到单独的压缩程度较小的JPEG文件。然后,你可以在网站上以更高的压缩率和更小的文件大小来设置缩略图。唯一的缺点是你需要为媒体库提供两组图像。请注意你在整个网站上缝制的许多不同图形,并分别考虑针对每个图形的优化技术。
4、使用压缩工具
你可能想要整理易于在
网站设计上浏览的图像文件。你也可以将他们的照片托管在Amazon S3,Google Cloud Storage之类的Cloud服务上,或通过CDN托管,这样可以更快地传送图像。不过,你仍然需要使用一些压缩工具来缩小图像尺寸。你可以削减每个文件大小的任何额外字节都是至关重要的。
尽管随着4G和即将推出的5G的出现,现代互联网连接速度正在提高,但我们仍需要减小网页的大小。每个字节最终都会给你的用户带来一些财富,在某些国家/地区,这笔费用可能非常可观。本期深圳网站设计公司Angle给大家带来的如何压缩图像以减小网页上的图像大小的方法。压缩图像以前很棘手,因为你需要在质量和实质之间找到适当的平衡。也没有太多可供选择的工具,但是现在这些选项更加先进且易于使用。在图片压缩中,亮度或亮度设置始终保持尽可能高的值。通过在单独的通道上使用此亮度值,可以更轻松地优化红色和蓝色的各个颜色值。