웹용은 '출력 크기'가 기준입니다
인쇄용 고해상도 파일을 그대로 웹에 올리면 대부분 낭비입니다. 인쇄는 300dpi 이상이 필요하지만, 화면은 72~96dpi 수준에서 선명하게 보입니다. 같은 시각적 결과를 얻기 위해 웹이 필요한 픽셀 수는 인쇄의 1/10 이하인 경우가 많습니다.
웹용 이미지를 만들 때는 먼저 실제 표시 영역의 픽셀 크기를 확인하고, 레티나(HiDPI) 화면을 위해 그 2배 크기를 목표로 설정하는 것이 일반적입니다. 그보다 큰 픽셀은 다운로드만 늘어납니다.
레티나 대응은 무한이 아닙니다
디자인 그리드의 2배 범위에서 관리하면 충분한 경우가 많습니다. 예를 들어 블로그 본문 폭이 700px이라면, 웹용 이미지는 1400px 이하로 준비하면 됩니다. 4000px짜리 이미지를 그대로 쓰는 것은 불필요합니다.
모바일 화면의 해상도가 높아졌다고 무조건 큰 이미지를 올릴 필요는 없습니다. 오히려 작은 화면에서는 적절한 크기의 이미지가 더 빠르게 로딩되어 사용자 경험이 좋습니다.
포맷 선택
사진은 JPEG 또는 WebP, 투명이 필요하면 PNG, 아이콘·벡터 그래픽은 SVG 후보입니다. 포맷을 잘못 선택하면 아무리 압축해도 효율이 낮아집니다.
JPEG는 사진에서 가장 넓게 쓰이는 포맷으로, 손실 압축이지만 적절한 품질 설정에서 눈에 띄지 않습니다. WebP는 JPEG보다 30% 이상 작은 파일을 만들 수 있어 이미지 최적화에 유리하지만, 구형 환경에서의 지원을 확인해야 합니다.
마지막은 압축 도구
리사이즈와 포맷을 정했다면 마지막으로 압축 도구로 용량을 확정합니다. 이 사이트의 이미지 용량 줄이기 도구에서 배포 직전 용량을 확인하고, 목표 용량에 맞는 품질 설정을 찾으세요.
최종 결과물을 실제 브라우저에서 열어 화면 표시 크기에서 선명도를 확인하는 것으로 웹용 이미지 만들기가 완성됩니다.
정리: 웹용 이미지 만들기는 규칙이 성능을 만든다
규칙이 있으면 팀 전체가 빨라집니다. 웹용 이미지 기준(표시 크기, 포맷, 최대 용량)을 한 장의 문서로 정리해 공유하면, 새 멤버도 즉시 동일한 기준으로 작업할 수 있습니다.
기준 없이 매번 판단을 새로 하면 일관성이 깨지고 불필요한 논의가 생깁니다. 오늘 오전에 한 번만 기준표를 만들어 두면 이후 수개월의 작업이 효율적으로 흘러갑니다.