WebP 형식 소개
WebP는 Google이 개발한 새로운 이미지 형식으로, 손실 압축과 무손실 압축, 투명도를 지원하며, 압축된 파일 크기가 JPEG나 PNG 등보다 작다. 따라서 대역폭을 절약하고 페이지 로딩 시간을 줄이며 사용자의 데이터 사용량도 줄일 수 있다.
Android와 iOS 앱은 Google이 제공하는 디코딩 라이브러리만 도입하면 WebP 형식을 쉽게 지원할 수 있다. 하지만 웹에서는 아직 WebP 지원이 그리 널리 보급되지 않았다. 다음에 따르면 Can I Use의 데이터，현재는 Chrome, Opera 브라우저와 Android의 WebView만 WebP를 지원합니다. 하지만 WebP 이미지에는 이렇게 많은 장점이 있는데, 웹 페이지에서 사용할 수는 없을까요？가능합니다. 이 글에서는 이 문제를 다뤄 보겠습니다.
기존 이미지를 WebP 형식으로 변환하기
WebP 형식을 사용하려면 웹사이트에 쓰이는 모든 이미지에 대해 WebP 버전을 만들어야 한다. CDN 서비스를 사용한다면 대개 WebP 변환 옵션을 제공한다. 예를 들어 又拍云:
이러한 설정을 추가하면 이미지 URL에 해당 접미사를 붙여 WebP 형식의 리소스를 사용할 수 있다。
webpack、gulp의 플러그인을 사용하여 이미지 형식을 일괄 변환할 수도 있다。여기서는 자세히 설명하지 않는다。
브라우저에서 WebP 형식 사용하기
모든 브라우저가 WebP 형식을 지원하는 것은 아니므로, 두 가지 접근법이 있습니다：하나는 WebP 형식을 지원하는 브라우저에서만 WebP 형식을 사용하는 것이고；다른 하나는 WebP 형식을 지원하지 않는 브라우저에서도 WebP를 지원하도록 하는 것입니다.
방법 하나： <picture>태그
<picture>HTML5의 새로운 태그로, 다음과 비슷합니다<video>여러 형식의 리소스를 지정하고, 브라우저가 지원하는 형식을 선택해 불러오도록 할 수도 있습니다.
<picture class="picture"> <source type="image/webp" srcset="image.webp"> <img class="image" src="image.jpg"> </picture>
브라우저가 WebP 형식을 지원하면 불러옵니다image.webp，그렇지 않으면 로드한다image.jpg。
브라우저가 지원하지 않더라도<picture>태그여도 이미지는 여전히 정상적으로 표시되지만, CSS가 올바르게 선택하지 못할 수 있다 picture요소입니다. 예를 들어 IE8에서는 아래 CSS가 작동하지 않습니다：
.picture img { width: 100px; height: 100px;
}하지만 다음과 같이 이미지에 스타일을 지정할 수 있다：
.image { width: 100px; height: 100px;
}브라우저가 WebP 형식의 이미지를 사용하더라도, 최종적으로는 적용된다img요소의 스타일.
다만 사용하기만 하면html5shiv，이 태그를 구형 브라우저에서도 지원하게 하면 CSS 선택자를 정상적으로 사용할 수 있습니다.
이 방법이 가장 간단하지만，CSS에 있는 이미지（예：배경）에는 적용할 수 없다.
방법 이：JS로 이미지의 URL 교체하기.
많은 페이지에서 이미지의 “지연 로딩”을 사용하곤 합니다——일반적으로 이미지 URL을 넣는 곳은img요소의 사용자 정의 속성에 넣은 뒤, 적절한 시점에 JS로 URL을 다음 대상에 할당한다：src속성. 비슷한 원리로 브라우저의 WebP 지원 여부에 따라 다음에 img요소에 서로 다른 것을 부여하는src값.
먼저 JS로 브라우저가 WebP 형식을 지원하는지 판단해야 한다. 방법은 브라우저에 WebP 형식의 이미지를 제공해 올바르게 렌더링하는지 확인하는 것이다. 이 방법은 비동기 방식이므로 후속 작업을 콜백 함수 안에 작성해야 한다. 결과를 저장할 수 있는 곳은localStorage에 넣으면, 이후에는 다시 확인할 필요가 없습니다.
function checkWebp(callback) { var img = new Image();
img.onload = function () { var result = (img.width > 0) && (img.height > 0);
callback(result);
};
img.onerror = function () {
callback(false);
};
img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}그런 다음 아래 코드로 WebP 지원 여부에 따라 해당 src를 교체합니다.
function showImage(useWebp){ var imgs = Array.from(document.querySelectorAll('img'));
imgs.forEach(function(i){ var src = i.attributes['data-src'].value; if (useWebp){
src = src.replace(/\.jpg$/, '.webp');
}
i.src = src;
});
}
checkWebp(showImage);이 방식의 장점은 기존 지연 로딩 함수와 결합할 수 있다는 것이다. 또한 JS를 사용하면 CSS에 있는 이미지（배경 이미지 등）도 처리할 수 있다.
방법 3：JS로 WebP 이미지 디코딩하기
WebP 디코더가 오픈 소스라면, JS로 구현할 수도 있지 않을까요？물론 가능합니다，누군가는 JS로 WebP 디코더를 작성하기도 했다。이 JS 라이브러리를 도입하면 모든 WebP 이미지를 JS로 디코딩한 뒤 다음으로 변환합니다base64，그런 다음 기존 URL을 교체하면 원래 WebP를 지원하지 않던 브라우저에서도 WebP를 정상적으로 표시할 수 있습니다. 이 라이브러리는 사용법이 매우 간단하므로 웹페이지의 설명을 참고하면 됩니다.
이 방법의 단점은 JS가 WebP 이미지를 디코딩하기 위해 src의 URL을 다시 비동기로 요청해야 한다는 점입니다（다만 이미지 자체가 앞서 한 번 다운로드되었으므로 캐시를 바로 사용합니다）；또한 JS 디코딩은 비교적 느려 성능에 영향을 주므로，이미지가 표시되기까지 시간이 걸릴 수 있습니다.
이상은 브라우저에서 WebP 이미지를 사용하는 몇 가지 방법으로, 실제 상황에 맞게 선택할 수 있다. 실제 적용 사례에서는 WebP 형식을 사용한 뒤 이미지 용량이 대체로 1/3 이상 줄어들어 로딩 속도가 빨라졌고 사용자의 데이터 사용량도 절약되었다. 지금부터 이 형식을 사용하기를 적극 권장한다.
