图片降级方案原来这么简单?

更新日期: 2021-11-22阅读: 1.9k标签: 方案
在做项目优化的时候,发现页面加载很慢。结果一看主要的问题就是就是图片的大小过慢,然后呢准备呢去做优化, 本来想去用webp,去优化的,但是呢这个图片是不是我们就用不了呢,然后看了下业界优化王,直接打开了淘宝网的首页。淘宝的首屏加载是很快的,然后 我就去看了下他图片的格式:


这种图片其实是做了降级处理如果说 支持webp就使用, 如果不支持的话就使用jpg

为什么要做图片降级

图片的格式有很多 jpeg png webp等,我们经常使用webp格式的图片,因为webp格式的图片拥有无损压缩和有损压缩两种模式而且压缩率更高等优点。但是webp格式的图片同样也有缺点,ios webview和IE不支持webp。所以我们要检测浏览器是否支持webp格式的图片,如果不支持webp则展示图片的其它格式。

降级方案

html 图片懒加载

<div class="box">
    <img   alt="">
</div>

检测浏览器是否支持该webp

 function isSupportWebp(cb) {
        let img = new Image();
        img.src = webpPath;
        img.onload = function() {
            cb(true);
        }
        img.onerror = function() {//浏览器不支持该图片格式时会触发
            cb(false);
        }
    }

img path 截取 图片展示

 function LoadImg() {
        let img = document.getElementsByTagName('img')[0];
        isSupportWebp(function(isSupport) {
            if(isSupport) {
                img.src = webpPath;
            } else {
                let index = webpPath.indexOf('_.webp');
                if(index!=-1) {
                    webpPath = webpPath.slice(0,index);
                }
                img.src = webpPath;

            }
        });
    }

完整代码

<body>
<div class="box">
    <img   alt="">
</div>
<script>

    let webpPath = './img/O1CN01xYaPxM1CgQAujTNvy_!!0-saturn_solar.jpg_220x220.jpg_.webp';
    function isSupportWebp(cb) {
        let img = new Image();
        img.src = webpPath;
        img.onload = function() {
            cb(true);
        }
        img.onerror = function() {
            cb(false);
        }
    }
    function LoadImg() {
        let img = document.getElementsByTagName('img')[0];
        isSupportWebp(function(isSupport) {
            if(isSupport) {
                img.src = webpPath;
            } else {
                let index = webpPath.indexOf('_.webp');
                if(index!=-1) {
                    webpPath = webpPath.slice(0,index);
                }
                img.src = webpPath;

            }
        });
    }
   LoadImg();
</script>
</body>

总结

前端性能优化永远是一个永无止境的话题, 还是需要结合项目具体问题具体分析。

文章来源于前端图形 ,作者前端图形Fly

链接: https://www.fly63.com/article/detial/10841

preact_一款React的3kb轻量化方案

是react的3kb轻量化方案,拥有同样的 ES6 API,Preact 在 DOM上实现一个可能是最薄的一层虚拟 DOM 实现。

Vue前端鉴权方案,前后端分离

前端路由鉴权,屏蔽地址栏入侵,路由数据由后台管理,前端只按固定规则异步加载路由,权限控制精确到每一个按钮,自动更新token,同一个浏览器只能登录一个账号

URI不规范编码解决方案

RFC 7230 与 RFC 3986 定义了 HTTP/1.1 标准并对 URI 的编解码问题作出了规范。但是,文本形式的规范和最终落地的标准之间总是存在着差距。标准中共 82 个字符无需编码。

es6模块加载方案

本篇我们重点介绍以下四种模块加载规范: AMD CMD CommonJS ES6 模块 最后再延伸讲下 Babel 的编译和 webpack 的打包原理。

Github访问速度慢的解决方案总汇

GitHub的CDN(Content Delivery Network,即内容分发网络)域名遭到DNS污染,无法连接使用GitHub的加速分发服务器,所以国内访问速度较慢。

开发人员犯的五大 JavaScript 错误及其解决方案

JavaScript 语言有着悠久的历史。有很多开发人员仍在学习基础知识。但是,如果您正在尝试学习该语言并迈出第一步,您需要知道新开发人员会犯什么错误。您已经研究过 JavaScript 开发教程,并且知道它是世界上最流行的语言之一。

微信中H5页面唤起 APP方案_直接打开appStore

H5网页在微信上是无法直接打开app链接的,需要使用微信开放标签wx-open-launch-app,它主要用于微信H5网页唤醒app,该标签只有在微信中才会显示。

前端加载超大图片(100M以上)实现秒开解决方案

而对于几百M或上G的大图而言,不管对图片进行怎么优化或加速处理,要实现秒开也是不太可能的事情。而上面介绍的第二条“图像分割切片”是最佳解决方案。下面介绍下如何对大图进行分割

现代 CSS 解决方案:原生嵌套(Nesting)

CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段,而今天(2023-09-02),CSS 原生嵌套 Nesting 终于成为了既定的规范!在之前,只有在 LESS、SASS 等预处理器中,我们才能使用嵌套的写法

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!