WebP 이미지: 입문서

성능 향상과 관련하여 웹 디자이너는 돌이킬 수없는 모든 것을 남깁니다. 결국 페이지 로드 시간을 줄일 수 있는 모든 킬로바이트는 더 나은 사용자 경험을 제공할 것입니다.

이미지는 주요 관심사 영역입니다. 기본적인 최적화 기술도 더 나은 성능을 의미할 수 있습니다. 그러나 Google의 Core Web Vitals의 출현으로 디자이너들은 품질을 유지하면서 모든 오버헤드를 짜내기 위해 분주하게 움직이고 있습니다.

우연히도 더 나은 웹 사이트 성능을 추구하는 바로 그 회사가 도움이 되는 이미지 형식을 출시했습니다. Google의 WebP 형식은 더 작은 파일 크기를 포함하여 디자이너에게 도움이 되는 다양한 기능을 제공합니다.

매력적으로 들린다면 계속해서 WebP에 대한 둘러보기로 안내해 드리겠습니다. 또한 형식이 실제로 과대 광고에 부합하는지 확인하기 위해 몇 가지 테스트를 수행합니다.

두 세계의 최고?

이미지 최적화에는 종종 어려운 결정이 필요할 수 있습니다. 예를 들어, 더 적은 파일 크기라는 이름으로 얼마나 많은 품질을 희생해야 할까요?

이는 무손실(24비트 PNG) 또는 손실(JPG, 8비트 PNG) 이미지 형식 중에서 선택하는 문제가 됩니다. 수수께끼의 일부는 PNG가 일반적으로 래스터 그래픽에 더 잘 활용되는 반면 JPG는 사진에 적합하다는 것입니다.

WebP는 모든 것을 할 수 있는 이미지 형식을 목표로 합니다. 무손실 및 손실 압축 모두에 대한 지원이 내장되어 있습니다. 어느 쪽이든, 당신은 약간의 절약에 있습니다. Google은 형식이 유사한 PNG 파일보다 26% 작고 JPG보다 25%-34% 작다고 주장합니다.

또한 이미지 투명도는 두 압축 유형 모두에서 지원됩니다. JPG 및 PNG 형식 모두에서 최고의 속성을 얻는 것과 같습니다. 부팅할 부피가 적습니다.

WebP의 효율성 테스트

그렇다면 WebP 이미지는 실제 세계에서 어떻게 작동합니까? 우리는 투명성을 활용하는 예와 함께 무손실 및 손실 압축을 사용하여 얼마나 많은 공간을 절약할 수 있는지 알아보기 위해 몇 가지 기본 테스트를 실행했습니다.

우리의 구성

모든 테스트는 Adobe Photoshop CC 내에서 이미지를 저장하여 수행됩니다.

이 글을 쓰는 시점에서 Photoshop은 WebP 형식을 기본적으로 지원하지 않습니다. 따라서 Google의 무료 WebPShop 플러그인을 설치했습니다. 이를 통해 유서 깊은 사진 편집 소프트웨어에서 WebP 이미지를 열고 저장할 수 있습니다. 기본 압축 설정이 사용되었습니다.

이전 형식으로 이미지를 저장할 때 Photoshop의 신뢰할 수 있는 "웹용으로 저장" 기능을 사용했습니다. 가능한 동일한 이미지 품질 설정이 사용되었습니다. 이미지 품질 설정은 아래 괄호 안에 있습니다.

예 #1: 자연 사진

첫 번째 테스트에는 1024×768 자연 사진이 포함됩니다. 최대 품질의 JPG 파일로 저장되며 1.15MB의 공간을 차지합니다.

Pen WebP 이미지 데모 보기 – Eric Karkovack의 Nature 사진

승자: 손실이 있는 WebP 이미지는 허용 가능한 품질을 유지하면서 많은 공간을 절약합니다. 무손실 WebP가 원본보다 크기가 커진 것은 조금 놀랍습니다. 그러나 그것은 압축 설정을 실험하는 데 비용이 든다는 것을 보여줍니다.

예제 #2: 벡터 일러스트레이션

다음은 다채로운 640×356 벡터 일러스트레이션입니다. 원본은 24비트 PNG 파일로 저장되며 크기는 187KB입니다. 색상이 너무 많기 때문에 8비트 PNG나 손실 WebP 모두 좋은 비교가 되지 않습니다. 대신 JPG 형식을 사용하여 무손실 WebP에 맞설 것입니다.

Pen WebP 이미지 데모 보기 – Eric Karkovack의 벡터 일러스트레이션

승자: 손실된 JPG 이미지는 더 많은 공간을 절약하지만 눈에 띄는 인공물을 남깁니다. 무손실 WebP는 날카로운 모양을 유지하면서도 원본에 비해 파일 크기를 크게 줄입니다. 이는 WebP에 유리하게 작용합니다. 그러나 이러한 종류의 이미지에는 약간의 절충이 필요할 수 있습니다.

예제 #3: 투명도가 있는 벡터 일러스트레이션

최종 이미지는 350×350 벡터 일러스트레이션입니다. 투명도가 있는 24비트 PNG 파일로 저장되며 무게는 64.09KB입니다.

Pen WebP 이미지 데모 보기 – Eric Karkovack의 투명도가 있는 벡터 일러스트레이션

승자: Lossless WebP는 예상한 대로 파일 크기를 줄이면서 품질을 유지합니다. 여기에서 확실한 승자입니다. 그러나 약간의 이미지 아티팩트를 가지고 살 수만 있다면 손실 WebP도 꽤 견고합니다.

브라우저 및 앱 지원

물론 WebP가 소중한 대역폭을 절약할 수 있다는 사실은 정말 대단합니다. 그러나 얼마나 많은 브라우저와 앱 지원이 있습니까?

Can I Use에 따르면 WebP는 91% 이상의 웹 브라우저에서 완전히 지원되고 나머지 3%에서는 부분적으로 지원됩니다.

지원되지 않는 유일한 주요 브라우저는 Microsoft와 Apple입니다. Internet Explorer는 지원하지 않으며 Edge 버전 12-17에서도 마찬가지입니다. 그러나 최신 버전의 Edge는 이미지 형식에서 제대로 작동합니다.

Mac 사용자는 운영 체제의 Big Sur 버전과 결합된 Safari 14 이상이 있어야 합니다. iOS의 Safari 사용자는 버전 14.6부터 전체 지원을 받습니다.

지원 범위는 꽤 견고합니다. 그러나 웹 프로젝트에 대한 대체를 제공하려는 경우 Modernizr과 같은 도구를 사용하여 WebP 지원을 감지할 수 있습니다.

이미지 편집기의 경우 앞서 언급한 Adobe Photoshop에는 WebP 파일을 보거나 저장하는 플러그인이 필요합니다. 다른 옵션은 Wikipedia에서 지원되는 소프트웨어 목록을 확인하십시오.

WordPress 사용자는 버전 5.8부터 WebP 이미지를 기본적으로 지원합니다. 이전 버전의 CMS는 여전히 타사 플러그인을 통해 이미지를 제공할 수 있습니다.

WebP는 고려할 가치가 있습니다

전반적으로 WebP 이미지 형식에 대해 좋아할 점이 많습니다. 대부분의 경우 린 파일 크기와 높은 시각적 품질 사이의 균형을 유지합니다. 이미지 최적화를 위한 다방면에 걸친 옵션입니다.

브라우저 지원도 상당히 좋습니다. 다만 보편적이지는 않습니다. 아무리 적은 수의 사용자라도 조합에서 제외될 가능성에 대한 우려가 항상 있습니다. 고맙게도 대체 옵션을 만들고 제공할 수 있는 도구가 있습니다. 이미지는 꽤 큰 문제이기 때문에 그 추가 작업은 아마도 그만한 가치가 있을 것입니다.

WebP의 대세에 뛰어들 생각이라면 지금이 실험을 시작할 때입니다. 압축 설정을 마스터하면 웹사이트의 로드 시간을 상당히 줄일 수 있습니다.