图片过大时前端如何优化加载

二叶草 2020年2月3日10:39:24优化评论阅读模式
采用不减分辨率的压缩方式进行压缩

    用PS打开图片,点击点击“文件”——“存储为Web所用格式”

图片过大时前端如何优化加载

     将图片存储为Web所用格式,点击“存储”。或者寻找第三方压缩方式https://tinypng.com/

 

将图片改为jpeg渐进式图片

图片过大时前端如何优化加载

    上图是标准型jpg格式的加载方式

图片过大时前端如何优化加载

    上图是渐进式jpeg格式的加载方式。如果你希望将草图先呈现出来然后慢慢进一步清晰,可以采用这种形式。

    想要将转化成渐进型jpeg格式,需要使用phtoshop

    1、首先打开一个图片,选择“文件 -> 存储为”,选择“JPEG”格式,点击“保存”按钮。在“JPEG选项”界面的“格式选项”中选择“连续”,然后在“扫描”选项中设置为“5”

    2、打开一张图片,选择“文件 -> 存储为Web和设备所用格式”,在弹出的界面右上角选择“JPEG”格式,勾选“连续”,点击“存储”按钮即可。

 

懒加载

    当我们打开一个页面时,浏览器就会从上往下读取页面中的<img>标签src中的地址,并且开启线程来进行加载。

    倘若用户的网速不给力或者此页面中的图片太多时,就会发生每张图片都加载了一点但是都没有加载完成,导致最后没有一个图片能正常显示。一方面让用户的体验非常之差,试问谁会一直耐心的等待着页面的加载?另一方面,加载每个图片都要向服务器发送请求,这会增大服务器的压力。

    针对这种情况,就需要运用懒加载技术:先只加载可视窗口区域的图片,当用户向下拖动滚动条时再继续加载后面的图片(也是只加载目前可视窗口区域内的图片)。1.这样减少了加载时的线程数量,使可视区域内的图片也能够快速加载,优化了用户体验。2.减少了同一时间发向服务器的请求数,服务器压力剧减。

 

用图片进行操作

    如果你需要一个gif图片,但由于它加载太慢或者上传不上去,那么可以利用一张长图,通过位置的移动,通过肉眼的视觉残留弄成一个gif图。

    原理:将它一帧一帧向上调,上调的速度过快,可以使观者误以为是一个动图(就像以前一帧一帧的动画片。)

    如果是需要很多icon,那么可以直接放一张有很多icon的大图片,利用位置移动选择不同的icon,这样比上传很多个小图内存小。

 

在寻找靠谱的建站服务?

提供建站全方位托管服务,告诉我你的需求,剩下的交给我帮你处理,建站过程中碰到的任何小问题免费处理,网站所有数据由你自己掌握,还提供网站SEO指导,犹豫什么呢?联系我吧。

 

本文来源于: 图片过大时前端如何优化加载-变化吧门户

特别声明:以上文章内容仅代表作者本人观点,不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。

  • 赞助本站
  • 微信扫一扫
  • weinxin
  • 加入Q群
  • QQ扫一扫
  • weinxin
二叶草
nginx解析漏洞 优化

nginx解析漏洞

phpstudy(小皮模板存在nginx解析漏洞) 影响版本 phptsuy8.1.07的Nginx1.5.11版本影响版本 phptsuy8.1.07的Nginx1.5.11版本 phpstudy介...
网站SEO优化基础流程(新手必看) 优化

网站SEO优化基础流程(新手必看)

宝塔面板搭建一个获取网站的Favicon图标的APIgetFavicon是一个可以获取网站的Favicon图标并显示在你的网页上的项目。安装方法很简单,属于开箱即食。这篇文章还是基于宝塔面板来搭建。 ...

发表评论