디테일을 통제해 더 빠르게 전달하기

압축과 품질 파라미터

quality 슬라이더로 결과를 즉시 확인할 수 있습니다. 추천 흐름:

• PNG 무손실 → 더 작은 용량이 필요하면 WebP 무손실, 256색 이하라면 Indexed PNG 시도.
• JPEG → 0.7에서 시작해 단계적으로 낮추고, 0.4 이하로 급격히 떨어뜨려 밴딩이 생기지 않도록 주의.
• AVIF / WebP → 0.45, 0.6, 0.75를 테스트하며 파일 크기와 시각적 평가를 기록.

배치 출력 시 "파일명 / 포맷 / 품질 / 크기"를 기록해두면 이해관계자에게 설명하기 쉽습니다.

색 공간 & 다이내믹 레인지

대부분의 브라우저는 SDR / sRGB 모드에서 이미지를 표시합니다. 소스가 Display P3 또는 HDR이라면:

• 디자인 툴에서 sRGB로 변환 후 내보내 브라우저 측 변환으로 인한 색 차이를 방지합니다.
• HDR을 유지하려면 AVIF (10-bit)를 <picture> + type="image/avif"로 제공하고 sRGB 버전을 함께 둡니다.
• 스크린샷에 Gamma / ICC 프로파일이 포함되었는지 확인하고, 필요하면 ImgEasyResize에서 다시 내보냅니다.

이름 지정, 배치, 버전 관리

Queue를 사용하면 여러 이미지에 동일 설정을 복사하기 쉽습니다:

• 모든 이미지를 추가한 뒤 첫 번째에서 크롭/포맷/품질을 설정하고 “다음”으로 그대로 적용합니다.
• 배치 다운로드는 파일명을 유지하므로 hero-home@2x.avif 같은 규칙이 깨지지 않습니다.
• 출력 파라미터를 README나 이슈에 남겨 두면 추후 조정 시 참고하기 좋습니다.

전달 전략: 로딩 & 캐시

최적화한 파일을 실전에서 살리려면 전달 방식도 함께 설계해야 합니다:

• HTML → <picture> + srcset으로 여러 해상도를 제공하고 loading="lazy"를 활용합니다.
• CDN → 30일 이상의 캐시와 버전 포함 URL을 사용해 필요할 때 즉시 갱신합니다.
• Retina → 2x/3x 이미지를 출력하되 CSS에서 실제 표시 크기를 지정해 선명도를 유지합니다.

보안 & 인라인 인코딩

Base64나 data URI를 사용할 때는 다음을 확인하세요:

• 용량: Base64는 약 33% 증가하므로 작은 UI 요소에만 사용합니다.
• 캐시: 인라인 이미지는 HTML/CSS와 함께 갱신되므로, 자주 바뀌는 소량 요소에 적합합니다.
• CSP: Content Security Policy를 사용한다면 img-src data:를 허용 규칙에 추가합니다.

도메인 화이트리스트를 쓰는 사이트라면(ImgEasyResize도 동일) 사용하는 CDN/도메인을 모두 허용 목록에 추가해 차단되지 않도록 하세요.