모던 이미지 포맷인 WEBP 사용하기

인터넷 익스플로러를 무시해도 된다면 webp 이미지를 고려해보자.

caniuse.com/?search=webp

이미지 파일의 용량을 확 줄일 수 있다.

 

다음 사이트에서 변환 가능하다.

cloudconvert.com/image-converter

 

지원하지 않는 브라우저와의 호환을 위해서는 아래와 같이 picture 엘리먼트와 source 엘리먼트를 써야 한다.

 

<picture>
  <source type="image/webp" srcset="cat.webp" />
  <source type="image/jpeg" srcset="cat.jpg" />
  <img src="cat.jpg" alt="웃는 고양이" class="cat-image" />
</picture>

 

picture 엘리먼트를 지원하지 않는 브라우저를 위해서 img 엘리먼트도 넣어줘야 한다.

img 엘리먼트에서 alt와 class 값을 설정한다.

 

여기서 레티나 디스플레이일 때의 이미지 설정까지 넣으려면 다음을 참고하자.

thinkforthink.tistory.com/303