Post by account_disabled on Jan 3, 2024 5:42:15 GMT -5
我认为我们都因在某个时候离开网站而感到内疚,因为内容加载速度没有我们预期的快。事情就是这样,我们别再自欺欺人了,我们的耐心越来越少了。 发生这种情况的原因有多种,但我们将在这篇文章中提到的主要原因是所使用的图像没有被正确压缩。这是我们的错,这些可怜的设计师只希望我们欣赏的设计看起来与我们投入的奉献精神相当。 事实是,我们不需要保存所有图像,就像它们要打印在广告牌上一样,我们只需要它们测量它们将占据的屏幕像素。这应该是我们在设计网络时的口头禅,最重要的是,设计用于电子商务的页面时,因为必须执行良好的压缩,以便它们按照我们预期的速度加载。 理想情况下,最大的图像(例如封面横幅)不应超过 120 kb,其余图像不应超过 80/100 kb。 下面我们告诉您需要考虑的方面以及保存图像的四种不同方法 目录 1. 屏幕上图像的实际尺寸 2. 原始照片的质量和尺寸 3. 保存图像 3.1. 保存在 Illustrator 中 3.2. 导出为: 3.3. 导出为网络(旧版): 3.3.1. 保存在 Photoshop 中 3.3.2. 保存为网络(旧版) 3.4. 图像处理器 4. 您可能还对: 屏幕上图像的实际尺寸 我们必须清楚的第一件事是我们的设计将在屏幕上占用多少空间。重要的是要知道计算机显示器的最大尺寸为 1920 x 1080 dpi,因此,我们的设计宽度不应超过 1920 dpi(由于滚动,高度可以更高),因为那样它们会比屏幕上,我们会加载我们的网站不必要的信息和重量。
因此,无论您是在 Photoshop 还是 Illustrator 中进行设计(这里更好),您都必须将工作台放置到该尺寸(1920dpi 宽度)或根据设备需要的尺寸(如果您要为平板电脑、手机创建内容)等等,您将必须寻找具体的测量并从那里开始创建)并开始元素的组合而不超出工作表的限制。 这样,当我们完成时,我们将知道每个元素各自的大小,这将是我们保存文件的大小。 原始照片的质量和尺寸 该理论指出,我们应该事先编辑图像,使其完全符合 手机号码列表 我们需要的像素,也就是说,我们应该剪掉图像中剩余的像素,但现实是,在日常工作中,以工作的仓促和工作量来说,这几乎是不可能的。 事实是,我们将图像放置在与下载时相同的尺寸,然后根据我们的喜好缩放它们。虽然这不是最理想的,但这是我们大多数人所做的,是的,我们可以继续获得具有良好质量重量比的优化图像。 我们只需要记住,如果我们使用的图像非常小,那么在缩放它时我们会损失很多质量,如果它的尺寸很大但从一开始就已经像素化,那么在优化时我们会得到不合适的结果。结果。 理想情况下,我们下载或使用满足以下特征的图像: 尺寸与最终设计相似 看起来很清晰,质量也很好 与我们的设计具有相同的方向,我们根据需要寻找横向或垂直图像,以避免缩放图像超过允许的范围 保存图像 这是最重要的部分,其中,我们首先要考虑的是我们设计时使用的颜色模式,我们必须始终以RGB进行。
这不仅使颜色更加鲜艳夺目,而且还减轻了文件的重量。 保存在 Illustrator 中 如果您在Illustrator中完成大部分设计,则在保存为 Web 时必须非常小心,因为根据我的经验,压缩比我们在Photoshop中得到的压缩更糟糕,而且,因为如果我们做得不正确,虽然我们在工作台上制作了具有正确尺寸的图像,但导出的图像可能没有这些尺寸。下面我解释一下两种导出方法以及应该使用的参数: 导出为: 如果我们要文件/导出为,首先我们必须选择文件类型,在这种情况下,当我们谈论更好地理解时,我们将使用JPG格式 导出网络图像 一旦选定,我们就必须选择规格。为了导出遵循我们在工作台上使用的测量值(例如 1920x1080),我们必须选择72 dpi 分辨率。 此选项的缺点是我们无法预览文件的重量,因此我们将浪费大量时间进行测试,直到达到所需的压缩效果,结果我们将获得压缩效果不佳且像素化的图像。 JPEG 选项 导出为网络(旧版): 在这种情况下,由于它是针对网络的,因此我们不必注意分辨率,因为它是自动完成的,但我们必须注意图像的大小是否正确以及文件的重量(底部)左)超过 120 kb。对于权重的增加或减少,我们将更改质量参数。 导出到网络 保存在 Photoshop 中 虽然我几乎没有在 Photoshop 中设计任何东西,但它是我最喜欢的保存和压缩图像的工具,因为它是我所知道的工具中提供最佳效果的工具。
因此,无论您是在 Photoshop 还是 Illustrator 中进行设计(这里更好),您都必须将工作台放置到该尺寸(1920dpi 宽度)或根据设备需要的尺寸(如果您要为平板电脑、手机创建内容)等等,您将必须寻找具体的测量并从那里开始创建)并开始元素的组合而不超出工作表的限制。 这样,当我们完成时,我们将知道每个元素各自的大小,这将是我们保存文件的大小。 原始照片的质量和尺寸 该理论指出,我们应该事先编辑图像,使其完全符合 手机号码列表 我们需要的像素,也就是说,我们应该剪掉图像中剩余的像素,但现实是,在日常工作中,以工作的仓促和工作量来说,这几乎是不可能的。 事实是,我们将图像放置在与下载时相同的尺寸,然后根据我们的喜好缩放它们。虽然这不是最理想的,但这是我们大多数人所做的,是的,我们可以继续获得具有良好质量重量比的优化图像。 我们只需要记住,如果我们使用的图像非常小,那么在缩放它时我们会损失很多质量,如果它的尺寸很大但从一开始就已经像素化,那么在优化时我们会得到不合适的结果。结果。 理想情况下,我们下载或使用满足以下特征的图像: 尺寸与最终设计相似 看起来很清晰,质量也很好 与我们的设计具有相同的方向,我们根据需要寻找横向或垂直图像,以避免缩放图像超过允许的范围 保存图像 这是最重要的部分,其中,我们首先要考虑的是我们设计时使用的颜色模式,我们必须始终以RGB进行。
这不仅使颜色更加鲜艳夺目,而且还减轻了文件的重量。 保存在 Illustrator 中 如果您在Illustrator中完成大部分设计,则在保存为 Web 时必须非常小心,因为根据我的经验,压缩比我们在Photoshop中得到的压缩更糟糕,而且,因为如果我们做得不正确,虽然我们在工作台上制作了具有正确尺寸的图像,但导出的图像可能没有这些尺寸。下面我解释一下两种导出方法以及应该使用的参数: 导出为: 如果我们要文件/导出为,首先我们必须选择文件类型,在这种情况下,当我们谈论更好地理解时,我们将使用JPG格式 导出网络图像 一旦选定,我们就必须选择规格。为了导出遵循我们在工作台上使用的测量值(例如 1920x1080),我们必须选择72 dpi 分辨率。 此选项的缺点是我们无法预览文件的重量,因此我们将浪费大量时间进行测试,直到达到所需的压缩效果,结果我们将获得压缩效果不佳且像素化的图像。 JPEG 选项 导出为网络(旧版): 在这种情况下,由于它是针对网络的,因此我们不必注意分辨率,因为它是自动完成的,但我们必须注意图像的大小是否正确以及文件的重量(底部)左)超过 120 kb。对于权重的增加或减少,我们将更改质量参数。 导出到网络 保存在 Photoshop 中 虽然我几乎没有在 Photoshop 中设计任何东西,但它是我最喜欢的保存和压缩图像的工具,因为它是我所知道的工具中提供最佳效果的工具。