웹사이트를 제작하고 직접 관리를 하다 보면 홈페이지 이미지 최적화라는 말을 들어 보셨을 거에요. 이는 적절한 크기의 이미지를 사용할 수 있어야 한다는 의미죠. 보통 처음 제작할 때는 빨랐던 페이지가 사진을 추가하면서 무거워지는 느낌이 든다면 당신의 홈페이지도 이미지 최적화가 필요한 경우라고 할 수 있습니다.
그렇다고 무조건 작게 압축하면 사진이 흐려지고 이미지 안의 글자를 읽기 어려워집니다.
홈페이지를 관리할 때 필요한 것은 실제 화면에서 충분히 선명하게 보이면서, 불필요한 용량은 줄이는 습관입니다. 이미지를 준비하고 등록하는 순서를 이 글에서 설명합니다.
홈페이지 이미지 최적화 사용할 크기 확인부터
사진을 올리기 전에는 어디에 사용할 이미지인지 먼저 확인해야 합니다. 화면 전체를 채우는 대표 이미지와 본문 사진, 작은 로고에 같은 크기의 파일을 사용할 필요는 없으니까요.
그리고 편집 화면에서 작게 표시했다고 파일 용량까지 줄어드는 것은 아닙니다. 실제로 어떤 크기의 이미지가 불러와지는지에 따라 방문자가 내려받는 용량이 달라지죠.
포토샵에서는 이미지 → 이미지 크기로 들어가 가로와 세로 단위를 픽셀로 확인합니다. 원본은 별도로 보관하고, 비율을 유지한 상태에서 사용할 크기로 줄이는데, 이때 고해상도 화면에서는 표시 너비보다 큰 이미지가 필요할 수 있으니, 크기를 줄인 뒤 실제 화면의 선명도를 함께 확인해야 합니다.
그렇다고 모든 이미지를 무조건 1,000픽셀이나 150KB 이하로 맞출 필요는 없습니다. 이미지가 들어갈 위치와 전달해야 할 정보에 맞춰 결정하는게 중요하죠.
해상도 300에서 72로 바꿀 때는 리샘플링을 함께 확인
이미지 설정에서 자주 보는 72ppi와 300ppi는 인쇄할 때 1인치 안에 배치하는 픽셀 수를 의미합니다. 300ppi는 인쇄용 작업에서 흔히 사용하고, 72ppi는 웹용 이미지 설정에서 자주 접하는 값이죠.
여기서 중요한 것은 해상도 숫자를 바꿀 때 실제 픽셀 수까지 변경되는지입니다.
- 리샘플링을 끄고 300을 72로 변경하면 픽셀 수는 그대로이고 인쇄 크기만 달라집니다.
- 리샘플링을 켜고 인쇄 크기를 유지하면서 300을 72로 낮추면 픽셀 수가 줄어 파일 용량도 감소합니다.
즉, 해상도를 낮춘 뒤 파일이 가벼워졌다면 픽셀 수가 함께 줄었는지 확인해야 합니다. 그렇다고 홈페이지에서 반드시 72ppi를 사용해야 하는 것은 아니며, 같은 픽셀 크기의 이미지는 72ppi와 300ppi라는 설정만으로 화면상 선명도가 달라지지 않습니다.
웹용 이미지를 준비할 때는 리샘플링을 켜고 필요한 가로/세로 픽셀 크기를 직접 지정하는 방식이 이해하기 쉽습니다. 설정 숫자보다 최종 픽셀 크기와 저장된 용량을 확인하는 것이죠.
크기를 줄인 이미지를 WebP로 저장해 비교하세요
본사에서 기존에 안내했던 이미지 용량 줄이기의 핵심은 WebP 활용입니다. JPG나 PNG 이미지를 WebP로 변환하면 화질을 유지하면서 용량을 줄일 수 있는 방법이죠. 투명 배경도 지원하므로 배경 없는 이미지에도 활용할 수 있어 활용도가 높습니다.
포토샵에서는 다음 순서로 저장합니다.
- 사용할 크기로 조절한 이미지를 준비합니다.
- 파일 → 사본 저장에서 WebP 형식을 선택합니다.
- 압축 방식과 품질을 설정해 별도 파일로 저장합니다.
- 원본과 비교해 용량, 글자 가장자리, 색상과 세부 표현을 확인합니다.
WebP 항목이 보이지 않는다면 문서가 RGB 색상과 8비트 모드인지 확인하면 됩니다.
사진은 손실 압축으로 용량을 줄여볼 수 있지만, 작은 글자나 선이 많은 화면 캡처는 압축 흔적이 눈에 띌 수 있습니다. 이런 이미지는 품질을 높이거나 무손실 방식과 비교하는 게 좋습니다.
또한 WebP라고 항상 더 작은 파일이 되는 것은 아닙니다. 같은 크기에서 실제 용량과 화질을 비교한 뒤 사용할 파일을 선택하세요.
새 이미지와 이미 등록된 이미지는 관리 방법을 나누세요
현재 웹사이트가 느려진 현상 때문에 관련 글을 보고 있다면 앞으로 올릴 이미지는 크기 조절과 변환을 마친 뒤 등록하는 것이 좋습니다. 원본 사진은 따로 보관하고, 홈페이지에는 웹용으로 준비한 파일을 올리는 것이죠.
또한 여러분이 워드프레스를 기반으로 한 홈페이지를 사용하고 이미 등록된 이미지가 많다면 WebP 일괄 변환을 지원하는 Converter for Media를 활용할 수 있습니다.
다만 플러그인이 설치되어 있다는 것과 실제 방문자에게 가벼운 이미지가 제공되는 것은 별개입니다. 변환 완료 여부와 실제 페이지의 표시 상태까지 확인해야 합니다.
기존 파일을 직접 바꾸는 경우에는 연결된 주소도 주의해야 합니다. JPG 파일을 삭제하고 WebP를 새로 올리는 것만으로 모든 페이지의 이미지가 자동 교체되지는 않기 때문인데요. 기존 주소를 유지하면서 파일을 바꾸려면 홈페이지 이미지/PDF 교체 기존 링크 유지하는 방법을 참고해 주세요.
모바일 화면과 실제 파일 용량 확인을 통한 홈페이지 이미지 최적화
이미지를 등록했다면 관리자 편집 화면에서만 확인하지 말고 실제 페이지를 열어보세요. 컴퓨터와 휴대전화에서 각각 다음 내용을 점검하면 됩니다.
- 사진의 중요한 부분이 잘리지 않는지
- 이미지 안의 글자와 로고가 선명한지
- 투명 배경과 색상이 의도대로 표시되는지
- 작은 화면에 불필요하게 큰 원본이 불러와지지 않는지
- 교체한 이미지 대신 이전 파일이 남아 보이지 않는지
이전 이미지가 계속 보인다면 브라우저와 사이트 캐시를 확인해 주세요. 실제 전송 용량까지 확인하려면 브라우저 개발자 도구의 Network에서 이미지 요청을 살펴볼 수 있습니다.
홈페이지 이미지 최적화는 한 번 설정하고 끝나는 작업이 아닙니다. 새 사진을 올릴 때마다 크기 조절, 저장 형식 선택, 화질 비교, 실제 화면 확인을 이어가야 하죠.
오늘 소개한 순서를 홈페이지 관리 습관으로 만들어두면 콘텐츠가 늘어나도 불필요하게 무거운 이미지가 쌓이는 것을 줄일 수 있으니 참고해 보세요.
