디자이너에게 “이미지를 좀 줄여 주세요” 라는 요청은 대개 화질을 포기하라는 말로 들립니다. 실제로 품질 슬라이더만 내리면 그 말이 맞습니다. 하지만 사이트를 무겁게 만드는 원인의 상당 부분은 화질이 아니라 포맷 선택에 있고, 이쪽은 포기 없이 해결됩니다 — 맞는 포맷으로 저장한 그림은 화면에서 구별되지 않은 채 파일만 작아집니다.
사진과 도형은 애초에 다른 문제입니다
압축 방식은 그림의 성질을 전제로 설계됩니다. 사진은 인접한 픽셀의 색이 조금씩 달라지는 연속 계조로 이루어져 있어, 사람 눈이 잘 알아채지 못하는 미세한 차이를 버리는 손실 압축이 아주 잘 듣습니다. 반면 로고 · 아이콘 · 도표 · UI 스크린샷처럼 평면 색과 선명한 경계로 이루어진 그림은 사정이 정반대입니다. 손실 압축은 경계선 주변에 얼룩 같은 잔물결을 남기고, 그 잔물결을 저장하느라 파일이 오히려 커지기도 합니다.
정리하면 이렇습니다. 사진은 손실 계열(JPEG · WebP · AVIF), 평면 그래픽은 무손실 계열(PNG) 또는 아예 벡터(SVG)입니다. 투명 배경이 필요하면 PNG · WebP · AVIF 가 답이고, JPEG 는 투명도를 담지 못합니다.
WebP 와 AVIF 가 실제로 주는 것
WebP 와 AVIF 는 같은 체감 화질을 더 적은 용량으로 담도록 설계된 최신 포맷입니다. 특히 AVIF 는 압축이 더 공격적이라 사진에서 차이가 크게 나는 대신, 인코딩에 시간이 더 걸립니다 — 수백 장을 한꺼번에 변환할 때 이 차이가 작업 시간으로 돌아옵니다.
워드프레스는 업로드된 WebP 를 코어에서 다루고, AVIF 도 서버의 이미지 라이브러리가 지원하는 환경이라면 처리합니다. 즉 이 선택은 디자인 결정이면서 동시에 서버 환경 확인이 필요한 결정입니다. 지원 여부는 사이트 상태 화면이나 서버 담당자에게 한 번만 확인하면 됩니다.
폴백은 여전히 생각해야 합니다. 브라우저 지원은 이미 넓지만, 이메일 클라이언트 · 오래된 사내 시스템 · 일부 협업 도구는 최신 포맷을 못 여는 경우가 있습니다. 웹사이트 본문 이미지는 최신 포맷으로 가고, 뉴스레터나 외부로 나가는 자료에는 JPEG · PNG 사본을 따로 두는 이중 운영이 현실적입니다.
고르는 순서를 한 줄로
포맷 하나만 정리해도 페이지 무게가 눈에 띄게 달라집니다. 성능 관점의 배경은 성능 최적화 아카이브에 더 있고, 이미 운영 중인 사이트의 이미지 파이프라인을 통째로 정비하고 싶다면 최적화 지원 사업에 포함돼 있습니다.
다음 회차
포맷을 정했다면 다음은 크기입니다. 다음 회차는 업로드 전에 정해 두어야 하는 최대 픽셀 폭 — 카메라 원본을 그대로 올렸을 때 워드프레스 안에서 실제로 벌어지는 일을 다룹니다.