• 注册
    • 今日签到
    • 连续签到
  • 游骑兵
    今天 00:00
    连续13
    关注
  • huiwu
    今天 01:56
    连续1
    关注
  • hanaicc
    今天 02:43
    连续3
    关注
  • xinle
    今天 04:54
    连续14
    关注
  • xinle
    很开心曾经在水晶之家与大家寻梦
    连续14
    关注
  • 连续13
    关注
  • 连续3
    关注
  • 连续1
    关注
  • 网站维护 关注:2 内容:14

    webp全站启用,减少流量消耗

  • 查看作者
  • 打赏作者
  • 拉黑名单
    • webp是谷歌推出的一种新型照片格式,相比传统的JPG,png它非常小,同一张照片它至少要降低其原有容量30%以上,讲过最夸张的是5MB的原图压缩到了几百KB,对比看不出差异。这么好的图片格式早就应该推广开来的,奈何IOS设备一直不兼容。 进来网站的开支越来越大,也顾不了兼容问题了。利用oss自带的转化功能直接将全站所有相册图片转为webp了,图片原图并没有直接替换,还在服务器中存储的。

      <?php
      if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone')||strpos($_SERVER['HTTP_USER_AGENT'], 'iPad')){
      echo 'systerm is IOS';
      }else if(strpos($_SERVER['HTTP_USER_AGENT'], 'Android')){
      echo 'systerm is Android';
      }else{
      echo 'systerm is other';
      } ?>
      <script>
      function checkWebp() {
      try{
      return(document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
      }catch(err) {
      return false;
      }
      }
      var webpShow = checkWebp(); // true or false
      if( webpShow == true) {
      alert("你的浏览器支持webp");
      } else {
      alert("你的浏览器不支持webp,将请求png");
      }
      </script>
      <?php
      $webp = strpos($_SERVER['HTTP_ACCEPT'], 'image/webp');
      define('IS_WEBP', $webp === false ? 0 : 1);
      if(IS_WEBP == 0){
      ECHO '你是不支持的';
      }ELSE{
      echo '你是支持的';
      }
      ?>

      以上三段代码演示分别为
      1.IOS和安卓系统环境判定,webp的支持基本在IOS的不兼容。
      2.JS判断浏览器是否支持webp
      3.php判断浏览器是否支持webp
      ------------------------------

      webp的压缩有多夸张,我们做一个图片对比演示!

      回复

      使用PHP进行环境判定,如果支持webp那就输出webp格式图片,如果不支持的话就输出?x-oss-process=style/width960

      function replace_text_wps($text){
      $webp = strpos($_SERVER['HTTP_ACCEPT'], 'image/webp');
      define('IS_WEBP', $webp === false ? 0 : 1);
      if(IS_WEBP == 0){
      $replace = array(
      '?x-oss-process=style/webp' => '?x-oss-process=style/width960'
      );
      $text = str_replace(array_keys($replace), $replace, $text);
      return $text;
      }else{
      $replace = array(
      );
      $text = str_replace(array_keys($replace), $replace, $text);
      return $text;
      }
      }
      add_filter('the_content', 'replace_text_wps');
      add_filter('the_excerpt', 'replace_text_wps');


      回复

      关于webp的问题基本到此结束,目前唯一的弊端在于webp兼容问题虽然在网页端能够完美解决。但是用户保存webp图片到手机电脑本地基本无法观看,支持该格式的看图软件太少,会给用户造成一定的困扰。(水晶之家PC端自带图集下载功能,下载的是JPG png原图)

      回复
      你需要登录,才能进行发帖操作
    • 帖子间隔 侧栏位置: