사진을 그대로 올렸더니 홈페이지가 느려집니다
홈페이지에 넣을 사진은 대부분 휴대폰이나 카메라에서 바로 꺼내옵니다. 문제는 이 원본이 한 장에 4MB에서 8MB까지 나간다는 점입니다. 화면에서는 똑같이 보이지만, 방문자는 그 용량을 전부 내려받은 뒤에야 사진을 보게 됩니다.
사진 다섯 장이 들어간 소개 페이지라면 합쳐서 20MB가 넘어갑니다. 사무실 유선 인터넷에서는 티가 잘 나지 않습니다. 만든 사람 화면에서는 이미 저장된 사진이 다시 뜨기 때문에 더 빨라 보이기까지 합니다. 그런데 밖에서 모바일 데이터로 들어온 방문자 화면에서는 글씨만 먼저 뜨고 사진 자리가 한참 비어 있습니다. 홈페이지가 느리다는 말이 나오는 원인 중에 가장 흔한 것이 이 원본 사진입니다.
다행히 이 작업에는 돈이 들지 않습니다. 유료 편집 프로그램을 사지 않아도, 윈도우와 맥에 이미 들어 있는 기능과 무료 도구만으로 충분히 끝낼 수 있습니다. 순서만 지키면 화질도 지켜집니다.
1단계 - 지금 용량이 얼마인지부터 확인합니다
줄이기 전에 현재 상태를 봐야 합니다. 홈페이지에 올릴 사진을 한 폴더에 모아 두고, 윈도우 파일 탐색기나 맥 파인더에서 크기 순으로 정렬하면 끝입니다. 목록 맨 위에 있는 몇 장이 페이지 속도를 좌우하는 사진입니다.
실무에서 쓰는 기준
- 화면 상단에 넓게 깔리는 대표 사진: 200KB ~ 400KB
- 본문 중간에 들어가는 사진: 100KB ~ 200KB
- 목록이나 카드에 쓰이는 작은 썸네일: 30KB ~ 60KB
이 기준을 넘는 사진에만 손을 대면 됩니다. 이미 100KB인 사진을 90KB로 만드느라 시간을 쓸 필요는 없습니다. 6MB짜리 한 장을 300KB로 만드는 쪽이 체감 속도를 훨씬 크게 바꿉니다.
여기서 한 가지 더 확인할 것이 있습니다. 사진의 가로세로 픽셀 크기입니다. 윈도우는 파일을 오른쪽 클릭해 속성 - 자세히, 맥은 정보 가져오기에서 볼 수 있습니다. 가로가 4000픽셀 넘게 찍혀 있다면 다음 단계에서 가장 큰 효과를 보게 됩니다.
2단계 - 가로 크기를 먼저 줄입니다
압축 도구부터 찾기 쉬운데 순서가 반대입니다. 사진 용량을 가장 크게 결정하는 것은 압축률이 아니라 가로 픽셀 수입니다. 요즘 휴대폰으로 찍은 사진은 가로가 4000픽셀을 넘습니다. 반면 홈페이지에서 실제로 쓰이는 폭은 대표 사진이 1920픽셀, 본문 사진이 1200픽셀 정도입니다. 나머지는 화면에 표시되지도 않은 채 데이터만 잡아먹습니다.
추가 프로그램은 필요 없습니다. 윈도우는 그림판에서 사진을 열고 크기 조정을 누른 뒤 픽셀 단위를 선택해 가로 값만 입력하면 됩니다. 가로세로 비율 유지에 체크되어 있으면 세로는 알아서 따라옵니다. 맥은 미리보기에서 도구 메뉴의 크기 조정을 선택하고 같은 방식으로 넣으면 됩니다. 여러 장을 한꺼번에 선택해 처리할 수도 있습니다.
가로만 1920픽셀로 줄여도 용량이 원본의 5분의 1 아래로 떨어지는 경우가 많습니다. 화질은 그대로입니다. 원래 화면에 안 보이던 픽셀을 버린 것이기 때문입니다. 이 단계만 거쳐도 대부분의 사진이 목표 용량 근처까지 내려옵니다.
3단계 - 저장 형식을 바꿉니다
크기를 줄였는데도 아직 무겁다면 저장 형식을 봅니다. JPG로 저장된 사진을 WebP로 바꾸면 같은 화질에서 용량이 25%에서 35% 정도 더 줄어듭니다. 크롬, 사파리, 엣지, 파이어폭스 모두 지원하기 때문에 지금은 안 보일 걱정을 하지 않아도 됩니다.
변환은 웹에서 파일을 올리기만 하면 되는 무료 변환 도구가 많고, 브라우저 안에서 처리되어 파일이 서버로 올라가지 않는 도구를 고르면 더 안전합니다. 사람 얼굴이 들어간 사진이나 계약 관련 자료를 다룰 때는 이 점을 확인하시는 편이 좋습니다.
형식은 용도에 따라 나눕니다. 풍경이나 인물처럼 색이 복잡한 사진은 JPG 또는 WebP, 로고나 아이콘처럼 색이 단순하고 배경이 투명해야 하는 그림은 PNG 또는 SVG입니다. 로고를 JPG로 저장하면 글자 가장자리가 지저분해지고, 반대로 사진을 PNG로 저장하면 용량이 몇 배로 뜁니다. 이 두 가지만 구분해도 불필요한 용량이 크게 줄어듭니다.
4단계 - 압축률은 마지막에 손댑니다
여기까지 하고도 기준을 못 맞춘 사진에만 압축률을 조정합니다. 무료 압축 도구에서 품질 값을 75에서 85 사이로 두면 대부분 육안으로 차이를 느끼기 어렵습니다. 60 아래로 내려가면 하늘이나 벽처럼 색이 고르게 이어지는 부분에 얼룩이 생깁니다.
확인하는 방법은 간단합니다. 줄인 사진을 실제 홈페이지에 들어갈 크기로 화면에 띄워 놓고 원본과 나란히 봅니다. 100%로 확대해서 비교하면 어차피 차이가 보이지만, 방문자는 그렇게 보지 않습니다. 실제로 보이는 크기에서 구분이 안 되면 그 압축률은 쓸 만합니다.
한 가지 더 있습니다. 줄인 파일은 원본과 다른 폴더에 저장하시는 것이 좋습니다. 원본을 덮어쓰면 나중에 인쇄물이나 다른 크기로 다시 쓸 때 되돌릴 방법이 없습니다.
줄여 놓은 사진은 어디서 효과가 납니다
사진 용량을 줄이면 세 곳에서 티가 납니다. 첫째는 모바일 접속입니다. 데이터가 느린 곳에서 들어온 방문자 화면에서 사진이 뜨는 시점이 눈에 띄게 앞당겨집니다. 둘째는 검색입니다. 페이지 로딩 속도는 검색 순위를 정하는 요소 중 하나이고, 사진은 그 속도에서 가장 큰 비중을 차지합니다. 셋째는 관리 화면입니다. 원본을 통째로 올려 두면 나중에 사진을 교체할 때마다 업로드에 시간이 걸립니다.
애초에 큰 사진을 만들지 않는 방법도 있습니다. 아이비전트 기능형 빌더 호스팅에는 무료 이미지 라이브러리가 들어 있어, 편집 화면에서 고른 사진이 웹에 맞는 크기로 자리에 들어갑니다. 직접 찍은 사진이 아니라면 이 방법이 가장 빠릅니다.
AI로 만든 정적 사이트를 올려 쓰는 경우라면 AI 호스팅이 글로벌 CDN 가속을 기본으로 제공합니다. 사진 용량을 줄여 놓을수록 CDN 효과가 크게 나타나기 때문에, 두 가지를 같이 해두면 체감 차이가 확실합니다. 요금 조건은 요금제 페이지에서 확인하실 수 있습니다.
정리
- 사진 폴더를 크기 순으로 정렬해 무거운 몇 장을 먼저 찾습니다.
- 가로 픽셀을 1920 또는 1200으로 줄입니다. 여기서 대부분 해결됩니다.
- JPG를 WebP로 바꿔 한 번 더 줄입니다. 로고는 PNG나 SVG로 따로 둡니다.
- 그래도 무거운 사진만 품질 75에서 85 사이로 압축합니다.
- 원본은 다른 폴더에 남겨 둡니다.
다섯 줄이면 끝나는 작업이고 유료 프로그램은 한 번도 필요하지 않습니다. 홈페이지를 공개하기 전에 한 번만 돌려 놓으면, 나중에 속도가 느리다는 말을 들었을 때 원인을 찾는 시간이 크게 줄어듭니다.
