ওয়েবপি সমর্থন সনাক্ত করা হচ্ছে

Question 1

আমি কীভাবে জাভাস্ক্রিপ্টের মাধ্যমে ওয়েবপির সমর্থন সনাক্ত করতে পারি? আমি যদি সম্ভব হয় তবে ব্রাউজার সনাক্তকরণের চেয়ে বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করতে চাই, তবে আমি এটি করার কোনও উপায় খুঁজে পাচ্ছি না। মডার্নিজার ( www.modernizr.com ) এটি পরীক্ষা করে না।

Question 2

এটি আমার সমাধান - প্রায় 6 মিমি গ্রহণ করছে এবং আমি ওয়েবপি আধুনিক আধুনিক ব্রাউজারের জন্য কেবল একটি বৈশিষ্ট্য হিসাবে বিবেচনা করছি। বৈশিষ্ট্যটি সনাক্ত করার উপায় হিসাবে চিত্রের পরিবর্তে ক্যানভাস.টোডাটা ইউরাল () ফাংশন ব্যবহার করে একটি ভিন্ন পদ্ধতির ব্যবহার করে:

function support_format_webp()
{
 var elem = document.createElement('canvas');

 if (!!(elem.getContext && elem.getContext('2d')))
 {
  // was able or not to get WebP representation
  return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;
 }
 else
 {
  // very old browser like IE 8, canvas not supported
  return false;
 }
}

Question 3

আমি মনে করি এরকম কিছু কাজ করতে পারে:

var hasWebP = false;
(function() {
  var img = new Image();
  img.onload = function() {
    hasWebP = !!(img.height > 0 && img.width > 0);
  };
  img.onerror = function() {
    hasWebP = false;
  };
  img.src = 'http://www.gstatic.com/webp/gallery/1.webp';
})();

ফায়ারফক্স এবং আইইতে, "অনলোড" হ্যান্ডলারটি ঠিক তখনই ডাকা যাবে না যদি চিত্রটি বোঝা যায় না, এবং পরিবর্তে "অ্যানরর" ডাকা হয়।

আপনি jQuery উল্লেখ করেন নি, তবে কীভাবে সেই চেকটির অ্যাসিনক্রোনাস প্রকৃতির সাথে মোকাবিলা করবেন তার উদাহরণ হিসাবে আপনি কোনও jQuery "ডিফার্ড" অবজেক্ট ফিরিয়ে দিতে পারবেন:

function hasWebP() {
  var rv = $.Deferred();
  var img = new Image();
  img.onload = function() { rv.resolve(); };
  img.onerror = function() { rv.reject(); };
  img.src = 'http://www.gstatic.com/webp/gallery/1.webp';
  return rv.promise();
}

তাহলে আপনি লিখতে পারেন:

hasWebP().then(function() {
  // ... code to take advantage of WebP ...
}, function() {
  // ... code to deal with the lack of WebP ...
});

এখানে একটি jsfiddle উদাহরণ।

আরও উন্নত পরীক্ষক: http://jsfiddle.net/JMzj2/29/ । এটি একটি ডেটা ইউআরএল থেকে চিত্রগুলি লোড করে এবং এটি সফলভাবে লোড হচ্ছে কিনা তা পরীক্ষা করে। যেহেতু ওয়েবপি এখন লসলেস ইমেজগুলিকে সমর্থন করে, আপনি এখনকার ব্রাউজারটি কেবল ক্ষতিকারক ওয়েবপি বা লসলেস ওয়েবপিকে সমর্থন করে কিনা তা আপনি পরীক্ষা করতে পারেন। (দ্রষ্টব্য: এটি স্পষ্টভাবে ডেটা ইউআরএল সমর্থনের জন্যও পরীক্ষা করে))

var hasWebP = (function() {
    // some small (2x1 px) test images for each feature
    var images = {
        basic: "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoCAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56QAAAAA==",
        lossless: "data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA="
    };

    return function(feature) {
        var deferred = $.Deferred();

        $("<img>").on("load", function() {
            // the images should have these dimensions
            if(this.width === 2 && this.height === 1) {
                deferred.resolve();
            } else {
                deferred.reject();
            }
        }).on("error", function() {
            deferred.reject();
        }).attr("src", images[feature || "basic"]);

        return deferred.promise();
    }
})();

var add = function(msg) {
    $("<p>").text(msg).appendTo("#x");
};

hasWebP().then(function() {
    add("Basic WebP available");
}, function() {
    add("Basic WebP *not* available");
});

hasWebP("lossless").then(function() {
    add("Lossless WebP available");
}, function() {
    add("Lossless WebP *not* available");
});

Question 4

মধ্যে পছন্দসই সমাধান HTML5

<picture>
  <source srcset="/path/to/image.webp" type="image/webp">
  <img src="/path/to/image.jpg" alt="insert alt text here">
</picture>

ডাব্লু 3 সি তে উইকি

Question 5

গুগলের সরকারী উপায়:

যেহেতু কিছু পুরানো ব্রাউজারের ওয়েবপিকে আংশিক সমর্থন রয়েছে , সুতরাং আপনি কোন নির্দিষ্ট ওয়েবপ বৈশিষ্ট্যটি নির্দিষ্ট করে এই বৈশিষ্ট্যটি ব্যবহার ও সনাক্ত করার চেষ্টা করছেন তা আরও সুনির্দিষ্ট হওয়া ভাল এবং কোনও নির্দিষ্ট ওয়েবপ বৈশিষ্ট্যটি কীভাবে সনাক্ত করতে হয় তার জন্য গুগলের অফিসিয়াল সুপারিশটি এখানে :

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, isSupported)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

ব্যবহারের উদাহরণ:

check_webp_feature('lossy', function (feature, isSupported) {
    if (isSupported) {
        // webp is supported, 
        // you can cache the result here if you want
    }
});

মনে রাখবেন যে চিত্র-লোডিং অ-ব্লকিং এবং অ্যাসিনক্রোনাস । এর অর্থ হ'ল যে কোনও কোড যা ওয়েবপ সাপোর্টের উপর নির্ভর করে সেগুলি অবশ্যই কলব্যাক ফাংশনে রাখা উচিত।

এছাড়াও মনে রাখবেন যে অন্যান্য সিঙ্ক্রোনাস সমাধানগুলি ফায়ারফক্স 65 এর সাথে ভালভাবে কাজ করবে না

Question 6

এটি একটি পুরানো প্রশ্ন, তবে মডার্নিজার এখন ওয়েবপ সনাক্তকরণকে সমর্থন করে।

http://modernizr.com/download/

img-webpনন-কোর সনাক্তকরণের অধীনে সন্ধান করুন ।

Question 7

ES6 তে জেমস ওয়েস্টগেটের উত্তরের একটি সংস্করণ এখানে।

function testWebP() {
    return new Promise(res => {
        const webP = new Image();
        webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
        webP.onload = webP.onerror = () => {
            res(webP.height === 2);
        };        
    })
};

testWebP().then(hasWebP => console.log(hasWebP));

স্নিপেট প্রসারিত করুন

FF64: মিথ্যা

এফএফ 65: সত্য

ক্রোম: সত্য

আমি রুই মার্কস থেকে সিঙ্ক্রোনাস উত্তরটি পছন্দ করি তবে দুর্ভাগ্যক্রমে এফএফ 65 ওয়েবপি প্রদর্শন করার ক্ষমতা থাকা সত্ত্বেও মিথ্যা ফিরিয়ে দেয়।

Question 8

এখানে কোনও চিত্রের অনুরোধ না করে কোড দেওয়া আছে। কিওয়ারটির নতুন ফিডল সহ আপডেট হয়েছে।

http://jsfiddle.net/z6kH9/

function testWebP(callback) {
    var webP = new Image();
    webP.onload = webP.onerror = function () {
        callback(webP.height == 2);
    };
    webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
};

testWebP(function(support) {
    document.body.innerHTML = support ? 'Yeah man!' : 'Nope';
});

Question 9

: কোন বহিরাগত ইমেজ সঙ্গে প্রয়োজনীয় দক্ষতা সহকারে WebP সমর্থন সনাক্তকরণ ব্যবহার WebPJS http://webpjs.appspot.com/

Question 10

পৃষ্ঠাটি জাভাস্ক্রিপ্ট ভারী হওয়ার সময় আমি ওয়েবেপ সমর্থন বৈশিষ্ট্য সনাক্ত করতে 300 + এমএসের দরকার পড়ে। তাই আমি ক্যাচিং বৈশিষ্ট্য সহ একটি স্ক্রিপ্ট লিখেছিলাম :

স্ক্রিপ্ট ক্যাশে
স্থানীয় স্টোরেজ ক্যাশে

এটি ব্যবহারকারী একবার পৃষ্ঠাটিতে অ্যাক্সেস করার পরে কেবল এটি সনাক্ত করবে।

/**
 * @fileOverview WebP Support Detect.
 * @author ChenCheng<sorrycc@gmail.com>
 */
(function() {

  if (this.WebP) return;
  this.WebP = {};

  WebP._cb = function(isSupport, _cb) {
    this.isSupport = function(cb) {
      cb(isSupport);
    };
    _cb(isSupport);
    if (window.chrome || window.opera && window.localStorage) {
      window.localStorage.setItem("webpsupport", isSupport);
    }
  };

  WebP.isSupport = function(cb) {
    if (!cb) return;
    if (!window.chrome && !window.opera) return WebP._cb(false, cb);
    if (window.localStorage && window.localStorage.getItem("webpsupport") !== null) {
      var val = window.localStorage.getItem("webpsupport");
      WebP._cb(val === "true", cb);
      return;
    }
    var img = new Image();
    img.src = "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA";
    img.onload = img.onerror = function() {
      WebP._cb(img.width === 2 && img.height === 2, cb);
    };
  };

  WebP.run = function(cb) {
    this.isSupport(function(isSupport) {
      if (isSupport) cb();
    });
  };

})();

Question 11

তাত্ক্ষণিকভাবে ওয়েবপি সমর্থন পরীক্ষা করার একটি উপায় রয়েছে । এটি সিঙ্ক এবং নির্ভুল, সুতরাং চিত্রগুলি রেন্ডার করার জন্য কোনও কলব্যাকের জন্য অপেক্ষা করার দরকার নেই।

function testWebP = () => {
    const canvas = typeof document === 'object' ? 
    document.createElement('canvas') : {};
    canvas.width = canvas.height = 1;
    return canvas.toDataURL ? canvas.toDataURL('image/webp').indexOf('image/webp') === 5 : false;
}

এই পদ্ধতিটি আমার উপস্থাপনের সময়টি নাটকীয়ভাবে উন্নত করেছে

Question 12

পয়েন্টির প্রতিক্রিয়ার ভিত্তিতে প্রতিশ্রুতি সহ এখানে একটি সাধারণ ফাংশন

let webpSupport = undefined // so we won't have to create the image multiple times
const webp1Px = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA'

function isWebpSupported () {
  if (webpSupport !== undefined) {
    return Promise.resolve(webpSupport)
  }

  return new Promise((resolve, _reject) => {
    const img = new Image()
    img.onload = () => {
      webpSupport = !!(img.height > 0 && img.width > 0);
      resolve(webpSupport)
    }
    img.onerror = () => {
      webpSupport = false
      resolve(webpSupport)
    }
    img.src = webp1Px
  })
}

Question 13

আমার সংক্ষিপ্ত সংস্করণ। আমি এটি ব্রাউজারের ওয়েবপি বা জেপিজি / পিএনজি দেওয়ার জন্য ব্যবহার করেছি।

গুগল এটি খায়, এবং পুরানো আইফোন (f̶u̶c̶k̶i̶n̶g̶ ̶s̶h̶e̶e̶t̶ -safari) দুর্দান্ত কাজও করে!

function checkWebP(callback) {
    var webP = new Image();
    webP.onload = webP.onerror = function () {
        callback(webP.height == 2);
    };
    webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
};

checkWebP(function(support) {
      if(support) {
          //Do what you whant =)
         console.log('work webp');
      }else{
          //Do what you whant =)
         console.log('not work, use jgp/png')
      }
      
})

স্নিপেট প্রসারিত করুন

Question 14

/* Here's a one-liner hack that works (without the use/need of any 
   externals...save bytes)...

Your CSS... */

body.no-webp .logo {
  background-image: url('logo.png');
}

body.webp .logo {
  background-image: url('logo.webp');
}

...
<body>
  <!--
  The following img tag is the *webp* support checker. I'd advise you use any 
  (small-sized) image that would be utilized on the current page eventually 
  (probably an image common to all your pages, maybe a logo) so that when 
  it'll be (really) used on the page, it'll be loaded from cache by the 
  browser instead of making another call to the server (for some other image 
  that won't be).

  Sidebar: Using 'display: none' so it's not detected by screen readers and 
  so it's also not displayed (obviously). :)
  -->
  <img 
    style='display: none'
    src='/path/to/low-sized-image.webp'
    onload="this.parentNode.classList.add('webp')"
    onerror="this.parentNode.classList.add('no-webp')"
  />
  ...
</body>


   <!-- PS. It's my first answer on SO. Thank you. :) -->

স্নিপেট প্রসারিত করুন

Question 15

Htaccess সহ ওয়েবপি চিত্রসমূহ

আপনার .htaccessফাইলে নিম্নলিখিতটি রাখুন এবং একই ফোল্ডারে পাওয়া গেলে jpg / png চিত্রগুলি ওয়েবপি চিত্রগুলির সাথে প্রতিস্থাপন করা হবে।

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Check if browser support WebP images
  RewriteCond %{HTTP_ACCEPT} image/webp

  # Check if WebP replacement image exists
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

  # Serve WebP image instead
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

এখানে আরও পড়ুন

Question 16

ওয়েবপেন এক্সটেনশন সনাক্ত করুন এবং প্রতিস্থাপন জাভাস্ক্রিপ্ট:

 async function supportsWebp() {
  if (!self.createImageBitmap) return false;

  const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
  const blob = await fetch(webpData).then(r => r.blob());
  return createImageBitmap(blob).then(() => true, () => false);
}

(async () => {
  if(await supportsWebp()) {
    console.log('webp does support');
  }
  else {
    $('#banners .item').each(function(){
        var src=$(this).find('img').attr('src');
        src = src.replace(".webp", ".jpg");
        $(this).find('img').attr('src',src);
    });
    console.log('webp does not support');
  }
})();

Question 17

@ পন্টির উত্তরটি ব্যবহার করা এটির জন্য Angular 2+:

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class ImageService {
    private isWebpEnabledSource = new Subject<boolean>();

    isWebpEnabledAnnounced$ = this.isWebpEnabledSource.asObservable();

    isWebpEnabled() {
        let webpImage = new Image();

        webpImage.src = 'data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoCAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56QAAAAA==';

        webpImage.onload = () => {
            if (webpImage.width === 2 && webpImage.height === 1) {
                this.isWebpEnabledSource.next(true);
            } else {
                this.isWebpEnabledSource.next(false);
            }
        }
    }
}

Question 18

রুই মার্কের উপর ভিত্তি করে ফায়ারফক্স হ্যান্ডেল করার উন্নত সংস্করণ। আমি সেই উত্তরের মন্তব্যের ভিত্তিতে বিভিন্ন স্ট্রিংয়ের জন্য স্ক্যান যুক্ত করেছি।

যদি এই উন্নতিটি সম্প্রদায় দ্বারা গৃহীত হয় তবে তা উত্তরে সম্পাদনা করা উচিত।

function canUseWebP()
{
    var elem = document.createElement('canvas');

    if (!!(elem.getContext && elem.getContext('2d')))
    {
        var testString = (!(window.mozInnerScreenX == null)) ? 'png' : 'webp';
        // was able or not to get WebP representation
        return elem.toDataURL('image/webp').indexOf('data:image/' + testString) == 0;
    }

    // very old browser like IE 8, canvas not supported
    return false;
}