如
网络性能
如何优化网络图像并提高在线性能
这是您在线形象的决定性一步。了解如何优化网络图像意味着以指数方式减少性能问题。事实上,我们通常可以将不良的视觉管理视为导致 80% 结果的 20% 原因。
正如帕累托原理和80/20 规则所暗示的那样:优化网页上的照 葡萄牙材料 片和图形可以让您获得惊人的结果。有时对于大型网站来说是决定性的。
当然,达到最终结果(每次都快速且高性能的页面)的道路更加复杂。但优化图像已经是一个很好的起点。但要注意不要只考虑压缩和减轻重量,还有很多事情要做。如何优化网络图像?
让我们从不受 CMS 影响的评估开始。我们经常谈论 WordPress 的图像优化,以及Smush 等插件的相关使用。我们是否应该尝试在普遍层面上开展工作?
片
后端图像处理
如何测试响应式图像?
方面
延迟加载
压缩
记住SEO优化
您想优化网络照片吗?
进一步探索的来源和链接
为什么要优化图像
原因各有不同,但本质上,我们致力于两大块。第一个涉及用户体验,改善用户体验,第二个涉及搜索引擎优化方面。
简而言之,一切都符合一个需要高度关注的关键概念:在固定和移动设备上浏览的用户的满意度,期望更快的页面。
正如 Google 引用的研究表明:“移动加载时间延迟一秒可能会影响转化率高达 20%”。这意味着页面加载时间增加一秒就足以显着影响转化率。
加载缓慢会降低网站的转化率
准确地说是20%。你知道这意味着什么吗?优化网页的加载速度可以促进智能手机的活动,使网络连接速度较慢且可能无法很好地导航的公众可以访问网站。
如何优化图像
我想从一个明确的观点开始:从图像引入的权重的角度来看,改进网页的最佳方法是经济。这意味着照片、信息图表和视觉表示仅在需要时放置。并不是为了简单的审美。
加快您的网站速度
提高 WordPress 网站转化率的机会。
立即开始
在许多情况下,人们希望添加图像来打破文本,打破文字的围墙。事实并非如此,良好的格式可以提高可读性。由于这个原因,这些照片不会被添加,而是为了向访问该网页的人提供更多信息。想一想:
食谱。
教程。
案例研究。
旅游行程。
在这些情况下,必须有许多图像来向用户描述地点、数据和操作步骤。这是满足搜索意图的需要的一部分。但如果不需要图像怎么办?
你必须插入它们吗?为什么要让页面更重?最好删除不需要的东西:首先要遵循的指南针是必不可少的。然后还有一系列需要极其仔细评估的要素。
格式
在解决网络图像优化主题时要解决的第一点:什么是最好的格式?上传 JPG 格式的照片还是 PNG 格式的图形更好?可以使用 GIF 吗?
出发点很明确:没有绝对的理想体重。如果我的职业是摄影师,而网站是用来推销我的技能的,我就不能发布几张照片并以降低我作品质量的方式进行压缩。
图像质量和重量之间存在平衡。该格式有助于实现此结果,但矢量格式不适用于再现照片等复杂场景。在这种情况下,您应该使用PNG、JPEG 或 WebP。但给出一个定义是正确的。
NPC
该格式不应用压缩算法。它允许您获得最高质量的图像,但文件大小在重量方面会很大。所以你必须小心。
它应该用于图表、使用 Canva 或 Photoshop 等程序创建的图像、信息图表和浏览器屏幕截图。如果资源包含几何形状,请考虑将其转换为矢量格式,例如 SVG。照片呢?我该如何表现?
JPG
JPG 使用有损和无损的组合来减小图像的文件大小。它当然是上传拍摄真实图像的照片的解决方案,不太适合图形。
网络P
WebP 图像比 JPEG 和 PNG 更轻,文件大小可压缩 25-35% 。这可以减少页面重量并提高性能。
webp 图片支持
为什么不是每个人都相信这个解决方案?它不是一种易于管理的格式,最重要的是,它不被某些浏览器接受,例如Safari(旧版本)和Internet Explorer。
事实上,必须使用技巧来根据用户使用的浏览器支持来提供图像类型。
动图
如果你想在网页上添加动画图像,你必须面对一个问题:重量。谷歌的意见?用视频替换 GIF以减少页面重量并避免出现问题。
不相信这个解决方案?您是否正在寻找一种理想的解决方案来压缩 GIF,然后再将内容上传到网站以丰富您的页面?您可以使用在线照片压缩工具,例如Ezgif。
静止无功发生器
这非常适合图标。在网站上,您必须上传专用于社交媒体或指示某些服务的小图像。规则很明确:对这些视觉内容使用 SVG,因为它具有无限可扩展性,可以通过 CSS 进行无限定制,并且是一种语义格式。
在本视频中,您还可以更深入地研究一个基本方面:使用 SVG 文件、矢量图形中可视对象的可缩放矢量图形或图标字体解决方案哪个更好?
欲了解更多信息: 优化字体加载的策略
反应灵敏
了解响应式方法(能够适应屏幕尺寸)对图像的重要性的一个要点是:如果我在移动设备上使用桌面图像会发生什么?
与具有能够适应每个屏幕、设备和设备的单一图像格式的网站相比,数据使用量增加了 2 到 4 倍。在这些情况下,没有比模板更好的解决方案来保证您发布的照片具有此功能。
如何上传响应式图片
要自动管理响应式图像的上传,确保您朝着正确的方向前进,您需要评估一系列非常重要的元素。我们先从图片标签开始。
此步骤允许您根据设备或其方向提供不同版本的图像。总而言之,它是响应式优化的核心。其具体应用涉及不同的源元素来表示不同的图像文件。
<picture>
<source media="(min-width: 800px)" srcset="big.jpg, big-2x.jpg 2x">
<source media="(min-width: 450px)" srcset="small.jpg, small-2x.jpg 2x">
</picture>
正如您从示例中看到的,我们有另一个属性用于优化此步骤。也就是说srcset ,插入的一个元素是为了简化根据设备发出的请求类型选择文件的工作。总之,srcset告诉浏览器哪个图像是最好的。
但如何处理背景图像呢?插入响应式视觉效果的理想解决方案是什么?@media (min-width) CSS用于确保仅当浏览器的宽度大于所选宽度时才下载和应用文件。这是一个例子。
@media (min-width: 400px) {
body {
background-image: url(sfondo.png);
}
}
通过 Javascript 替换图像可能是一种解决方案,因为您可以通过根据屏幕的高度和宽度确定设备的像素数来检查设备并执行操作。必须说的是,考虑到页面权重的增加和图片上传的减慢,就总体优化而言,它并不是最好的。
后端图像处理
对于响应式图像,是否值得拥有一个能够以结构化方式管理文件的结构?是的,您可以使用CDN(内容交付网络)结构来处理要求最苛刻的文件,并以最佳性能方式对其进行管理。
首先具有足够的压缩,重点关注各种WebP 和 JPEG2000,但也允许各种调整大小和剪切操作,同时保持正确的响应格式。
如何测试响应式图像?
您可以使用 Lighthouse 来确保一切正常。通过相关审核开始性能检查,并查找与图像大小检查相关的结果或使用Cloudinary 图像分析工具。
方面
有最大尺寸吗?值得上传大图片吗?结果如何?遵循的规则很简单:您需要上传尺寸适合模板确定的最大必要尺寸的图像。没有进一步的。这减少了充电所需的时间。
但它也节省了用于上传尺寸多余的照片或图像的资源,而这对最终目标毫无用处。也就是说,提供适合使用的内容,同时不降低网站视觉质量。
用于调整照片大小和裁剪照片的程序数不胜数,但如果您不想使用 Photoshop 或 Gimp,您可以利用Befunky等工具的简单性,它可以让您在几秒钟内在线编辑图像。但拥有令 Prestashop 羡慕的图像编辑器的专业精神。
延迟加载
也就是延迟加载,速度慢。通过此解决方案,您可以减少页面加载时的负载。原理很简单:如果一个出版物有 10 张照片,但是当您加载上面的折叠时出现 2 张照片,为什么要让用户等待并忙于浏览器呢?
延迟加载图像
最好只在需要时上传照片和视频。 LazyLoad 正是基于这一原则,并且越来越多地默认集成到 CMS 中。事实上,今天,只需简单分配一个loading=lazy标签,就可以在所有网页上轻松实现 LazyLoad 的使用。
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
只需进行一些编码工作,您就可以将此步骤应用于每个图像和视频。另一方面,加载用户可能永远不会看到的元素是没有用的(不方便)。
这样您就可以避免浪费数据,这对于那些在缓慢且有限的连接上冲浪的人来说尤其重要。最重要的是,您的页面加载速度更快。
压缩
我们千万不要认为优化在线发布的视觉效果只是一个减肥的问题。然而,这确实是拥有更快网页的基本组成部分
因此能够在更短的时间内充电。您深知这是提高SEO定位和可用性的基本条件。但如何以结构化的方式进行呢?
首先必须明白一点:对于图像,以及视频和音频,在不影响结果的情况下,可以谈论有损压缩。
能专家的工作是从非常接近戴明循环的角度来组织的: