웹 최적화: Webp 변환 및 미지원 브라우저 대응법

이전 글: 웹 최적화 캐시 Etag, Cache-Control

웹 최적화 캐시 Etag, Cache-Control

https://www.npmjs.com/package/sharp

sharp

sharp 라이브러리에서 webp으로 변환해주는 간단한 코드가 있다.
설치: npm init -> npm install sharp

더 자세한 코드는 라이브러리 문서를 읽으면 해결할 수 있다.

import shartp from "sharp"

sharp('prevImage.jpg')
  .toFormat('webp')
  .toFile('webpImage.webp', (err, info) => {
    if (err) {
      console.error('Error:', err);
    } else {
      console.log('Success:', info);
    }
  });

jpg를 webp으로 변환해서 2개의 사진을 가지고 있으면 된다.

그 이후 HTML에서 webp을 img src에 넣어주면 된다.

    <img src="./webpImg/testImg.webp" alt="img">

 그리고 webp 이미지 조그만한 사진을 하나 따로 준비해두고, 아래 JS에서 처럼 이미지 객체를 만들고 미리 호출해서 로드가 되는지 확인한다. 그리고 동작을 하지 않는다면 replace를 이용해서 url를 변경해주면 된다.

추가적으로 확장자가 모든 이미지가 동일하지 않을 것이다. 그런 경우 img tag에 data로 넣어서 해당 이미지의 확장자를 넣어두고 지원하지 않는 라이브러리에서는 해당 확장자를 data에서 빼서 쓰면 된다.

document.addEventListener("DOMContentLoaded", function () {
    supportsWebP(function (supported) {
        if (!supported) {
            document.querySelectorAll('img').forEach(function (img) {
                var webpSrc = img.getAttribute('src');
                if (webpSrc && webpSrc.endsWith('.webp')) {
                    var jpgSrc = webpSrc.replace('.webp', '.jpg');
                    img.setAttribute('src', jpgSrc);
                }
            });
        }
    });
});

function supportsWebP(callback) {
    var webP = new Image();
    webP.src = "./webpImg/testImg.webp";
    webP.onload = webP.onerror = function () {
        callback(webP.height === 40);
    };
}