提高图片的清晰度和加载速度

在处理图片时，一些图片加载很慢，把图片缩放压成缩略图，但是图片模糊不清，可以采用下面两种方法实现加载图片的高清度，也能提高图片加载速度，提高用户体验

1、先让客户端加载像素小的缩略图：

< img src="缩略图.jpg" name="pic" width="800" height="600" id="news" />

然后用js处理：

var img = new Image();//新建一个图片对象
img.src = "原图.jpg"; //最终显示的大图
img.onload = function() {
document.getElementById('news').src = this.src;
}

实现预加载缩略图，最终显示像素高的原图，这样做的好处是避免用户长时间等待图片而跳出
2、用ps将图片像素压缩，实现图片加载高像素。

提高图片的清晰度和加载速度相关推荐

如何提高网站的页面加载速度
英文 | https://javascript.plainenglish.io/how-to-improve-your-websites-page-load-speed-8fa81caf3ed2 翻译 ...
浅析用Base64编码的图片优化网页加载速度
想必大家都知道网页加载的过程,从开始请求,到加载页面,开始解析和显示网页,遇到图片就再次向服务器发送请求,加载图片.如果图片很多的话,就会产生大量的http请求,从而影响页面的加载速度.所以现在有一种 ...
Typora图片上传和加载问题解决方案
一.问题描述: 最近买了正版的Typora,想着要多更新,用最新的Typora,结果发现,图片不能显示了.经过多次测试,发现图片能上传到gitee上,但是在Typora上,但是却不能在Typora加载 ...
图片较多时要提高网页加载速度
1.图片懒加载将图片src先赋值为一张默认图片,当用户滚动滚动条到可视区域图片的时候,再去加载后续真正的图片如果用户只对第一张图片感兴趣,那剩余的图片请求就可以节省了. 懒加载(LazyLoad) ...
C# MVC使用阿里云对象存储加快图片加载速度(一)
公司有个点餐的项目有大量的图片需要在扫码后的网页进行加载,刚开始使用的客户少的时候公司的4核8G,5M带宽的服务器还能挺快的加载图片和网页,但是客户一多,由于客户大多是快餐行业的,中午点餐的人数是相当 ...
提高网站第一次加载速度
特别是在手机端访问,用户第一次打开网站,如果得到反馈的时间太久,用户很可能在页面完成加载之前就离开,不会再次访问.所以,网站.web App,提高首次访问的加载速度就显得特别重要了.第一次加载速度是用 ...
Windows下使用apache模块实现合并多个js、css提高网页加载速度
这篇文章主要介绍了Windows下使用apache模块实现合并多个js.css提高网页加载速度,本文使用的模块是基于mod_concat自己修改的,需要的朋友可以参考下现在的网站表现力越来越丰富,页 ...
如何提高图片清晰度？三种方法来帮你！
如何提高图片清晰度?图片在上传到网络后会被压缩,导致图片变得模糊.今天,我将分享三种方法,帮助您提高图片的清晰度. 方法一:使用记灵在线工具工具地址:记灵在线工具 - 更专注于发现工具的实用性该工 ...
前端静态资源请求和加载优化总结
如果有这样一个项目,js脚本数量100+,其中50个是各种框架或库,css数量20+,图片若干 .那么,不用说,这个页面加载起来,一定快不了. 静态资源的请求和加载速度,直接影响页面呈现,应该怎么优化 ...

提高图片的清晰度和加载速度

在处理图片时，一些图片加载很慢，把图片缩放压成缩略图，但是图片模糊不清，可以采用下面两种方法实现加载图片的高清度，也能提高图片加载速度，提高用户体验

提高图片的清晰度和加载速度相关推荐

最新文章

热门文章