如何解决网站因图片过大加载慢的问题?

图片过大加载慢?而不是图片太多加载慢?

首先要尽可能的压缩,看用户的忍受程度。jpg 可以用很多方法压缩,png 推荐使用 TinyPNG

工具(不过正文图片,显然要选择 jpg 格式的)。

然后

1,不太“在乎”用户体验的省事方法:

图片保存成渐进式的,加载会慢慢变清晰,而不是从上往下依次加载,然后放在 CDN,设置缓存之类。

2,比较“在乎”用户体验的高端方案:

判断用户的设备(主要用在移动端)、网络等,分别加载不同质量的图片(例如高端 iPhone wifi 情况下,就可以加载双倍高清图等,蜂窝网络下面,就加载个单倍或者有损压缩过的)。

或者先加载低质量的图片,让浏览者可以看到,然后再在后台加载更高清的,等加载完了,浏览者还在观看,就插入替换掉。

或者先加载低质量小图片列表,然后让用户点击,触发类似 fancybox 的效果,弹窗出现大图片。

或者利用资源预加载(三个 HTML5 不常见特性简介)当用户还没打开的时候,就开始加载。

时间: 2024-10-06 20:57:45

如何解决网站因图片过大加载慢的问题?的相关文章

网站图片过大加载很慢解决办法

1.使用缓存 2.使用CDN加速3.使用jq延迟加载图片, 用到那个 加载哪个.4.加大服务器宽带 5.检查服务器硬盘读取速度. 压缩图片: png建议使用https://tinypng.com/  非常给力  直接上传图片就可以进行压缩. 原文地址:https://www.cnblogs.com/yuancr/p/8351030.html

IOS开发中如何解决TableView中图片延时加载

经常我们会用tableView显示很多条目, 有时候需要显示图片, 但是一次从服务器上取来所有图片对用户来浪费流量, 对服务器也是负担.最好是按需加载,即当该用户要浏览该条目时再去加载它的图片. - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath { UIImage *image = [self g

10几款网站瀑布流布局图片无限加载动效

jQuery选项卡形式图片瀑布流布局选项卡切换效果代码 jquery masonry瀑布流插件制作图片瀑布流布局代码 原生js简单瀑布流图片无限加载带鼠标悬停图片遮罩效果 jquery masonry瀑布流插件制作图片瀑布流布局代码 jquery柔韧性的图片滑动瀑布流布局 jquery时间轴插件文字图片瀑布流布局时间轴特效(不兼容IE678) modernizr html5图片预加载瀑布流布局鼠标悬停动画效果代码 jquery.waterfall.js自动底部填充对齐的瀑布流布局代码 jquer

关于解决网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案

最近在网站首页上想将Banner壁纸给做到后台上传随时更改的效果.遇到问题便是:将上传的图片路径动态添加到首页css代码中,结果尝试了网上提供的思路,更改相对路径,换为url中“../../Content/”以及“./Content/”之类的,但实际操作并没能实现新上传的图片路径加载到css代码中.首页部分css代码贴出: 1 /*--banner--*/ 2 .banner { 3 background:url(../images/banner-1.jpg) no-repeat 0px 0px

PHP网站验证码图片不显示解决方法

找到php.ini配置文件之后,双击打开,hp_gd2.dll,找到如下图1-2所示.查看extension=php_gd2.dll前面是否有;号,如果有的话,去除,保存.编者注:如果php.ini是在系统目录下的话,保存之后重起电脑才生效,如果是系统变量里直接指定的话,重起IIS服务器或者重起apache服务器即可生效(不用重起服务器电脑). 如果找不到php.ini文件,在别的电脑拷贝一个即可. PHP网站验证码图片不显示解决方法

图片预加载的问题-----有针对加载和缓存的兼容解决

网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面.不过,在web2.0时代,更多人愿意用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片. 知道了一张图片的地址,需要把它在一个固定大小的html容器(可以是div等)里边显示出来,最重要的当然是需要知道这张即将显示的图片的宽和高,然后再结合容器的宽和高,按照一定的缩放比例使图片显示出来.因此,实

Qt做发布版,解决声音和图片、中文字体乱码问题(需要在main里写上QApplication::addLibraryPath("./plugins")才能加载图片,有图片,很清楚)

前些天做Qt发布版,发现居然不显示图片,后来才发现原来还有图片的库没加!找找吧,去qt的安装包,我装在了F盘,在F盘F:/QT/qt/plugins,找到了plugins,这里面有个 imageformats是图片的库,里面有jpg,gif等,你用到那种格式就加那种!加的时候一点过要注意,将imageformats这个文件夹考到你的程序当前文件夹内!并在主函数里加:QApplication::addLibraryPath("./plugins"); 这样你的带图片的发布版就做好了! 看

动画图片预加载

我们想要动画,但是在很多时候都是要先加载元素图片之后才能进行动画,有时候更惨的是图片加载一半或者一部分就进行了动画.如何解决?? ##问题:平行事件(parallel Events) 当我们在加载一个网站的时候,浏览器为了提高速度,浏览器会在加载和渲染html以及css的同事加载起来的内容,例如图片. 这种加载模式意味着我们可更快的看到一些页面的布局和文本内容,但是如果你创建了一个巨大的,杂志风格(通常需要很多大图)的头部的话,图片不会及时加载. ##load事件和动画执行状态 浏览器提供了便捷

利用CSS、JavaScript及Ajax实现图片预加载的三大方法

原文:3 Ways to Preload Images with CSS, JavaScript, or Ajax 译文:利用CSS.JavaScript及Ajax实现图片预加载的三大方法 预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性.