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

更新日期: 2021-11-22阅读量: 41标签: 图片
在做项目优化的时候,发现页面加载很慢。结果一看主要的问题就是就是图片的大小过慢,然后呢准备呢去做优化, 本来想去用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
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

css多个img标签存在间隙的解决方法总汇

在网上整理了一些解决多个img标签存在间隙的方法:多个img标签写在一行、将要闭合标签的地方与开始标签的地方重合、在img标签的父级上写:font-size:0;这个在解决display:inline-block出现的问题也有帮助、使用display:block(img是内联元素)要float一下才行

前端解决第三方图片防盗链的办法 - html referrer 访问图片资源403问题

笔者网站的图片都是上传到第三方网站上的,比如 简书、掘金、七牛云上的,但是最近简书和掘金都开启了 防盗链,防止其他网站访问他们网站上的图片了,导致笔者的网站存在他们网站上的图片全挂了

h5移动端禁止长按图片保存

在移动端访问H5页面的时候,长按图片就会把图片保存起来,为了能够让用户体验更好一些,我们需要长按的时候也不保存图片。那该如何实现呢?下面给出3种解决方案。使用 pointer-events:none、全局属性、加一层遮罩层

html如何把图片大小变小?

我们在布局图片列表时,通常我们要控制图片的高度和宽度这样来达到图片统一。我们在HTML布局时候直接在图片img标签加宽度和高度属性即可控制图片高和宽。

图片压缩工具推荐

为什么要压缩图片?如果你是web开发者:减小网页、小程序的体积,提升加载速度。如果你是App开发者:减小App的打包体积,提升下载速度。如果你是新媒体从业者:文章体积更小,加快打开速度。如果你是职场用户:邮件附件超限、微信发送太慢,你总会遇到

使用html2canvas将页面转成图

之前在网上找到一个用 <a> 的 download属性下载的方法,确实很简单也很方便,但此方法不支持IE,无奈又找到另一方法。使用html2canvas将页面转成图,用canvas2image下载

玩转html2canvas以及常见问题解决

前端小伙伴经常会遇到页面截图或者把网页中指定的区域(某个大div)的内容转换成png的图片。这个时候常常会用到html2canvas库来实现,js真的很强大。

前端Js图片压缩

实现思路:获取input的file;使用fileReader() 将图片转为base64;使用canvas读取base64 并降低分辨率;把canvas数据转成blob对象;把blob对象转file对象;完成压缩

微信小程序动态设置图片大小

image有默认的固定的宽度和高度,这样我们在做图片自适应的时候,就不好做了,特别是我们在做一些商品详情页的时候,需要image自适应屏幕,按原图比例显示。那么如何让image自适应比例显示呢?

js上传图片,利用canvas实现图片压缩

最近项目中的一个基础功能-----手机上传图片:1、利用canvas进行压缩(这个应该都比较熟悉)2、利用exif-js获取照片旋转角度属性,因为有些手机机型会因为拍照时手机的方向使拍的照片带一个旋转角度的属性

点击更多...

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