无论您是如何创建网站,发布博客文章,或为您的业务运行社交媒体平台,图像至关重要

用户期望正确,高质量的图像。他们在使您的网站或品牌看起来很重要,并与用户建立信任。想象一下两个电子商务网站销售同一双鞋子 - 一个有模糊和扭曲的产品截图,另一个有晶体清晰的产品。你更有可能从哪个?图像在向用户传达重要信息时也很重要。一个方法CSS教程具有全宽度图像比具有图像缩略图的教程更有效,更优选。

立即下载:免费介绍HTML和CSS指南

除了影响用户体验在这些方式中,没有正确调整大小的图像网站性能。超大,高分辨率图像可能在前端看起来很好,但它们的文件大小很大。这意味着浏览器将需要更长时间才能加载它们,这将增加您的网站的总体负载时间。

通常,这种额外的负载时间是不必要的。假设你有一个图像,它是2000 x 2000像素,但它进入的容器只有200 x 200像素。在这种情况下,您的浏览器仍然加载每个像素,即使它被约束到更小的显示区域。这意味着浏览器必须超过10倍超过必要的。

在调整图像大小时,您应该瞄准标准宽度或高度。它将取决于各种因素,包括在您的网站上放在您的网站上,您的大多数访客是否正在使用桌面或移动设备,等等。一般的拇指规则是您希望在最低文件大小和可接受的质量之间取得平衡。通常,可接受100kb或更小的图像文件大小。

在这篇文章中,我们将通过如何在不损失质量的情况下调整图像大小。为了这个演示,我们将使用免费的Adobe Photoshop Express工具,但基本步骤适用于任何工具。然后我们将简要介绍其他图像调整大小工具,以便您可以为您的网站找到合适的图像。

1.上传图像。

上传图像以在Adobe Photoshop Express中调整大小

大多数图像调整工具大小,您可以拖放图像或从计算机上传。一些工具,就像Squoosh.甚至允许您复制和粘贴图像。

2.键入宽度和高度尺寸。

在Adobe Photoshop Express中键入宽度和Heigh尺寸以调整图像大小

让我们说要调整的图像大小是6000 x 4000像素,而且你想调整它到598 x 398 px的大小,使其成为博客文章的特色图像。您只需输入这些维度,然后单击调整图像大小按钮。一旦调整大小,请单击下载从屏幕顶部的工具栏。

3.压缩图像。

在Adobe Photoshop Express中压缩图像与质量滑块

调整图像大小将显着降低图像的文件大小。但是你可以通过压缩它进一步走一步。要压缩图像,许多工具提供了滑模。移动到左侧的尺度将减少图像的文件大小,也可以降低其质量。将其移动到右侧将增加文件大小和质量。

利用这种特定的图像,我几乎不得不将尺度移动到左侧,以将文件大小缩小到小于100kb。

4.下载调整大小的图像。

在Adobe Photoshop Express中下载图像

您现在可以用新的尺寸下载图像并将其上传到您的网站。

在下面你可以在6000 x 4000 px和调整大小的图像之间找到比较的原始图像与598 x 398 px。看起来很好,对吗?

比较Adobe Photoshop Express中的原始和调整大小图像

图像调整工具大小

手动调整您上传到您网站的每个图像的大小将需要巨大的时间和能量投资 - 并且可能在图形设计中有一些经验。好消息是您可以使用raybetapp图像调整大小的工具简化过程。

以下是最佳图像调整工具的集合。它们的功能和价格范围内容,您可以选择正确的需求和预算。让我们开始吧。

Adobe Photoshop Express.

在Adobe Photoshop Express工具中调整图像大小

Adobe Photoshop Express是一个免费的照片编辑工具,使您可以在几次点击次点击中调整大小,压缩和裁剪任何图像。您可以调整Facebook的照片大小,LinkedIn Profile Image,Twitter Banner,YouTube缩略图或屏幕截图。您可以根据需要调整多种图像的大小,但您必须创建一个帐户来下载它们。

调整大小

用resize.avize upize调整图像大小

Resize.App是一个免费的照片编辑工具,具有令人难以置信的简单界面。您可以通过宽度,高度,百分比,最大侧或其他自定义值调整图像大小。调整图像大小后,您可以使用滑块优化它并转换它。此工具的一个缺点是在优化时不会显示文件大小。这可能使得难以知道何时停止向右滑动尺度。

be

用Befunky工具调整图像大小

Befunky旨在成为初学者的Photoshop。它丰富的功能,但呈现在用户友好的界面中。您可以调整大小,裁剪和旋转图像,添加可定制的图形,框架,叠加和纹理等。使用Befunky的批量图像Resizer,您甚至可以在批量中调整图像的大小而不是一个。有一个免费版本有125个数字效果,而且高级版本有数百个。

picresize

用PICRSIZE工具调整图像的大小

使用Picresize,您可以免费调整裁剪,裁剪和编辑图像。您可以通过预设百分比来减少图像,或通过将宽度和高度以像素设置为单位。重要的是要注意两件事。Picresize的免费版仅用于收缩照片;你必须购买Picresize Pro来扩大它们。您只能压缩jpg文件格式,而不是滑块,有一个下拉菜单,选项:好,更好,最好。虽然您无法看到图像文件大小,但您可以设置最大文件大小。

准备调整大小?

在没有失去质量的情况下调整图像的大小是一个重要的技能,无论您是网站所有者,社交媒体营销人员,博主还是其他东西。值得庆幸的是,由于在线提供的免费和高级工具,该过程很容易。您可以在更短的时间内调整图像大小提高您的网站速度并因此欣赏您的访客。

新的呼叫动作

CSS介绍

最初出版于12月21日,2020年7:00:00,Upduated 1221年1月12日

话题:

网站性能