웹용 이미지 권장 크기와 품질 (상황별 기준)

"이미지는 얼마나 커야 하나요?"는 웹 디자인에서 가장 흔한 질문이며, 답은 언제나 "어디에 보이느냐에 따라 다르다"입니다. 잘못된 크기는 페이지를 느리게 만들거나 화질을 떨어뜨리므로, 상황별 기준을 알아두면 두 문제를 모두 피할 수 있습니다. 이 가이드는 용도별로 치수·용량·품질의 실전 출발점을 제시해, 더 이상 감으로 정하지 않게 해줍니다.

중요한 두 숫자

모든 웹 이미지에는 두 가지 크기가 있습니다. 픽셀 치수(예: 1600×900)와 킬로바이트 단위의 파일 용량입니다. 치수는 화면에서 이미지가 차지하는 공간과 대략 맞아야 하고, 용량은 깨끗해 보이는 선에서 최대한 작아야 합니다. 둘 다 최적화하는 것이 목표입니다.

용도별 기준

전체 폭 히어로 이미지

큰 화면 기준 가로 약 1600~2000px을 목표로 하고, WebP나 AVIF로 대략 200KB 이하로 유지하세요. 히어로는 대개 LCP 요소이므로 그 용량이 체감 속도에 큰 영향을 줍니다.

블로그·본문 사진

대부분의 글 본문 폭은 700~900px이므로, 약 1200~1600px 이미지면 레티나 화면까지 커버합니다. 150KB 훨씬 아래를 목표로 하세요. WebP 품질 75면 거의 항상 충분합니다.

썸네일·카드

썸네일은 화면에서 작게 보이므로 400~600px이면 충분합니다. 대개 30~50KB 아래로 줄일 수 있는데, 한 페이지에 수십 개를 보여줄 때 큰 차이를 만듭니다.

품질 출발점

손실 포맷에서 사진은 품질 70~80이 안전한 범위입니다. AVIF는 같은 느낌을 조금 더 낮은 값에서 냅니다. 항상 전후를 비교하세요. 알맞은 값은 차이를 못 느끼는 가장 낮은 값입니다.

실전에 적용하기

용도마다 목표 너비를 정하고 그 크기로 리사이즈한 뒤 WebP나 AVIF로 품질 75에 변환하세요. Scrunch에서는 이미지 세트를 한 번에 배치 변환하고, 다운로드 전에 각 결과를 원본과 비교할 수 있어 모든 이미지를 필요한 만큼 가볍게 유지할 수 있습니다.

자주 묻는 질문

이미지를 화면 크기보다 크게 올리면 안 되나요?

레티나 화면을 위해 표시 크기의 약 2배까지는 유용합니다. 하지만 그 이상은 대역폭만 낭비하고 속도를 떨어뜨립니다. 표시 크기의 2배를 상한으로 삼으세요.

용량은 무조건 작을수록 좋나요?

너무 낮추면 화질이 눈에 띄게 나빠집니다. 목표는 깨끗해 보이는 선에서 가장 작게 만드는 것입니다. 변환 전후를 비교해 균형점을 찾으세요.

모든 이미지에 같은 품질을 써도 되나요?

대체로 품질 75가 무난하지만, 큰 히어로 이미지는 조금 더 신경 써서 낮추고, 작은 썸네일은 더 공격적으로 줄여도 됩니다. 용도에 맞게 조정하는 것이 가장 좋습니다.

이미지 파일 이름도 SEO에 영향을 주나요?

네. 의미 있는 파일 이름과 alt 텍스트는 이미지 검색과 접근성에 도움이 됩니다. img12345.jpg 보다 red-running-shoes.webp 처럼 내용을 설명하는 이름이 좋습니다. 크기·용량 최적화와 함께 신경 쓰면 이미지 SEO 효과가 커집니다.