피드로 돌아가기
How I Shaved 10 MB Off My Portfolio in One Command
Dev.toDev.to
Backend

PNG to WebP 자동 전환으로 이미지 전송량 80% 절감 및 10MB 최적화

How I Shaved 10 MB Off My Portfolio in One Command

Vicente G. Reyes2026년 6월 3일9beginner

Context

Django Admin을 통한 무분별한 고해상도 PNG 업로드로 인한 모바일 LCP 성능 저하 발생. 개별 이미지 크기가 최대 1.4MB에 달해 PageSpeed Insights의 이미지 전송 최적화 경고가 지속되는 구조적 한계 노출.

Technical Solution

  • Django Management Command를 통한 S3 내 기존 PNG 자산의 일괄 WebP 마이그레이션 수행
  • Pillow 라이브러리를 활용하여 RGBA/P/LA 모드에 따른 투명도 유지 및 RGB 변환 로직 구현
  • 모델 save() 메서드 오버라이딩을 통한 신규 업로드 이미지의 자동 WebP 변환 파이프라인 구축
  • update_fields 검증 로직을 통한 이미지 외 필드 수정 시 불필요한 재변환 방지
  • S3 스토리지 기반의 읽기 경로 최적화를 위해 쓰기 시점에 변환을 완료하는 전략 채택
  • dry-run 플래그 구현을 통한 프로덕션 환경 내 데이터 파괴 방지 및 사전 검증 체계 마련

1. 업로드 인터페이스에서 이미지 포맷 강제 제한 또는 자동 변환 파이프라인 검토

2. 이미지 에셋의 실제 디스플레이 해상도와 원본 해상도의 불일치 여부 확인

3. 스토리지 비용 및 전송 속도 개선을 위한 WebP/AVIF 등 최신 포맷 도입 고려

4. 대량 데이터 변환 시 `dry-run` 모드와 `skip-existing` 로직을 통한 멱등성 확보

원문 읽기