移动端性能测试中的图片加载优化之旅

lsekfe

看到这个标题，相信你都会怀疑是否看错公众号了吧，觉得这应该是前端开发会去关注的事，测试人员管这个干嘛，是这样，有一次，我在做一个web网站的压测时，总感觉并发上不去，后台，中间件包括网络等所有性能都是OK的，后来在排查前端时才发现，原来是图片加载速度过慢造成的瓶颈，如果我当初能对前端图片的性能优化多一些认知，那么可能排查起来就更加的丝滑了，所以作为测试人员，是很有必要了解前端图片的优化方法的，这也能提升你在开发心中地位。在当今数字化的世界中，无论是网页设计、移动应用开发，还是各种多媒体软件，图片都是不可或缺的元素。然而，图片的加载速度却常常成为影响用户体验的关键因素。






一、图片压缩
图片压缩是提升加载速度的首要手段。通过减少图片文件的大小，可以显著缩短加载时间，同时又能最大程度地保留图片的视觉质量。     
有损压缩
有损压缩通过舍弃一些不太重要的图像细节来减小文件大小。JPEG 格式是有损压缩的常见代表。例如，对于一张高清风景照片，我们可以使用图像编辑软件（如 Adobe Photoshop 或 GIMP）进行有损压缩。在保存为 JPEG 格式时，调整压缩质量参数，通常在 60% - 80% 之间可以在保持较好视觉效果的同时大幅减小文件大小。
无损压缩
无损压缩则在不损失图像质量的前提下减少文件大小。PNG 格式常用于需要保留透明度或高质量细节的图片。工具如 TinyPNG 可以对 PNG 图片进行高效的无损压缩。假设我们有一个设计精美的图标，使用 TinyPNG 压缩后，文件大小可能减少 30% - 50%，而图标在视觉上毫无变化。


二、选择合适的图片格式
不同的图片格式具有不同的特点和适用场景，根据具体需求选择恰当的格式能有效提高加载性能。
JPEG 格式 适用于色彩丰富、细节丰富的照片和复杂图像。例如，在一个旅游网站上展示的风景照片，JPEG 格式能够在保证较高画质的同时，提供相对较小的文件大小。
PNG 格式 对于需要透明度支持的图片，如带有透明背景的图标、按钮等，PNG 格式是首选。以一个电商网站的商品图标为例，PNG 格式可以确保在不同背景下都能完美展示，而不会出现锯齿或边缘失真。
WebP 格式
WebP 格式是一种新兴的高效图片格式，在相同质量下通常比 JPEG 和 PNG 更小。但需要注意的是，并非所有浏览器都完全支持 WebP 格式。一些前沿的科技公司网站，在支持 WebP 格式的浏览器中使用它来加载图片，从而显著提高了加载速度。


三、图片尺寸优化
确保图片的尺寸与实际显示需求精确匹配，避免加载过大的图片，这能极大地提升加载效率。
响应式设计
在响应式网页设计中，根据不同的设备屏幕尺寸和分辨率，提供相应尺寸的图片。例如，对于一个手机端的网页，当用户在小屏幕设备上访问时，加载的图片尺寸应该适合小屏幕显示，而不是加载为大屏幕设计的高分辨率大尺寸图片。
图片裁剪和缩放 在服务器端或前端对图片进行裁剪和缩放，使其刚好满足显示区域的大小。比如，在一个图片分享应用中，用户上传的原图可能尺寸过大，在展示时，根据页面布局和显示要求，对图片进行裁剪和缩放处理，减少不必要的数据传输。


四、使用内容分发网络（CDN）
CDN 可以将图片缓存到离用户更近的服务器节点上，减少数据传输的距离和时间，从而加快加载速度。
大型电商平台的应用
像亚马逊、淘宝这样的大型电商平台，其商品图片数量庞大。通过使用 CDN，当用户访问商品页面时，图片能够从离用户最近的 CDN 节点快速加载，无论用户身处何地，都能获得流畅的购物体验。
新闻资讯网站的实践 新闻资讯网站通常有大量的图片内容，如图片新闻、广告图片等。利用 CDN 服务，将热门新闻的图片缓存到全球各地的节点，确保用户能够快速获取最新的资讯图片，减少等待时间。


五、图片懒加载
懒加载技术只在图片即将进入用户视口时才进行加载，有效减少了初始页面加载时的负担。
长页面应用
在一个内容丰富的长页面，如博客文章列表或图库页面，只有当用户滚动到图片所在位置时，图片才开始加载。以一个图片博客网站为例，初始加载时只加载页面顶部的几张图片，随着用户向下滚动，后续的图片逐渐加载，避免了一次性加载大量图片导致的卡顿。
移动端应用
在移动应用中，特别是在网络环境不稳定的情况下，懒加载尤为重要。例如，一个移动社交应用的图片墙，只有当用户滑动到特定区域时，对应的图片才开始加载，节省了用户的流量并提高了应用的响应速度。


六、优化图片的 HTTP 请求
减少图片的 HTTP 请求数量可以加快页面的加载速度。
CSS Sprites 技术
将多个小图标合并成一个大的图片文件，通过 CSS 来控制显示的部分，从而减少 HTTP 请求。例如，一个网页的导航栏中有多个小图标，将这些图标整合到一个 CSS Sprite 图片中，只需一次请求即可加载所有图标。
雪碧图的实际应用
在一个电商网站的购物车页面，将购物车的各种操作图标（如添加、删除、修改数量等）整合为一个雪碧图，减少了多个单独图标请求带来的性能开销。
图片的内联
对于一些小的、频繁使用的图片，可以将其以 base64 编码的形式内联在 CSS 或 HTML 中，避免额外的 HTTP 请求。但需要注意，对于较大的图片，这种方式可能会增加文件大小，反而影响性能。


七、服务器端优化
在服务器端进行适当的配置和优化，也能对图片加载速度产生积极影响。
启用 HTTP 缓存
通过设置合适的 HTTP 头信息，让浏览器缓存图片，避免重复请求。例如，设置 `Cache-Control` 和 `Expires` 头，指定图片的缓存有效期。
服务器压缩
服务器可以对图片进行 Gzip 或 Brotli 压缩，减少传输的数据量。这在网络带宽有限的情况下效果尤为明显。


八、前端性能优化技巧
在前端开发中，还有一些技巧可以提升图片加载的性能。
预加载关键图片
对于一些关键的、用户首先会看到的图片，可以使用 HTML 的 `<link rel="preload">` 标签进行预加载，确保在页面加载时这些图片能够快速显示。
利用浏览器的缓存策略
合理设置图片的缓存策略，让浏览器在后续访问时能够直接从缓存中读取图片，而无需重新下载。 通过综合运用上述的性能优化方法，并根据具体的软件项目和用户需求进行针对性的调整和测试，我们能够显著提高图片的加载速度，为用户带来更流畅、更满意的体验。作为软件测试人员，我们要密切关注这些优化措施的效果，通过性能测试工具和实际用户反馈，不断改进和完善图片加载的性能，为打造高质量的软件产品贡献力量。


总结
写了这么多，可能还有同学会问，有什么前端性能测试工具推荐吗，这个太多了，网上一搜一大堆，还是大家多去尝试几款，然后选择适合自己的就好，另外我想说的一点是，工具是小事，主要还在于你对前端性能的概念要清晰，多去看看前端35条军训之类的文章，对你日后从事性能测试是大有裨益的！

lsekfe

后续还会有拓展