|
Post by account_disabled on Nov 25, 2023 10:04:54 GMT
首先将图像的分辨率分配给它将在网站上显示的尺寸。如果仅以 600 像素宽显示图像,为什么将其保持在 1600 像素呢? 开始享受视觉、精确和尺寸优势;宽度一半的图像中包含的数据将小于其大小的一半。您可以将尺寸加倍,以使图像在高分辨率显示器(Retina、4K 等)上看起来更清晰,但无需再增大。 跟着我重复一遍:分辨率越高,文件大小越大!这才是重点! 除了降低图像分辨率外,我们还能如何减小文件大小呢? 主要方法是将图像转换为最适合作业的文件格式,然后降低图像质量,而不会显着牺牲图像清晰度(我们仍在努力减少图像的数据使用量)。只需点击几下鼠标即可轻松完成这些操作。 JPEG、GIF、PNG 和 SVG 是互联网上使用的四种主要图像文件格式,每种格式都有自己的用途。让我们回顾一下它们并尝试学习如何优化它们。 JPEG JPEG 是数码相机使用的主要文件类型。它是一种“有损”图像格式,意味着对图像数据进行了简化,减小了图像的大小,从而大大减小了图像的文件大小。当然,这样做时图像质量也会下降(您的设置是什么并不重要)。为了平衡尺寸和清晰度,您可以选择在 1-100 范围内调整图像质量。 (对于 JPEG)调整 Web 面板的 Photoshop 文件格式、质量、分辨 电话号码清单 率和模糊度,然后预览优化后的外观。 由于巧妙地实现了丢失,JPEG 文件比其他格式具有显着的文件大小优势,因此您可以(而且我认为您应该)将 JPEG 用于网站 90% 的图像。只有当 PNG 和 GIF 严重限制颜色数量时,它们才会更小。 但是,请记住,您仍然希望使用看起来不错且分辨率可接受的图像;所以不要对你的质量线太过疯狂。我通常发现 30 到 60 之间的 JPEG 质量百分比可以很好地平衡图像清晰度和文件大小。使用实用程序处理您的图像,看看什么最适合您的图像。 通过使用较大的分辨率和较低的 JPEG 图像质量,您可以以较小的文件大小获得更清晰的图像。 例如: 顶部图像宽 500 像素,大小 53 KB,质量为 60%。下面的图片宽 1000 像素,质量为 30%,大小也为 53 KB,在 1000 像素下查看时,它的清晰度要高得多,是不是很疯狂? 不幸的是,JPEG 不允许透明。 这是什么意思?例如,假设您希望图像的背景是透明的,以便其后面的区域(图像、背景)的颜色可见。如果使用 JPEG,则无法做到这一点。相反,在 JPEG 文件中,徽标后面的空间默认设置为白色。要获得透明背景,您需要使用 PNG 或 GIF。这就是为什么公司徽标通常保存为 PNG 和 GIF 文件格式的原因。 下面是两张灰色背景的图像: 顶部图像是具有透明背景的 PNG,因此徽标周围的灰色背景可见。右边的图像是没有透明度的 JPEG。请注意,默认背景为白色。 动图 GIF 也是一种无损格式(在创建过程中不会丢失图像信息),并且在论坛和整个 Internet 笔记中普遍存在。GIF 允许透明度,但它们最大的优点 是允许动画(一段时间内但不能长时间)。
|
|