Knowledge Map

기획부터 전달까지 한 번에 보는 지식 트리

이 트리는 자주 등장하는 의사결정 포인트—소재 평가, 포맷 선택, 인코딩, 전달 전략—을 순서대로 정리했습니다. ImgEasyResize 도구를 활용해 각 단계를 밟으면 선명하면서도 가벼운 이미지 경험을 만들 수 있습니다.

소재 준비 Source Layer

소스와 색 공간

RAW / 스크린샷 / 디자인 시안 등 출처와 색 공간(sRGB / Display P3)을 먼저 확인해 이후 색상 차이를 예측합니다.

래스터 vs 벡터 색 관리 포인트
구도와 크기 결정

크롭 비율, 최종 표시 크기, Retina 배율을 정합니다. ImgEasyResize는 미리보기로 확인하면서 조정할 수 있습니다.

에디터 열기
정적? 동적?

정적 사진은 JPEG / WebP / AVIF가 적합하고, 투명 배경이나 픽셀 아트는 PNG 또는 WebP 무손실이 안전합니다.

상황별 포맷

포맷 & 인코딩 Processing Layer

주요 포맷 선택

브라우저 지원과 파일 크기를 비교해 JPEG / PNG / WebP / AVIF 중 하나를 고르고, 필요하면 현대 포맷 + 백업 포맷을 함께 준비합니다.

포맷 비교표 이중 포맷 전략
압축과 품질 제어

품질 슬라이더, 손실 / 무손실 전환, 최종 해상도를 함께 조정하여 화질과 용량을 동시에 관리합니다.

압축 가이드
실험과 배치

실제 배포 전에 여러 설정을 배치로 내보내고, 파일명과 노트를 정리해 의사결정을 설명할 수 있게 준비합니다.

워크플로 노트

전달과 모니터링 Delivery Layer

로드 전략

lazy-loading, 반응형 srcset/sizes, CDN 압축을 조합해 각 기기에서 최적의 이미지를 받도록 합니다.

전달 체크리스트
인코딩 & 보안

Base64, data URI, 스프라이트를 사용할 때는 파일 크기, 캐시, CSP 정책을 점검해 출처를 보호합니다.

캐시와 보안
성과 추적

Core Web Vitals, Lighthouse, 자체 대역폭 모니터링으로 압축 전략의 효과를 숫자로 확인합니다.

Core Web Vitals

추가 학습 & 연습

PNG / JPEG / WebP / AVIF의 투명도, 애니메이션, 압축 효율을 비교하고 의사결정 체크리스트를 제공합니다.

품질 파라미터, 색 공간, Base64, Retina 배율, 캐시 전략을 정리해 일관된 프로세스를 구축합니다.

크롭 → 이름 → 배치 출력 순서를 문서화해 누락 없이 반복할 수 있도록 만듭니다.

작은 이미지 세트를 골라 트리를 따라 작업해 보세요. ImgEasyResize로 크롭·출력한 뒤 포맷/인코딩 페이지에서 설정을 다시 확인하며 나만의 노트를 쌓을 수 있습니다.