네 이미지는 아마 너무 클 거야 (고치는 법)

지난주에 친구 사진 포트폴리오 웹사이트 감사를 했어. 아름다운 이미지. 멋진 작업.

홈페이지 로드에 12초 걸렸어.

범인은? 8MB짜리 히어로 이미지 하나. 폰 연결에선 방문자들이 뭐든 보기 전에 떠나.

이런 일이 생각보다 많이 일어나. 그래서 고치는 법을 얘기해보자.

아무도 눈치 못 채는 문제

Photoshop이나 폰에서 이미지를 내보낼 때 보통 필요한 것보다 훨씬 커. 카메라에서 바로 나온 4000x3000 사진은 15MB일 수 있어.

웹사이트에선 200KB 넘는 게 거의 필요 없어—때론 더 적게.

차이는 중요해:

| 이미지 크기 | 로드 시간 (3G) | 로드 시간 (4G) | |------------|----------------|----------------| | 5MB | 40초 이상 | 8초 | | 500KB | 4초 | 1초 미만 | | 100KB | 1초 미만 | 즉시 |

그 5MB 이미지는 느린 것만이 아니야—방문자의 데이터 요금제도 먹고 있어.

1단계: 먼저 크기 조정

뭐든 압축하기 전에 치수를 확인해.

웹사이트가 이미지를 800픽셀 너비로 표시하면 4000픽셀 원본을 업로드할 이유가 없어. 필요한 것보다 5배 많은 데이터를 보내는 거야.

이미지가 표시될 최대 크기를 파악해 (데스크톱에서 확인—보통 제일 크게), 그 너비로 리사이즈해. 레티나 디스플레이를 위해 20% 버퍼를 더하고 싶으면 더해.

2단계: 압축해

이제 이미지가 적절한 크기니까 압축해.

현대 압축 알고리즘은 놀랍도록 좋아. 종종 눈에 보이는 품질 손실 없이 파일 크기를 60-80% 줄일 수 있어. 진짜로—전후를 나란히 놓고 차이를 찾아봐봐.

몇 가지 알아둘 것:

JPEG 품질 80-85가 보통 스위트 스팟이야. 70 아래면 아티팩트가 보이기 시작해. 90 이상이면 눈에 안 보이는 개선에 바이트를 낭비하는 거야.

PNG는 무손실이라 압축이 덜 돼. 하지만 메타데이터를 제거하고 인코딩을 최적화하려고 압축기를 통과시킬 가치가 있어.

WebP는 둘 다의 장점을 줘—JPEG보다 작은 파일에 PNG같은 투명도 지원. 대부분의 브라우저가 이제 지원해.

3단계: 적절한 포맷 선택

이게 사람들이 생각하는 것보다 더 중요해.

JPEG 사용:

• 사진
• 많은 색상과 그라데이션이 있는 이미지
• 배경

PNG 사용:

• 로고
• 아이콘
• 스크린샷
• 투명도가 필요한 모든 것

WebP 사용:

• 모든 것, 관객이 현대 브라우저를 쓴다면
• 구형 브라우저엔 JPEG/PNG로 폴백

SVG 사용:

• 단순한 그래픽
• 아이콘
• 로고 (벡터 파일이 있으면)
• 무한히 확대되어야 하는 모든 것

실제 숫자

친구 포트폴리오를 최적화했을 때 이렇게 됐어:

| 전 | 후 | |--------|-------| | 히어로 이미지: 8MB | 히어로 이미지: 180KB | | 썸네일 그리드: 총 12MB | 썸네일 그리드: 총 400KB | | 페이지 로드: 12초 | 페이지 로드: 1.8초 |

같은 이미지. 같은 시각적 품질. 그냥 제대로 최적화한 거야.

게으른 방법

WordPress, Squarespace, 비슷한 플랫폼에 업로드하면 종종 자동으로 이미지를 압축해. 하지만 "종종"이 "항상"은 아니고, 그들의 압축이 항상 충분히 공격적인 건 아니야.

더 나은 접근: 업로드 전에 최적화해. 품질을 제어하고 플랫폼이 뭘 하기로 결정하든 의존하지 않아.

이미지당 2분 걸려. 방문자들이 고마워할 거야—네 사이트가 왜 빠른지 절대 몰라도.

빠른 체크리스트

어떤 이미지든 업로드 전에:

1. 적절한 크기야? 800px 필요한데 4000px 업로드하지 마
2. 압축됐어? 압축기를 통과시켜
3. 적절한 포맷이야? 사진은 JPEG, 그래픽은 PNG, 가능하면 WebP
4. 테스트했어? 최종 버전을 봐. 나빠 보이면 압축을 줄여

---

웹사이트 속도는 대부분 이미지에 관한 거야. 이미지를 고치면 성능 문제의 절반을 고친 거야. 나머지는 마진 최적화야.

제일 큰 이미지부터 시작해. 보통 히어로 배너랑 전체 너비 사진. 그게 최소 노력으로 제일 큰 성과를 줘.