화질 손실 없이 더 가벼운 이미지 제공하기

이미지는 대개 페이지에서 가장 무거운 요소이므로, 성능 개선에서 가장 크고 손쉬운 승리이기도 합니다. 목표는 “무조건 작게”가 아니라, 실제로 표시되는 화면에서 여전히 괜찮아 보이는 가장 작은 파일입니다. 다음은 매번 눈으로 결과물을 확인하지 않고도 그 지점에 도달하는 워크플로입니다.

압축하기 전에 크기부터 조정하세요

가장 큰 절감은 대개 코덱이 아니라 <b>크기</b>에서 나옵니다. 4000px짜리 히어로 이미지를 800px 슬롯에 넣으면 압축을 시작하기도 전에 픽셀의 약 96%가 낭비됩니다. 실제 표시 크기를 정하고, 고밀도(DPR) 화면을 고려하되(대부분의 사진에는 2배면 충분합니다) 먼저 그 크기로 축소하세요. 알맞은 크기의 이미지를 압축하면 이후 모든 단계에서 할 일이 줄어듭니다.

용도에 맞는 포맷 고르기

사진: AVIF나 WebP를 사용하고, 아직 필요하다면 JPEG 폴백을 두세요. 평면적인 UI, 로고, 스크린샷: 무손실 PNG나 WebP를 사용하세요. 사진을 PNG로, 스크린샷을 JPEG로 내보내지 마세요. 둘 다 잘못된 도구이며 용량<i>과</i> 화질을 동시에 잃게 됩니다. 확신이 안 서면 두 방식 모두 인코딩해보고 더 나은 쪽을 남기세요.

지각 화질 목표 설정하기

“Quality 80”이라는 값은 인코더마다 의미가 다르므로, 마법의 숫자 대신 <b>지각적</b> 결과를 목표로 삼으세요. SSIMULACRA2 점수가 80~90 정도면 대부분의 사진에서 시각적으로 무손실에 가깝고, 약 70 아래로 내려가면 그라데이션과 피부 톤에서 티가 나기 시작합니다. 하한선을 정해두고 인코더가 그 기준을 충족하도록 하면, 파일마다 감으로 판단하는 대신 라이브러리 전체에서 일관된 화질을 얻을 수 있습니다.

# 표시 크기로 리사이즈한 다음, 화질 하한선으로 변환
imageforge hero.png --resize 1600 --convert avif --quality 82
imageforge ./gallery/*.jpg --convert webp --quality 80 --recursive

자동화하기

워크플로는 실행이 지루할 정도로 단순해야 오래갑니다. 폴더 전체를 배치 처리하고, 원본은 그대로 두고, 도구가 얼마나 절감했는지 보고하게 해서 결과를 신뢰할 수 있게 하세요. 핵심은 “더 가볍게”를 기본 경로로 만드는 것이지, 출시 전에 누군가 깜빡하기 쉬운 수작업으로 남겨두지 않는 것입니다.

여전히 괜찮아 보이는 가장 작은 파일을 배포하세요 — 그냥 가장 작은 파일이 아닙니다. 그 차이가 이 일의 전부입니다.

추측하지 말고 측정하세요

파일 크기만이 아니라 실제 절감량과 실제 화질을 확인해서 루프를 닫으세요. 90% 작아졌지만 화질이 떨어져 보이는 파일은 승리가 아닙니다. 60% 작아졌는데도 시각적으로 동일한 파일이 진짜 승리입니다. 둘 다 추적하면 안전하게만 가지 않고 자신 있게 설정을 밀어붙일 수 있습니다.