이미지는 <picture> 태그를 사용하여 개발하는것을 한 번 고려해보는게 좋을 것 같다.

<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" /> !!!! webp
<img src="photo.jpg" alt="photo" />
</picture>

레티나 같은 고해상도를 지원해야하는 상황이라면 이미지를 어떻게 다뤄야할까?
picture 태그를 사용하게되면 환경에 따라 다르게 지원해줄 수 있다.
webp 파일로 설정하게 되면 같은 품질의 이미지를 만들 때 기존의 이미지 포맷보다 파일 크기가 더 작게 사용 가능하다.
webp를 지원하지 않더라고 picture를 사용하게 되면 webp를 지원하지 않으면 아래 img태그인 photo.jpg를 제공해주어 대응이 가능하다.

웹피(WebP) 란?

WebP(Web + Picture)라는 단어에서 알 수 있듯이 웹에서 사용되는 기존의 GIF, JPG, PNG 이미지 포맷을 대치하기 위해 개발되었다. WebP사용하면 JPG는 기존 대비 25~34%, PNG는 비손실의 경우 평균 26%(손실 방식의 경우 60~70%) 정도 기존 파일 대비 작아진다.
움짤의 경우 기존의 GIF를 동일한 화질의 WebP로 변경하면 파일 크기가 절반 이하로 줄어들기도 한다.

실제 사용사례

유튜브의 썸네일(마우스 갖다대면 동영상 재생 약 간 되는거)이webp로 만들어졌다. 이것을 확인하는 방법은 브라우저에서 유튜브에 접속한 후 썸네일에서 오른쪽 마우스 버튼을 클릭해 "이미지를 다른 이름으로 저장"을 선택해 나타난 저장 대화상자의 확장자를 보면 알 수 있다. 넷플릭스도 사용함!

장점

1. 애니메이션 GIF 이미지의 한계에서 벗어날 수 있다.
GIF 파일에서는 256색만을 표현할 수 있으므로 이미지에 쓰이는 색상의 개수를 줄이는 양자화를 거쳐야 하고 이때 원본과의 화질 차이가 생기게된다.
GIF 이미지에서는 색 스펙트럼이 그대로 표현되지 못하고 뭉개지는 것을 볼 수 있다. 그러나 WebP 이미지에서는 최대 16,777,216색(페이지 참고함.)을 표현할 수 있어 이러한 문제가 없다.
2. WebP를 사용할 때 가장 큰 장점은 파일 크기가 작아진다.
이미지의 파일 크기가 작으면 데이터를 더 빨리 전송하고, 저장 공간을 절약할 수 있다. 특히 애니메이션 GIF 이미지나 투명한 PNG 이미지를 손실 압축 방식의 WebP 이미지로 저장하면 파일 크기가 20~30%로 줄어든다.
3. 만들고 배포하는 데 비용이 들지 않다.
구글이 WebP 에 특허 갖고있지만 유료는 아니여서 무료로 만들고 배포할 수 이싿.
4. 이미지를 저장할 때 어느 포맷을 사용할지 고민할 필요가 없습니다.
WebP는 손실 및 비손실 압축 방식, 애니메이션, 알파 채널을 모두 지원하므로 이미지를 저장할 때 그 특성이 어떻든 바로 WebP 파일로 저장할 수 있다.
5. 원본 영상과 동일한 재생속도으로 저장할 수 있다.
WebP는 각 프레임 당 1밀리초(0.001초)의 시간정밀도를 가지기 때문에 원본과 동일한 재생속도로 저장이 가능하다.
GIF는 경우 각 프레임의 시간 정밀도가 10밀리초(0.01초)다. 시간 정밀도가 높지 않기 때문에 캡쳐한 영상이나 동영상을 GIF로 저장하는 경우 원본 영상과 재생 속도에서 차이가 발생하게 된다.