提供缩放图像是提供更好站点性能的最被忽略的方法之一。您的图片会阻碍您的网站吗？
图像占用大量文件大小空间，尤其是如果图像过大且过大。因此，如果您要提高页面速度，转化次数或销售量，则图像应该在要优化的事情上排在第一位。
在本文中，我们将重点介绍如何使用WordPress提供缩放图像。您将学习如何以几种不同的方式在WordPress中适当调整图像大小，以及如何使用Smush Pro极大地改善图像优化工作流程。
什么是缩放图像？
网络上的图像必须落在Goldilocks区域。不要太大，不要太小。他们必须是公正的权利。如果它们太小并且放大，它们将变得模糊。
另一方面，如果图像太大，浏览器会将其缩小到合适的尺寸。这不会影响图像的外观，但是会增加页面的文件大小。
由于您看不到质量的变化，因此图像文件上的额外重量很容易被忽略。而且由于大多数人都不知道存在问题，所以他们没有解决它。他们继续依靠浏览器来提供正确的尺寸，因为那是浏览器的目的，对吗？
错误。
根据Google…
理想情况下，您的页面不应提供比用户屏幕上呈现的图像大的图像。更大的内容……只会浪费字节并减慢页面加载时间。
提供太大的图像会在多种方面伤害您。
- 第一，它分散了浏览器的压力，迫使其执行其他服务器请求。与其尽快提供网页，不如停止并调整图像大小。这需要我的朋友们花费一些时间，特别是如果您的网页内容繁重的话。
- 其次，如果您是直接从手机上传完整尺寸的自拍照，但将其显示为小型Gravatar，则您会浪费时间和数据来下载太大的图像。
输入缩放的图像。缩放后的图像是已调整大小以适合您所使用的确切尺寸的图像。与裁剪（最终可能会改变图像的比例）不同，缩放可保留尺寸。
如果您在全尺寸屏幕上阅读此帖子，则该帖子的正文宽度为600像素。由于我们都在WPMU DEV上进行优化，因此当我为博客文章创建图像时，它们的宽度正好为600px。这就是我需要的确切大小，因此浏览器无需执行任何其他工作，因此您不必使用更多数据。
诸如Hummingbird， GTmetrix和Google PageSpeed Insights之类的站点速度优化器 将建议缩放图像以提高性能。
srcset和size属性不是应该用来调整图像大小吗？
是的，没有。您想要峰优化吗？如果你这样做，srcset并size会帮助你更接近理想的图像大小，但不会永远给你你需要的确切大小和它不会削减多余的最大尺寸。
该srcset属性的工作方式是提供图像的URL，然后为浏览器提供图像列表，以供选择各种尺寸。我之前提到的手机自拍照的这组资源看起来像这样：
srcset= “selfie-100x100.png 100w, selfie-200x200.png 200w, selfie-400x400.png 400w”
上方，WordPress告诉浏览器，您比我更了解用户，这是您想要的3种不同尺寸的图像，请选择最适合的一种。
当浏览器需要在评论旁边显示75px x 75px Gravatar时，它将选择集合中的第一个选项并稍加调整大小。如果用户使用视网膜设备，它将选择第二个选项。
这样可以减少一些浪费，但是扩展将使您获得额外的性能。
如何在WordPress中提供缩放图像
首先，您需要知道将在您的站点上使用的图像的尺寸。我说的是横幅图像，英雄图像，博客帖子图像，Gravatar等。
观看我们的快速教程，了解如何在WordPress中检测大小错误的图像。
我们想知道每个图像将显示的最大尺寸是多少，因为我们知道超过此阈值的所有内容都是无用的。
例如，假设我要在网站主页上使用海洋的照片。处于未更改状态的图片为4534px x 3023px。
对于博客文章中的图片，您可能需要提供600px-960px宽的图片，而对于横跨台式机屏幕宽度的英雄特色图片，您需要查看的宽度为1600px范围。
另外请记住，您需要将这些尺寸加倍以适应视网膜屏幕。1600px图像所需的最大尺寸为3200px。
为了找到完美匹配图像所需的大小，我们将在网站上寻找图像并打开浏览器开发人员工具。
如果您使用的是Chrome浏览器，请右键单击图片，然后转到“ 检查”。在Firefox中，选择“ 检查元素”。
在Chrome浏览器中，将鼠标悬停在图片的网址上时，您会看到图片的显示尺寸，并在括号中显示原始的“自然”图片尺寸。该大图像文件是您的访客正在下载的文件。
这在Firefox中类似。检查元素后，您会注意到图像旁边是尺寸。
现在我们知道我们需要图像的大小了，我们可以以几种不同的方式在WordPress中正确调整图像的大小。
在媒体库中裁剪图像
要手动裁剪图像，请转到媒体>库，然后单击要裁剪的图像。然后，单击“ 编辑图像”按钮以打开编辑界面。
使用右侧的相应选项，根据需要缩放或裁剪图像。请记住，如果缩放图像以匹配所需的宽度，则高度可能小于或大于主题中定义的大小，具体取决于原始图像的尺寸。
如果选择缩放图像，则它会相对于原始图像保持适当的比例。另一方面，如果决定裁切图像，则最终不一定会根据选择的尺寸按比例进行编辑。
您可以通过键入所需的宽度和高度来缩放图像，然后单击“ 缩放”按钮；或者，如果您希望裁剪图像，可以通过在图像上单击并拖动鼠标并选择要显示的区域来进行缩放。然后，释放鼠标单击以显示您的选择。
您可以单击并拖动边缘和侧面的正方形以对宽度和高度进行必要的调整，也可以在右侧的“ 选择”字段中输入所需的确切尺寸。
您还可以选择输入所需的图像长宽比：
长宽比是宽度和高度之间的关系。您可以在调整选择大小的同时按住Shift键来保留宽高比。使用输入框指定纵横比，例如1：1（正方形），4：3、16：9等。
您也可以单击并拖动所选区域，以将其移动到想要显示的确切区域。
如果通过使用鼠标选择图像区域来裁剪图像，请单击图像上方的裁剪图标。
接下来，在“ 缩略图设置”下选择要在其中应用更改的预定义图像尺寸。如果要在保留缩略图的同时编辑图像，此选项可能会有所帮助。
例如，您可能想要一个正方形缩略图，仅显示图像的一部分。
完成更改后，请点击图片下方的保存按钮。
您还可以在编辑帖子或页面时通过单击编辑器上方的“ 添加媒体”按钮来手动调整图像大小。
然后，单击“ 媒体库”选项卡，然后选择列出的图像之一。接下来，单击右侧的“ 编辑图像”链接以访问上述相同的编辑界面。
WordPress如何通过媒体设置调整图像大小？
如果您需要手动调整大小的图像是WordPress创建的默认大小，则可以尝试通过管理控制台的“ 媒体设置”来编辑它们。
WordPress的默认图像大小为缩略图，中，大和全尺寸，不过，全尺寸是指上载图像的原始尺寸，无法在“ 媒体设置”中进行更改。要编辑原始图像，请参考上面的详细信息。
要手动调整默认图像尺寸，请转至设置>介质，然后在相应字段中输入要更改的适用图像尺寸所需的最大宽度和最大高度。
如果需要更改缩略图的大小，还可以选择保留复选框以将缩略图裁剪为指定的确切尺寸。通常，缩略图会自动按比例编辑。
完成后，单击页面底部的“ 保存更改 ”。
请记住，这些大小可以在主题中的多个位置使用，因此您可能最终会编辑不需要调整大小的图像。您还可以向WordPress添加自定义尺寸。
保存更改后，请安装并激活“ 重新生成缩略图”插件，以调整先前上传的图像的大小，以符合刚设置的新尺寸。
在画图中编辑文件
在Paint，Adobe Photoshop或所选的图像编辑器中打开图像。我们将使用开发人员工具中提供的尺寸。
在“画图”中，在“ 主页”选项卡中调整大小。将打开一个框，您可以输入新的尺寸。选择 像素 单选按钮，然后编辑水平尺寸。如果选中“ 保持纵横比”复选框，则垂直尺寸将自动调整大小。那就是我们想要的。如果未选中该框，则需要自己进行数学计算。
调整尺寸后，点击确定。然后，您可以将文件保存在Paint中，重新上传到WordPress并将图像替换为新文件。
使用Smush优化图像
当您开始优化图像时，Smush和Smush Pro可以为您节省大量时间。
尺寸检测错误
Smush和Smush Pro在插件设置中都提供了错误尺寸检测选项。如果您像我一样，却忘记了不时调整图像的大小，此功能将帮助您查看哪些图像在减慢您的网站速度。
当您访问您的网站时，太大或太小的图像都会显示黄色轮廓。
当您打开信息选项卡（请参阅黄色的“ i”图标？）时，Smush会让您知道图像尺寸出了什么问题。谢谢Smush！
要在Smush和Smush Pro中启用此功能，请转到插件设置，然后在“ 图像调整大小”部分中，启用“ 检测并显示大小不正确的图像”。然后保存设置，以在站点的前端查看尺寸不正确的图像。
自动调整图像大小
想要阻止自己和他人上传超大型图像，以免占用过多的主机存储空间吗？Smush和Smush Pro可以提供帮助。
在Smush插件设置中，转到“ 图像调整大小” 部分，然后启用“ 调整我的全尺寸图像”。在将图像上传到媒体库之前，Smush会调整其大小以适合您指定的宽度和高度。
Smush还为您提供了保留原始图像副本的选项。
此功能从本质上减少了多余的图像。
一倒，几百走了。
但是，如果您想使所有上传的图像都达到理想的尺寸而又不必执行上述步骤并手动缩放每张图像该怎么办？
轻而易举，成为WPMU DEV成员，即可访问Smush Pro的快速CDN。
尽管您的主机可能在您的主机帐户中包含CDN以改善网站的性能，但Smush Pro的CDN的设计特别考虑了图像优化。
Smush Pro CDN不仅将以闪电般的速度提供您的图像，而且我们的CDN还将为您的用户提供完美尺寸的图像。换句话说，将缩放比例留给我们！
如果您对Google PageSpeed的“适当尺寸的图像”建议有疑问，Smush Pro CDN甚至可以为您提供帮助。
只需启用自动调整大小选项，CDN就会为您提供正确大小的图像，同时保持原始图像不变。感觉怎么样？
图像缩放解决
如您所见，可以使用多种方法 在WordPress中适当调整图像大小，但是如果您有一个包含大量图像的成熟站点，这可能是一个繁琐的过程。
我建议不要使用Smush Pro之类的插件在5分钟而不是5天的时间内解决问题，而不是举起手来说：“哦，那是用户的问题”，而将图像保持不变。您可以在这里注册免费试用版以免费使用Smush Pro。您的用户将感谢您。而且您可能会看到较低的托管成本，因为您不需要太多空间。
这是双赢。src
感谢您的来访，获取更多精彩文章请收藏本站。
1. 资源都是经过站长或作者收集测试修改后发布分享。转载请在文内以超链形式注明出处，谢谢合作！
2. 本站除原创内容，其余所有内容均收集自互联网，仅限用于学习和研究目的，本站不对其内容的合法性承担任何责任。如有版权内容，请通知我们或作者删除，其版权均归原作者所有，本站虽力求保存原有版权信息，但因众多资源经多次转载，已无法确定其真实来源，或已将原有信息丢失，所以敬请原作者谅解！
3. 本站用户所发布的一切资源内容不代表本站立场，并不代表本站赞同其观点和对其真实性负责，若您对本站所载资源作品版权归属存有异议，请留言附说明联系邮箱，我们将在第一时间予以处理 ，同时向您表示歉意！为尊重作者版权，请购买原版作品，支持您喜欢的作者，谢谢！
4. 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客如有发现请立即向站长举报；本站资源文件大多存储在云盘，如发现链接或图片失效，请联系作者或站长及时更新。
暂无评论内容