웹페이지 이미지 형식과 크기: JPG, PNG, WebP, AVIF 고르기
Finipix 가이드 · 웹용 이미지 줄이기 · 크기 바꾸기. Finipix 열기
휴대폰으로 찍은 사진 한 장은 보통 3~6MB, 가로 4000픽셀이 넘습니다. 이런 사진 세 장을 랜딩 페이지에 그대로 넣으면 모바일 데이터로 들어온 방문자는 어차피 가로 400픽셀로 보일 사진을 받느라 몇 초를 기다립니다. 한 페이지짜리 사이트가 느린 이유는 대부분 이미지이고, 해결도 대부분 HTML에 넣기 전에 끝납니다. 알맞은 형식을 고르고, 실제로 보이는 크기에 맞춰 줄인 다음 압축합니다.
이미지마다 맞는 형식
| 형식 | 잘 맞는 곳 | 피할 곳 |
|---|---|---|
| JPG(JPEG) | 사진, 색이 부드럽게 이어지는 이미지 | 글자, 로고, 경계가 날카로운 그림, 투명 배경 |
| PNG | 화면 캡처, 단색 위주의 그래픽, 투명 배경이 필요한 이미지 | 큰 사진(파일이 매우 커짐) |
| WebP | 사진과 그래픽 모두. 투명 배경과 움직이는 이미지도 되고, 대개 JPG·PNG보다 작음 | 아주 오래된 브라우저 |
| AVIF | 파일을 가장 작게 만들고 싶은 사진. WebP보다 작아지는 경우가 많음 | 대체 이미지를 둘 수 없는 상황 |
| SVG | 로고, 아이콘, 단순한 일러스트. 아무리 키워도 선명함 | 사진 |
| GIF | 다른 방법이 없을 때의 짧고 단순한 움직임 | 사진, 긴 애니메이션(WebP나 동영상이 훨씬 작음) |
브라우저 지원을 보면 JPG, PNG, GIF, SVG는 어디서나 열립니다. WebP는 현재 버전의 Chrome, Edge, Firefox, Safari가 모두 지원하지만, 오래된 macOS의 예전 Safari에서는 보이지 않습니다. AVIF는 브라우저마다 지원 시점이 늦었기 때문에 MDN은 지금도 WebP나 JPG, PNG 대체 이미지를 함께 두라고 권합니다. 이럴 때 쓰는 것이 <picture> 요소입니다. 브라우저는 위에서부터 읽을 수 있는 첫 번째 형식을 고릅니다.
<picture> <source srcset="hero.avif" type="image/avif"> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" width="1600" height="900" alt="봄 워크숍에 모인 팀원들"> </picture>
이 구성이 번거롭다면, 작은 사이트에서는 잘 압축한 WebP나 JPG 한 장으로도 충분합니다.
픽셀 크기는 화면에 보이는 크기 기준으로
먼저 물어야 할 것은 "이 이미지가 화면에서 가장 넓게 보일 때 몇 픽셀인가"입니다. 가로 800픽셀 칸 안에 들어가는 사진이 4000픽셀일 이유는 없습니다. 다만 휴대폰과 노트북 상당수, 요즘 모니터 일부는 CSS 1픽셀을 실제 화소 2개 이상으로 그리는 고밀도 화면이라, 보이는 폭의 약 2배로 내보내는 것이 보통입니다. 3배, 4배로 키워도 눈에 띄는 차이는 적고 파일만 커집니다.
- 히어로·전체 폭 배너: 가로 1600~2000픽셀이면 노트북 화면 대부분에 충분합니다. 2400픽셀 이상은 이미지 자체가 페이지의 핵심일 때만 의미가 있습니다.
- 본문 사이의 이미지: 글 칸 폭이 700~800픽셀이라면 1400~1600픽셀로 내보냅니다.
- 카드·썸네일: 300~400픽셀로 보인다면 600~800픽셀이면 됩니다.
- 로고: SVG 파일이 있으면 SVG를 씁니다. PNG밖에 없다면 머리글에 보이는 높이의 2배로 만듭니다. 40픽셀 높이로 보이는 로고라면 80픽셀입니다.
1배와 2배 파일을 브라우저가 골라 쓰게 하려면 srcset을 씁니다. <img src="team-800.jpg" srcset="team-1600.jpg 2x" alt="…">처럼 적습니다. 작은 페이지라면 2배 크기 파일 한 장이 더 간단하고 대개 충분합니다.
목표로 삼을 파일 용량
정해진 기준은 없지만, 아래 정도면 한 페이지 사이트가 모바일 데이터에서도 가볍게 열립니다.
- 히어로 이미지: 200~300KB 이하
- 본문 사진: 장당 100~150KB 이하
- 썸네일과 아이콘: 많아야 수십 KB. SVG 로고는 10KB가 안 되는 경우가 많습니다.
- 이미지를 포함한 페이지 전체: 1~2MB 안팎
모바일 회선에서는 1MB마다 기다림이 체감되고, 데이터 요금제를 쓰는 방문자는 그만큼을 직접 부담합니다. 히어로 이미지는 처음 화면에서 가장 큰 요소인 경우가 많아서, 이 파일이 무거우면 페이지가 "다 열렸다"고 느끼는 순간이 그대로 늦어집니다. 구글도 이런 로딩 경험(Core Web Vitals의 Largest Contentful Paint 등)을 페이지 평가에 반영합니다.
무료로 압축하는 방법
Squoosh(squoosh.app)는 Google Chrome Labs의 오픈소스 프로젝트로, 브라우저 안에서 동작하며 이미지가 기기 밖으로 나가지 않는다고 밝히고 있습니다. 사진을 열고 크기 조절 옵션에서 가로 폭을 정한 뒤, WebP나 MozJPEG 같은 출력 형식을 고르고, 가운데 구분선을 좌우로 끌어 원본과 결과를 나란히 비교합니다. 사진은 품질 70~80 정도에서 시작해, 차이가 눈에 보일 때까지 낮췄다가 한 단계 올리는 식으로 맞추면 됩니다.
여러 장을 한꺼번에 줄여야 한다면 Qorlize의 무료 도구 Finipix도 브라우저 안에서 같은 일을 하며, 파일을 어디에도 올리지 않습니다. 파일 여러 개를 한 번에 끌어다 놓고, 가로 1200이나 1920픽셀 같은 크기 프리셋, 저장 형식(JPEG, WebP, PNG), 40~95 사이의 품질을 고른 뒤 한 장씩 또는 ZIP으로 내려받습니다. 파일마다 줄어든 용량과 전후 비교 슬라이더가 나옵니다. 자세한 순서는 웹페이지 이미지 용량 줄이기에 정리해 두었습니다.
무료든 유료든 대부분의 이미지 편집 프로그램에도 크기 조절과 품질 슬라이더가 있는 내보내기 기능이 있고, 이미지를 한꺼번에 많이 처리한다면 명령줄 도구를 익혀 둘 만합니다. 무엇을 쓰든 순서는 같습니다. 먼저 크기를 줄이고, 그다음 압축하고, 실제로 보일 크기에서 결과를 확인합니다.
꼭 챙길 HTML 속성
width와 height: 태그에 width="1600" height="900"처럼 이미지의 픽셀 크기를 적어 두면, 브라우저가 파일을 받기 전에 가로세로 비율을 계산해 자리를 미리 잡아 둡니다. 이 속성이 없으면 이미지가 하나씩 로드될 때마다 아래 글이 툭툭 밀려 내려갑니다. 읽는 사람에게 거슬리고, 성능 점검 도구가 "레이아웃 이동(layout shift)"으로 지적하는 바로 그 현상입니다. 속성을 적어도 반응형은 유지됩니다. CSS에 max-width: 100%; height: auto;를 주면 좁은 화면에서는 그대로 줄어듭니다.
alt: 이미지를 볼 수 없는 사람과, 파일이 로드되지 않았을 때를 위해 무엇이 찍혀 있는지 적습니다. alt="이미지1"이 아니라 alt="전시 부스를 조립하는 직원 두 명"처럼 씁니다. 순전히 장식용 이미지라면 alt=""로 비워 두어 화면 낭독기가 건너뛰게 합니다. 속성 자체를 빼먹지는 마십시오.
loading="lazy": 이미지가 보이는 영역 가까이 올 때까지 내려받기를 미루라는 뜻입니다. 페이지 아래쪽 이미지에 붙입니다. 히어로 이미지처럼 페이지를 열자마자 보이는 이미지에는 붙이지 않습니다. web.dev도 첫 화면에 보일 가능성이 큰 이미지는 지연 로딩하지 말라고 권합니다. 오히려 늦게 뜨기 때문입니다.
<img src="images/workshop.webp" width="1400" height="933"
loading="lazy" alt="긴 테이블에서 시제품을 시험해 보는 참가자들">
가벼운 파일로 바꿔 넣기
압축한 이미지는 페이지 안의 무거운 이미지를 대신해야 의미가 있습니다. VS Code 같은 텍스트 편집기라면 각 src를 새 파일 이름으로 바꾸고, width와 height도 새 크기에 맞게 고칩니다.
Finipage에서는 HTML 파일을 연 뒤, 폴더에 있는 새 이미지 파일을 페이지 속 이미지 위로 끌어다 놓으면 그 자리에서 바뀝니다. 이미지를 선택하고 오른쪽 속성 패널의 이미지 바꾸기를 눌러도 됩니다. 좁은 화면에서 이미지가 칸 밖으로 넘치지 않게 하려면 크기 항목에서 폭을 100%(또는 auto)로, 높이는 auto로 두어 비율을 유지합니다. 그다음 상단에서 미리보기를 모바일 폭으로 바꿔 확인합니다.
이때 알아 둘 점이 두 가지 있습니다. 첫째, 바꿔 넣은 이미지는 별도 파일로 남지 않고 HTML 파일 안에 데이터 URL로 직접 들어갑니다. Base64로 바꾸는 과정에서 용량이 3분의 1가량 늘기 때문에 HTML 파일은 이미지 용량의 1.3배 남짓만큼 커지고, 2MB가 넘는 파일을 넣으면 편집기가 경고를 띄웁니다. 둘째, Finipage는 이미지를 자르거나 압축하지 않습니다. 크기 조절과 압축은 Finipix, Squoosh, 이미지 편집 프로그램 등에서 먼저 끝내십시오. 끌어다 놓은 파일이 그대로 페이지에 들어갑니다. 이미지를 images 폴더의 별도 파일로 유지하고 싶다면 텍스트 편집기에서 src를 고치는 편이 맞습니다.
다음에 볼 글
편집기에서는 보이던 이미지가 파일을 옮긴 뒤 사라진다면 HTML 파일에서 이미지가 안 보일 때에서 경로 문제를 점검하십시오. 가벼워진 페이지가 휴대폰에서 실제로 어떻게 보이는지는 모바일에서 페이지 확인하기를 참고하십시오.
내 이미지로 바로 해 보려면 Finipix를 여세요. 브라우저에서 돌아가고 이미지는 내 기기 밖으로 나가지 않습니다.