투명 배경 일러스트
투명도와 라인을 그대로 유지하려면 PNG(고정밀)나 WebP 무손실(더 작은 용량)을 사용합니다.
- 주 피사체에 맞춰 크롭하여 여백 최소화
- 필요 시 @2x Retina 버전 병행
Format Guide
왜 이 포맷을 선택할까?
ImgEasyResize는 PNG·JPEG·WebP·AVIF·ICO를 지원합니다. 속도, 투명도, 호환성을 고려해 프로젝트마다 빠르게 결정을 내릴 수 있도록 정리했습니다.
래스터 vs 벡터
대부분의 웹 이미지는 픽셀 기반 래스터이며, 벡터는 수학적 경로(SVG 등)로 그려집니다. ImgEasyResize는 래스터 후처리에 집중하지만, 벡터 특성을 유지할 필요가 있는지 먼저 판단하세요. 크게 확대되는 아이콘은 SVG, 사진·재질 표현은 PNG / JPEG / WebP / AVIF가 적합합니다.
래스터: 사진 · 질감벡터: 아이콘 · 로고하이브리드: 호환성 위해 래스터 변환
핵심 포맷 비교
| 포맷 | 특징 | 브라우저 지원 | 권장 용도 |
|---|---|---|---|
| PNG | 무손실 압축, 완전한 알파, Indexed Color 지원. | 모든 현대 브라우저 (구 IE 포함). | UI, 로고, 픽셀 아트, 투명 배경이 필요한 소재. |
| JPEG | 손실 압축, 품질 0–1. 0.75 이상은 거의 무손실. | 모든 현대 브라우저. | 사진, 히어로 배너, 그라데이션 배경. |
| WebP | 손실 / 무손실, 알파 지원, JPEG / PNG보다 높은 압축률. | Chrome / Edge / Firefox / Safari 14+. | 투명도가 필요한 UI/일러스트, 모바일 이미지. |
| AVIF | AV1 기반, HDR·10bit·알파 지원, 압축 효율 최고. | Chrome 85+, Firefox 93+, Safari 16+. | 히어로 이미지, 풀스크린 사진, 모바일 저대역폭 환경. |
| ICO | Windows favicon 표준, 여러 크기를 내장. | 브라우저 favicon 용. | 사이트 아이콘, manifest 보완. |
권장 순서: 먼저 AVIF 또는 WebP로 최신 포맷을 출력하고, PNG 또는 JPEG로 백업을 만든 뒤 배치 다운로드로 한 번에 받아 두세요.
대량의 사진
AVIF를 품질 0.45~0.65로 먼저 출력하고, 브라우저 호환성을 위해 JPEG를 준비해 색 정확도를 유지합니다.
- 품질 슬라이더로 빠르게 비교
- “화면에 맞추기”로 디테일 확인
앱 내 스크린샷
텍스트를 또렷하게 유지하려면 PNG 또는 WebP 무손실 + Retina 배율 조합이 좋습니다.
- 폭/높이를 고정해 기기별 차이 최소화
- 배치 출력으로 파일명 규칙 유지
이중 포맷 체크리스트
구형 기기나 임베디드 시스템을 고려한다면 “모던 + 백업” 전략을 사용하세요:
- 먼저 AVIF / WebP (예: hero.avif)를 출력하고 동일 설정으로 JPEG / PNG를 복제합니다.
<picture>와type속성으로 브라우저가 지원 포맷을 자동 선택하도록 합니다.- 두 포맷을 같은 CDN 디렉터리에 두어 캐시와 버전 관리를 단순화합니다.
ImgEasyResize 배치 다운로드는 기본 파일명을 유지한 채 확장자만 바꾸므로 이 전략과 잘 맞습니다.