포토샵 webp 저장과 대체 이미지 코드

포토샵 webp 파일 포맷으로 이미지를 저장하는 방법과 webp를 지원하지 않는 브라우저에서 동일 jpg 포맷으로 대체할 수 있는 코드에 대해 살펴봅니다.

포토샵 webp 파일 저장

포토샵 23.2 버전에서부터 완벽하게 webp 포맷을 지원하고 있습니다. 포토샵이 최신 버전으로 업데이트 되었다면 변환사이트를 이용하거나 플러그인을 설치하는 등 귀찮은 일은 하지 않아도 됩니다.

저장은 save as로 하시고 파일 형식에서 webp를 지정해주시면 됩니다.
단, 레이어가 존재한다면 파일 형식에 webp가 나오지 않기 때문에 사본으로 저장(save a copy)을 하는 게 편합니다. 단축키는 ctrl + alt + s입니다.

저장 버튼을 누르면 옵션창이 나오는데 여기서 이미지의 품질을 설정할 수 있습니다. 아쉽게도 미리 볼 수 있는 창을 제공해 주지 않습니다만, 손실 압축에 70~80 정도면 괜찮게 나오는 듯 합니다. 이미지의 상태에 따라 달라질 수 있는 값이니 직접 실행해 보시고 적당한 값을 입력하시기 바랍니다.

webp 이미지 HTML에 삽입

평소대로 아래의 코드처럼 넣으면 됩니다. 하지만 webp 포맷을 지원하지 않는 환경이 존재합니다. 대부분 지원이 종료된 서비스들입니다. 대표적 케이스가 IE11이죠. webp를 지원하지 않는 환경에서는 이를 동일의 jpg로 대체하기 위해 다른 코드를 넣어주면 되는데요.

아래의 내용은 솔직히 이렇게까지 해야 되나 싶은 내용입니다만 국제웹표준기구나 구글 SEO 등에서 권장하고 있는 사항이니 기록해 둡니다.

<picture>
  <!-- WebP 이미지를 지원하는 경우 -->
  <source srcset="imageURL/image.webp" type="image/webp">
  <!-- 기본 이미지를 지정합니다. -->
  <img src="imageURL/image.jpg" alt="이미지 설명">
</picture>

webp를 지원하지 못해 불러오지 못할 시 기본 jpg 이미지로 대체시키는 코드입니다. 동일한 이미지를 2장을 업로드해야 하니 번거로운 작업이 아닐 수 없습니다.

webp 이미지 형식은 이미 높은 수준의 호환성 점수를 받았습니다. webp 미지원 브라우저의 비율은 매우 미미한 수준이며 미지원 브라우저의 대부분은 IE 11을 사용하는 사용자에게서 발생한다고 합니다. MS는 작년(22년)부터 이미 IE 11의 지원을 중단했습니다.

구글 webp, jpg 대안인가?

실제로 두 형식을 비교하는 것은 매우 간단합니다. 동일한 조건에서 파일 크기와 품질을 비교해 보면 됩니다. 동일한 조건이란 webp와 jpg의 품질(quality) 수치, 즉 압축 수준입니다.

네이버 메인의 캡쳐입니다. 둘 다 quality 70으로 저장하였습니다. 왼쪽이 jpg 243kb이며, 오른쪽이 webp 70kb입니다. 화질은 jpg가 미세하게 좋은 편이지만 고해상도 사진이 아니라면 별 의미를 둘 필요는 없겠습니다.

파일 용량 측면에서는 압도적으로 webp가 우세합니다. 거의 두배 이상의 차이입니다. 현재 WebP는 뛰어난 압축 효율성으로 인해 선호되는 대안으로, 더 빠른 로딩 시간과 데이터 트래픽 감소를 원하는 사용자에게 이상적인 선택입니다.

AVIF(AV1 이미지 파일 형식)는 webp보다 압축 효율이 더 좋다고는 하지만 현재 호환성 측면에서 webp만큼 광범위하게 지원되지 않을 수 있으므로 지금 현재로선 대부분의 사용에 webp가 더 실용적인 대안이 될 수 있겠네요.