一个页面上有大量的图片,加载很慢,你有哪些方法优化这些图片的加载?

简介: 一个页面上有大量的图片,加载很慢,你有哪些方法优化这些图片的加载?

一个页面上有大量的图片,加载很慢,你有哪些方法优化这些图片的加载?

1、使用 Sprites 图片技术

它将一个页面涉及到的所有零星图片都包含到一张大图中去,然后利用 CSS 技术展现出来。这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了,可以减少了整个网页的图片大小,并且利用 CSS Sprites 能很好地减少网页的 http 请求,从而大大的提高页面的性能。

2、压缩文本和图片

压缩技术如 gzip 可以有效减少页面加载的时间。压缩率都可以在大小 70%左右。虽然文本压缩用得比较多,但图片的压缩就比较随意,很多都是直接上传,其实还有很大的压缩空间。

3、延迟显示可见区域外的内容

为了确保用户可以更快地看见可见区域的网页可以延迟加载或展现可见区域外的内容,为了避免页面变形,可以使用占位符标签制定正确的高度和宽度。比如 WP 的 jQueryImage   LazyLoad 插件就可以在用户停留在第一屏的时候,不加载任何第一屏以下的图片信息,只有当用户把鼠标往下滚动的时候,这些图片才开始加载。这样很明显提升可见区域的加载速度,提高用户体验。

4、确保功能图片优先加载

先加载图片再加载其它,会使用户体验感好。但速度不会提升

5、图片格式优化

不恰当的图像格式是一种极为常见的减慢加载速度的罪魁祸首。正确的图片格式可以让图片缩小数倍,如果保存为最佳格式。可以节省大量带宽,减少处理时间时间,大大加快页面加载速。

6、使用 Progressive JPEGs

Progressive JPEGs 图片是 JPEG 格式的一个特殊变种,名为“高级 JPEG”。在创建高级 JPEG 文件时,数据是这样安排的:在装入图像时,开始只显示一个模糊的图像,随着数据的装入,图像逐步变得清晰。它相当于交织的 GIF。


相关文章
|
算法 网络架构
router和route的区别?
router和route的区别?
896 0
|
4月前
|
Web App开发 前端开发 JavaScript
前端性能优化利器:图片懒加载实战解析
前端性能优化利器:图片懒加载实战解析
|
缓存 前端开发 网络协议
性能优化|几个方法让图片加载更快一些
对电商网页的性能而言,图片优化是至关重要的事情,本文就此探讨了一些简单、可靠的图片优化手段。
|
Linux 网络安全 Python
linux centos上安装python3.11.x详细完整教程
这篇文章提供了在CentOS系统上安装Python 3.11.x版本的详细步骤,包括下载、解压、安装依赖、编译配置、解决常见错误以及版本验证。
9282 3
linux centos上安装python3.11.x详细完整教程
|
缓存 前端开发 UED
前端 8 种图片加载优化方案梳理
本文首发于微信公众号“前端徐徐”,详细探讨了现代网页设计中图片加载速度优化的重要性及方法。内容涵盖图片格式选择(如JPEG、PNG、WebP等)、图片压缩技术、响应式图片、延迟加载、CDN使用、缓存控制、图像裁剪与缩放、Base64编码等前端图片优化策略,旨在帮助开发者提升网页性能和用户体验。
2460 0
|
11月前
|
开发者 UED
鸿蒙next版开发:ArkTS组件通用属性(悬浮态效果)
在HarmonyOS 5.0中,ArkTS引入了悬浮态效果的控制属性,使开发者能为组件添加鼠标悬浮时的视觉反馈,增强用户体验。本文详解了hoverEffect属性及其常见效果(Auto、Scale、Highlight、None),并提供了示例代码,展示了如何为按钮设置悬浮效果。通过这些属性,开发者可以实现更生动和互动的界面。
1130 1
|
机器学习/深度学习 监控 人机交互
深度学习之视频中的姿态跟踪
基于深度学习的视频姿态跟踪是一项用于从视频序列中持续检测和跟踪人体姿态的技术。它能够识别人体的2D或3D关键点,并在时间维度上进行跟踪,主要应用于人机交互、体育分析、动作识别和虚拟现实等领域。
310 3
|
Java 数据库连接 mybatis
成功解决: Invalid bound statement (not found) 在已经使用mybatis的项目里引入mybatis-plus,结果不能共存的解决
这篇文章讨论了在已使用MyBatis的项目中引入MyBatis-Plus后出现的"Invalid bound statement (not found)"错误,并提供了解决方法,主要是通过修改yml配置文件来解决MyBatis和MyBatis-Plus共存时的冲突问题。
成功解决: Invalid bound statement (not found) 在已经使用mybatis的项目里引入mybatis-plus,结果不能共存的解决
|
前端开发 PHP
ThinkPHP6布局的方式之模板布局,全局配置方式,模板标签方式,动态方法布局
本文介绍了ThinkPHP6中实现模板布局的三种方式:全局配置方式、模板标签方式和动态方法布局,并通过示例代码展示了如何在项目中应用这些布局方式。
ThinkPHP6布局的方式之模板布局,全局配置方式,模板标签方式,动态方法布局