EN한국어

가이드 / Finipix / 공개하기

이미지를 WebP로 바꿔야 할까?

Qorlize 팀 작성 · 마지막 검토

Finipix 가이드 · 웹용 이미지 줄이기 · 크기 바꾸기. Finipix 열기

PageSpeed Insights는 이미지를 지적하고, 지인은 요즘엔 다 WebP로 쓴다고 하는데, 내 폴더에는 멀쩡히 잘 쓰던 JPEG와 PNG가 가득합니다. 변환 자체는 쉽습니다. 진짜 문제는 바꾼 파일을 어디에 쓰느냐입니다. WebP는 웹 페이지 안에서는 훌륭하지만 웹 페이지 밖 몇몇 곳에서는 아직 불편합니다. 이 글은 그 판단을 다룹니다. 형식과 픽셀 크기의 전반적인 비교는 웹 이미지 형식과 크기에 정리해 두었습니다.

얻는 것

WebP는 구글이 만든 이미지 형식으로, JPEG처럼 손실 압축으로도, PNG처럼 무손실로도 저장할 수 있습니다. 구글의 WebP 문서에 따르면 손실 WebP는 비슷한 화질의 JPEG보다 평균 30% 정도 작고, 무손실 WebP는 PNG보다 약 26% 작습니다. 실제 결과는 사진마다 다릅니다. 매끈한 면이 넓은 사진은 많이 줄고, 이미 강하게 압축된 JPEG는 덜 줄어듭니다.

큰 사진이 몇 장 있는 페이지라면 30%는 휴대폰 데이터 환경에서 체감되는 차이입니다. 작은 로고 하나뿐인 페이지라면 품을 들일 이유가 없습니다.

지금의 브라우저 지원

웹 페이지에 쓰는 한 지원 문제는 사실상 끝났습니다. MDN의 이미지 형식 안내는 WebP를 Chrome, Edge, Firefox, Opera, Safari가 모두 지원한다고 적고 있습니다. MDN이 짚는 예외는 Mac의 Safari 하나입니다. macOS Big Sur(11) 이상에서 Safari 14 이상이어야 합니다. 오래된 Mac에서 예전 Safari를 쓰는 방문자에게는 이미지가 깨져 보입니다.

대부분의 사이트에서 이런 방문자는 적습니다. 그래도 챙기고 싶거나 안전장치를 두고 싶다면 <picture> 요소로 WebP와 대체용 JPEG를 함께 제공할 수 있습니다. 브라우저는 지원하는 첫 형식을 고릅니다.

<picture>
  <source srcset="images/team.webp" type="image/webp">
  <img src="images/team.jpg" width="1200" height="800" alt="봄 워크숍에서 찍은 팀 사진">
</picture>

이미지마다 파일이 두 개가 되는 대가가 있습니다. 작은 사이트라면 WebP 한 장만 쓰는 것도 충분히 합리적입니다.

WebP가 아직 말썽인 곳

문제는 대부분 브라우저 밖, 즉 웹 페이지가 아니라 파일 자체를 받는 곳에서 생깁니다.

  • 이메일: 메일 프로그램마다 WebP 지원이 고르지 않고, 받는 사람이 어떤 프로그램을 쓸지는 내가 정할 수 없습니다. 뉴스레터 본문 이미지나 이메일 서명에는 JPEG와 PNG가 안전합니다.
  • 오래된 PC 프로그램: 일부 오래된 이미지 뷰어, 오피스 프로그램, 인쇄용 프로그램은 WebP를 열지 못하거나 업데이트해야 엽니다. 거래처나 인쇄소에 WebP를 보내면 쓰지 못할 수 있습니다.
  • 업로드 양식: 공공기관·회사 포털, 오픈마켓, 채용 사이트 등에서 업로드 칸이 JPG와 PNG만 받는 경우가 있습니다. WebP는 거부되거나 아무 반응 없이 무시됩니다.
  • 메신저와 SNS 앱: 앱마다 다릅니다. WebP를 그대로 보여 주는 곳, 변환해 버리는 곳, 사진이 아니라 첨부 파일로 취급하는 곳이 있습니다. 쓰려는 앱에서 직접 시험해 보십시오.
  • 링크 미리보기 이미지: og:image 사진은 링크가 공유되는 모든 앱이 가져갑니다. 여기서는 JPEG가 위험이 적습니다. 링크 공유 이미지 만드는 법을 참고하십시오.

정리하면, 내 웹 페이지에 들어가는 이미지는 WebP, 사람들이 내려받거나 첨부하거나 인쇄하거나 다른 곳에 올리는 파일은 JPEG나 PNG입니다.

투명 배경과 움직이는 이미지

WebP는 투명도(알파 채널)를 지원합니다. 투명 배경의 로고나 배경을 오려 낸 제품 사진도 PNG 대신 WebP로 쓸 수 있고, 대개 더 작습니다. JPEG에는 투명도가 아예 없습니다.

WebP는 움직이는 이미지도 지원하며, 같은 내용의 GIF보다 대개 훨씬 작습니다. 움직이는 WebP도 현재의 주요 브라우저에서 지원됩니다. 다만 움직임이 필요하다면 소리 없는 짧은 동영상이 더 작은 경우가 많습니다. 변환 도구에 따라 움직이는 GIF의 첫 프레임만 남기기도 하니, 원본을 바꾸기 전에 결과를 확인하십시오.

JPEG나 PNG를 그대로 둘 때

  • 파일이 웹 페이지 밖으로 나갈 때: 내려받기, 첨부, 인쇄, 이메일, 남의 사이트 업로드 양식.
  • 이미지가 적고 작을 때: 40KB짜리 로고를 바꾸면 몇 KB 줄고 관리할 형식만 하나 늘어납니다.
  • 쓰는 플랫폼이 WebP를 받지 않을 때: 일부 홈페이지 빌더나 게시판 시스템은 JPG, PNG, GIF만 올릴 수 있게 막아 둡니다. 업로드 설정을 확인하십시오.
  • 글자가 선명해야 하는 화면 캡처: 픽셀 그대로 남아야 한다면 PNG가 확실합니다. 웹 페이지에 쓸 거라면 무손실 WebP도 되니 두 용량을 비교해 보십시오.
  • 원본 파일: 원본은 언제나 원래 형식 그대로 보관하십시오. 손실 형식에서 다른 손실 형식으로 바꿀 때마다 화질이 조금씩 떨어지므로, 변환은 항상 원본에서 하고 이전 변환본에서 다시 하지 않습니다.

AVIF가 값어치를 할 때

AVIF는 더 새로운 형식으로, 사진을 대개 WebP보다도 더 작게 줄입니다. MDN은 Chrome 85, Edge 121, Firefox 93, Safari 16.1부터 지원한다고 적고 있으며, 지원 역사가 짧아 WebP·JPEG·PNG 대체 이미지를 함께 제공하라고 여전히 권합니다. 따져 볼 점이 두 가지 더 있습니다. AVIF는 인코딩이 느리고, MDN에 따르면 점진적 표시를 하지 않아 파일이 다 도착해야 나타납니다.

AVIF는 전체 폭 히어로나 갤러리처럼 큰 사진에서, 추가로 줄어드는 양이 수백 KB 단위일 때, 그리고 <picture>로 대체 이미지를 둘 생각이 있을 때 값어치를 합니다. 중간 크기 이미지 몇 장이라면 WebP 하나가 더 간단하고 차이도 크지 않습니다.

Finipix로 변환하기

Finipix는 Qorlize가 만든 무료 브라우저 도구입니다. 이미지는 내 기기 안에서 처리되어 어디에도 올라가지 않고, 가입도 필요 없습니다.

  1. 변환할 이미지를 작업용 폴더에 복사해 둡니다. 원본은 그 자리에 그대로 둡니다.
  2. Finipix를 열고 이미지를 창에 끌어다 놓습니다.
  3. 크기도 함께 줄이려면 프리셋을 고릅니다. 원래 크기, 본문 이미지(가로 1200px), 히어로 · 배너(가로 1920px), 썸네일(가로 600px), 직접 입력이 있습니다. Finipix는 이미지를 키우지 않고 비율을 유지합니다.
  4. 출력 형식에서 WebP를 고릅니다. AVIF는 브라우저가 인코딩할 수 있을 때만 목록에 나옵니다. 품질 슬라이더(40~95, 기본 80)를 정합니다.
  5. 전후 비교로 확인한 뒤 한 장씩 또는 ZIP으로 한꺼번에 내려받습니다.

결과물에서는 EXIF와 GPS 정보가 항상 지워집니다. 웹 이미지로는 좋은 일이지만, 촬영 날짜와 장소가 중요하다면 변환본이 원본을 대신할 수 없다는 뜻이기도 합니다. Finipix는 움직이는 이미지를 출력하지 않으니, 움직이는 이미지는 다른 도구로 변환하거나 동영상으로 만드십시오.

변환하면 파일 확장자가 .jpg나 .png에서 .webp로 바뀝니다. HTML의 src를 모두 고치고 새 파일을 올린 다음에야 서버에서 옛 파일을 지우십시오.

바꾼 효과를 확인하려면 변환 전후로 PageSpeed Insights를 돌려 보십시오. 무엇을 봐야 하는지는 PageSpeed Insights로 페이지 속도 확인하기에 적었습니다.

내 이미지로 바로 해 보려면 Finipix를 여세요. 브라우저에서 돌아가고 이미지는 내 기기 밖으로 나가지 않습니다.

함께 보면 좋은 글