웹용 이미지 최적화: 전체 가이드

느린 페이지 로드로 인해 전환이 발생합니다. 연구에 따르면 사용자의 40%가 3초 이상 소요되는 사이트를 이탈합니다. 가장 큰 원인은? 최적화되지 않은 이미지. 홈페이지에 있는 5MB 사진 한 장으로 인해 연결 속도가 빠른 경우에도 로드 시간이 엄청나게 걸릴 수 있습니다.

이미지 최적화 체크리스트

2026년 권장 크기

• 히어로 이미지: 최대 1920×1080(풀 HD) 또는 2560×1440(2K)
• 블로그 게시물 히어로: 1200×675(16:9)
• 제품 사진: 확대/축소 지원 시 1500×1500, 기본 디스플레이 800×800
• 아바타: 256×256(썸네일 크기가 축소됨)
• 오픈 그래프(소셜 공유): 1200×630
• 파비콘: 32×32, 192×192, 512×512 PNG

업로드하기 전에 이미지 크기 조정 도구를 사용하여 사진 크기를 해당 크기로 조정하세요.

형식: 언제 무엇을 사용할지

• WebP: 웹 이미지의 95%에 대한 기본값입니다. 동일한 품질의 JPG보다 25~35% 더 작습니다. 범용 브라우저를 지원합니다.
• AVIF: 더 작습니다(JPG보다 50% 작음). 히어로 이미지에 사용합니다. 최신 브라우저에서는 이를 지원합니다.
• JPG: 투명도가 없는 사진입니다. 호환성이 뛰어납니다.
• PNG: 로고, 스크린샷, 투명도가 있는 모든 것. 무손실.
• SVG: 벡터 그래픽, 아이콘, 간단한 일러스트레이션. 작은 파일 크기, 무한한 확장.

PDF7 이미지 변환을 사용하여 이러한 형식 간에 변환하세요.

압축: 얼마나 공격적인가 너무 공격적인가?

사진의 경우: 85% 품질로 시작하세요. 대역폭이 중요한 페이지의 경우 75%로 낮춥니다. 70% 미만에서는 아티팩트가 표시됩니다. 이미지 압축 도구를 사용하여 적절한 균형을 찾으세요.

srcset을 사용한 반응형 이미지

2K 이미지를 휴대전화에 제공하지 마세요. HTML의 srcset 속성을 사용하세요:

브라우저는 맞는 가장 작은 이미지를 선택합니다. 이미지당 3가지 크기가 필요합니다.

지연 로딩

스크롤 없이 볼 수 있는 모든 이미지에 loading="lazy"를 추가하세요. 최신 브라우저는 사용자가 근처로 스크롤할 때까지 이를 로드하지 않으므로 페이지를 로드할 때마다 대역폭이 절약됩니다.

100KB 규칙

100KB 미만의 개별 이미지를 목표로 하세요. 히어로 이미지는 200KB까지 늘어날 수 있습니다. 사진 한 장의 크기가 500KB를 넘으면 사진을 엉망으로 만든 것입니다. 크기를 조정하고 다시 압축하세요.