WebP를 지원하는 브라우저를 검색하고 WebP 사진을 제공하는 방법은 무엇입니까?

Question

무손실 + 알파 사진의 경우 "pngcrushed"PNG보다 약 28 % 작은 WebP 그림의 놀라운 크기 축소를 볼 때 WebP를 지원하는 브라우저에 WebP 그림을 제공하고 싶습니다.

클라이언트 브라우저가 WebP를 지원하는 경우 Java 웹 응용 프로그램 서버에서 어떻게 검색 할 수 있습니까?

Detecting WebP support

하지만 자바에서 작업을 수행하는 방법을 알고 싶습니다 :

이 자바 스크립트에서 작업을 수행하는 방법에 대한 여기에 질문이었다. Java에서 수행하는 것이 클라이언트 측에서 JavaScript를 호출한다는 것을 의미한다면 어떻게해야하는지 알고 싶습니다.

Answer 1

Java 만 사용하여 웹 브라우저 기능을 확인할 수 없습니다. Java/JSP는 웹 브라우저가 아닌 웹 서버에서 실행됩니다. 이것을 위해 JavaScript를 사용해야합니다. 관련 질문에서 이미 발견 한 코드를 사용할 수 있습니다. 브라우저에서 WebP를 지원한다는 사실을 나타내는 쿠키가 아직없는 경우 JS가 페이지로드를 확인하도록 허용 한 다음 기능 감지를 수행하고 마지막으로 긴 클라이언트 쿠키를 document.cookie으로 설정하고 페이지를 새로 고침하여 JS가 페이지로드를 확인하도록하는 것이 가장 쉽습니다 location.reload().

서버 측에서는 적절한 이미지 URL을 보내거나 설정하기 전에 서블릿에 HttpServletRequest#getCookies() 또는 JSP로 ${cookie}의 쿠키 또는 값이 있는지 확인하기 만하면됩니다.

쿠키를 설정하는 것 이외에는 항상 JS가 Ajax 요청의 요청 매개 변수로 데이터를 전송하도록 할 수 있지만 이는 요청이나 세션마다 필요하다는 것을 의미합니다.

Answer 2

클라이언트에서 WebP 지원을 감지하는 간단한 방법이 있습니다. 그런 다음 클라이언트에서 쿠키를 설정하고 서버에서 값을 읽을 수 있습니다.

function testWepP(callback) { 
    var webP = new Image();  
    webP.src = 'data:image/webp;base64,UklGRi4AAABXRUJQVlA4TCEAAAAvAUAAEB8wAiMw' + 
'AgSSNtse/cXjxyCCmrYNWPwmHRH9jwMA'; 
    webP.onload = webP.onerror = function() { 
     callback(webP.height === 2);  
    }; 
}; 

testWebP(function(supported) { 
    console.log((supported) ? "webP 0.2.0 supported!" : "webP not supported."); 
}); 

자세한 정보 here.