웹사이트 속도를 위한 이미지 최적화

예시 결과

실제 사진을 처리한 결과예요. 파일을 내려받아 비교하고 같은 설정으로 직접 확인할 수 있습니다.

미리보기는 가볍게 줄인 사진입니다. 세부 화질은 아래 파일을 내려받아 비교해 주세요.

직접 처리한 예시

큰 여행 사진을 웹에 맞는 크기로

1536 px 사진을 960 px WebP로 만들었습니다. 크기 조정과 압축을 함께 적용합니다. 겉모습보다 파일 크기와 형식의 변화를 확인해 보세요.

• 1536 × 1024 → 960 × 640 px
• 471.3 KB → 83.5 KB · 82% 감소

설정: 가로 960 px · WebP · 품질 75

확인: 2026. 9. 29. · Windows / Edge 154

사진: PHOTOGIO 예시 사진 · AI로 만든 원본 · 포토지오로 직접 편집

이 도구 열기

속도는 형식보다 먼저 크기에서 갈린다

웹사이트용 이미지를 최적화할 때 가장 먼저 해야 할 일은 실제 표시 크기에 맞추는 것입니다. 화면에 900px로 보일 이미지를 4000px 그대로 올려 두면, 형식을 아무리 바꿔도 불필요한 바이트를 계속 보내게 됩니다.

즉 “형식을 뭘 쓰지?”보다 먼저 “이 이미지가 페이지에서 실제로 얼마나 크게 보이는가?”를 확인해야 합니다. 가장 쉬운 속도 개선은 필요 이상으로 큰 이미지를 보내지 않는 것입니다.

페이지 위치별로 먼저 잡는 범위

정답은 디자인마다 다르지만, 아래 범위를 시작점으로 잡으면 과하게 큰 원본을 그대로 올리는 실수는 줄일 수 있습니다. 중요한 것은 숫자 자체보다 실제 레이아웃 폭과 일치시키는 것입니다.

웹 업로드 전 기본 순서

실무에서는 보통 표시 크기에 맞춰 줄이고, 그다음 형식을 정하고, 마지막으로 압축을 다듬는 흐름이 가장 안정적입니다. 필요하면 공개 전에 메타데이터도 함께 제거합니다.

사진 중심이라면 JPG나 WebP를 먼저 비교하고, 투명 배경이나 UI 요소가 중요하면 PNG 또는 WebP를 봅니다. AVIF는 더 작아질 수 있지만, 배포 환경이 이를 안정적으로 처리하는지 확인되어 있을 때만 기본값으로 쓰는 편이 안전합니다.

• 표시 크기 확인 -> 형식 결정 -> 압축 조정 -> 메타데이터 정리 순서가 가장 흔합니다.
• Core Web Vitals를 보려면 용량뿐 아니라 실제 LCP 이미지가 무엇인지도 같이 봐야 합니다.
• 본문 이미지와 썸네일은 같은 원본이라도 다른 크기와 형식을 쓰는 편이 자연스럽습니다.

자주 하는 실수

첫 번째는 원본 크기 그대로 업로드하는 것입니다. 두 번째는 같은 JPG를 여러 번 다시 저장해 열화시키는 것입니다. 세 번째는 텍스트가 있는 이미지를 너무 낮은 품질로 압축해 읽기 어렵게 만드는 것입니다.

성능 최적화는 바이트만 줄이는 작업이 아닙니다. 사용자가 실제로 보는 크기에서 충분히 선명한지, 레이아웃 시프트를 만들지 않는지, 업로드 환경에서 문제 없이 읽히는지를 같이 봐야 합니다.

• CSS로만 줄이고 원본은 큰 상태로 두면 속도 개선이 거의 없습니다.
• 히어로 이미지 하나만 크더라도 LCP가 쉽게 느려집니다.
• 캡처 이미지는 너무 공격적으로 압축하면 읽을 수는 있지만 신뢰가 떨어지는 화면이 됩니다.

배포 전에 마지막으로 보는 항목

이미지를 만든 뒤에는 파일 크기 숫자만 보지 말고 실제 페이지에서 한 번 확인하는 편이 좋습니다. 선명도, 표시 크기, 배경색, 투명도, 레이아웃 시프트까지 같이 확인해야 실제 속도 개선이 됩니다.

• 브라우저 개발자도구에서 실제 요청 파일이 예상한 형식으로 내려가는지 확인합니다.
• 본문 이미지라면 모바일 폭에서도 너무 큰 파일이 내려가지 않는지 봅니다.
• 공개 업로드 전에는 메타데이터 제거 여부를 같이 확인합니다.