AVIF 또는 WebP로 웹 성능 최적화

웹 퍼포먼스 전문가들은 웹사이트에서 나쁜 사용자 경험의 주된 원인으로 이미지를 지목합니다. 실제로는 이미지가 웹페이지 전체 용량의 평균 50%를 차지하기 때문에, 웹 성능에서 가장 해결하기 쉬운 문제이기도 합니다.

사용자에게 표시되는 크기에 맞춰 이미지를 리사이즈하고, 모바일에 최적화된 미디어를 제공하는 반응형 이미지를 추가하는 것과 더불어, WebP나 AVIF와 같은 최신 이미지 포맷을 사용하는 것이 중요합니다.

WebP 포맷: 중요한 변화

Google는 2010년에 웹사이트의 로딩 시간을 단축하기 위해 웹용 WebP 포맷을 도입했습니다. WebP는 널리 쓰이는 JPG나 PNG보다 더 작은 파일 크기로 높은 품질의 이미지를 제공할 수 있습니다.

무손실 WebP 이미지는 PNG보다 최대 34% 가볍습니다.

AVIF 포맷: 온라인 이미지의 혁신

AVIF는 AV1 비디오 코덱을 기반으로 한 최신 이미지 포맷입니다. AVIF는 WebP보다도 더 강력한 압축을 제공한다는 점이 특징입니다(당연히 PNG나 JPG와 비교하면 차이가 더 큽니다).

미디어의 내용, 내보내기 설정, 목표 품질 등에 따라 정확한 절감 폭을 단정하긴 어렵지만, 실사용에서 PNG 대비 약 26%, JPG 대비 약 25~34% 더 가벼운 것으로 관찰됩니다.

2023년 Safari가 지원을 추가하면서 호환성이 크게 확대되었습니다. Can I Use 기준 ↗ 2024년 말 현재 전 세계 사용자의 약 96%가 AVIF를 지원합니다. 즉, 사이트에서 AVIF를 제공한다면 대부분의 사용자가 AVIF 이미지를 볼 수 있다는 뜻입니다.

이미지 포맷 다양성의 중요성

어떤 포맷을 사용자에게 제공할지 하나만 선택할 필요는 없습니다. 적절한 태그를 사용하면 원하는 모든 포맷을 브라우저에 제안할 수 있습니다.

AVIF, WebP, JPG(또는 해당 비주얼에 투명이 필요하다면 PNG)까지 함께 제공하면, 사용자가 이미지를 확실히 볼 수 있고 브라우저와 호환되는 가장 가벼운 포맷이 자동으로 선택됩니다.

2024년 3월, Google은 웹페이지 크롤링에 사용되는 GoogleBot이 AVIF를 지원하지 않는다고 시사했습니다. 이는 가능한 한 많은 포맷으로 계속 제공하는 것이 중요함을 다시 한 번 확인시켜 줍니다.

이미지 최적화만으로도 사이트의 웹 성능은 크게 개선됩니다. 동영상을 제공한다면 MP4뿐 아니라 WebM과 AV1 포맷도 함께 제공해 최적화를 검토해 보세요.

Wordpress에서 WebP 이미지를 제공하려면?

Wordpress에서는 Imagify 같은 확장 기능을 사용해 이미지를 대량으로 최적화하고, WebP로 변환할 수도 있습니다.

사이트의 소스 코드를 수정하지 않고도 포맷을 제공할 수 있도록 Imagify는 페이지의 DOM을 동적으로 변경합니다. 이때 서버 응답 시간을 늦추지 않으려면 WP Rocket 같은 캐시 플러그인이 필수적입니다.

웹 성능 컨설턴트로서, Wordpress의 웹 성능 향상을 위한 이러한 Wordpress 확장 기능의 설치와 구성까지 맡아 드릴 수 있습니다.

온라인에서 이미지를 WebP 또는 AVIF로 변환하는 방법

온라인 도구를 이용하면 PNG나 JPG 이미지를 AVIF 또는 WebP 포맷으로 쉽게 변환할 수 있습니다. 개인적으로는 무료 서비스인 Online Convert Free ↗를 사용하지만, 이 밖에도 다양한 무료 대안이 있습니다.

규모가 큰 서비스라면 Akamai나 Cloudinary 같은 이미지 전송 전문 업체와 협업해, 버킷에 저장된 미디어를 URL 파라미터(용량, 크기, 포맷, 크롭 등)로 지시해 실시간으로 최적화하는 방법도 있습니다.

Photoshop에서 WebP로 이미지 내보내는 방법

Adobe Photoshop에서 제작한 비주얼이나 이미지는 소프트웨어 내에서 바로 WebP 포맷으로 내보낼 수 있습니다.

이를 위해 파일 메뉴에서 '사본 저장'을 선택(단축키 Alt + Ctrl + S)하고, 원하는 저장 위치를 선택한 뒤 드롭다운에서 WebP 포맷을 지정하세요. 다양한 품질 옵션을 테스트해 본 뒤 본인에게 적합한 값을 선택하세요. 요구 사항은 사람마다 다를 수 있습니다.