确保移动友好性
移动端占所有网络流量的 50%以上,因此,让您的图片适合移动设备至关重要。Google 提供了一个简单的移动端友好度测试 ,可以扫描您的网页并测试其是否适合移动设备,并为您提供有关如何更好地优化图片的建议。对于未通过此测试的网页,请考虑使用响应式图片,这些图片可根据用户使用的设备缩放到合适的尺寸。
通常,HTML、CSS 和 Javascript 的组合用于根据设备提供正确大小的图像。大多数网 白俄罗斯 WhatsApp 数据 站已经适合移动设备。如果您正在处理一个非常老的网站或不确定,只需调整 Web 浏览器的宽度即可。您小的变化而缩放。您可以在本指南中阅读有关创建响应式图像的更多信息。
不要忘记网站质量
图像优化只是确保良好用户体验的一部分。网页上的其他高质量内容可进一步提高其相关性和实用性。Google 在考虑网站质量时会考虑许多不同的因素,包括安全性、专业性、价值、可信度和组织性。您的网页整体越完善,给人们带来的好处就越大,Google 就越有可能对其感兴趣。
如何优化图像以提高速度
根据Google 的一份报告,随着“页面加载时间从 1 秒缩短至 3 秒”,访问者离开网页的概率增加了 32%。这一高统计数据表明,加载速度是网页成功的一个影响因素。没有什么比加载时间过长的图像更能减慢页面速度了。
幸运的是,您可以通过多种方式优化图像以提高页面加载速度。
选择正确的图像格式
选择正确的图片格式是确保图片快速正确加载的第一步。但如何确定哪种图片格式最适合速度优化?第一步是检查 Google 支持的图片格式有哪些。
PNG:PNG 格式通常用于图形、屏幕截图或需要保留背景透明度的图像。
JPEG:JPEG 是最著名的图像格式,适用于大型照片或插图。
SVG:最适合可以以不同尺寸查看的任何自定义徽标或图标。
WebP:对于较小尺寸的图像来说,这是获得高质量效果的最佳选择。
BMP:BMP 被认为是一种过时的选项,用于位图图像。
GIF:用于移动图形或动画。
关于图像优化,从优化的角度来看,GIF 和视频哪个更好,存在很大争议。这两种格式都有各自的优点和缺点。视频往往能获得最高的参与度——近70% 的消费者 在观看产品视频后更有可能购买该产品。同时,视频的加载时间往往比 GIF 更长,这会降低页面速度。选择哪种格式取决于网页上的其他元素。如果网页上有大量文本,请考虑只使用 GIF。如果网页上的内容较少,您可以放心使用视频,而不会影响加载速度。
记住图像压缩率
选好正确的格式后,您还必须考虑图像压缩率。图像压缩过多会导致图像质量不佳,而压缩过少会导致文件大小过大。许多照片编辑网站和应用程序允许您尝试不同的压缩大小。Google 提供了 可应用于图像的压缩方法指南,涵盖了有损压缩等术语。
请记住,对于压缩后的图像文件大小,没有“正确答案”——但 80% 是一个不错的起点。除了在最关键的情况下,您不太可能注意到图像质量有任何下降。
手持相机朝下特写。
来源
考虑使用 WordPress 插件进行图像优化。对于 MarketMuse 博客,我们使用Kraken。设置后,它会在将图像上传到 CMS 时自动压缩图像。这对于创建高效的工作流程非常有用。
选择正确的图像尺寸
提供尺寸合适的图片是确保图片不会对页面加载速度和用户友好度产生负面影响的最后一步。提供尺寸过大的图片会浪费带宽并增加不必要的开销。大多数内容管理系统都会为您处理这个问题,但您仍然需要一张尺寸合适的原始图片。
Chrome 浏览器检查工具可以帮助您快速确定合适的尺寸。渲染尺寸是图像显示的尺寸。在 MarketMuse 博客上,列宽为 760 像素,这实际上是图像显示的最大宽度。固有尺寸是上传到 WordPress(我们的 CMS)的图像的尺寸。通常,固有宽度不应大于渲染宽度。
网页源代码。
使用 Chrome 浏览器检查图像大小。
例外情况是屏幕截图,您希望访问者能够看到在较小尺寸的图像中无法看到的所有细节。例如,在 MarketMuse 博客上,我们经常展示我们平台的屏幕截图。但由于 760 像素的列宽限制,通常很难精确辨别特定功能。
因此,原始图像(本例中为 1644 像素宽)上传到 WordPress 并以较小的 760 像素宽尺寸显示。当读者点击图像时,图像会以全尺寸打开,可以看到所有细节。
MarketMuse 页面库存。
点击查看全尺寸图像。
快速提示:当图像压缩不够时,请考虑使用 CDN(内容分发网络)。CDN 是一组地理分布的服务器,它们共同协作以提供快速的互联网内容分发。速度差异可能相当大,成本却很低,在某些情况下甚至是免费的。阅读Cloudflare的本指南 以了解更多信息。