한 장의 사진은 천 마디 말보다 더 많은 이야기를 전달합니다. 오늘날 미디어, 전자상거래, 여행 웹사이트 등 인터넷상 약 64%의 웹사이트가 이미지를 활용하고 있습니다. 인간의 상당 부분 뇌 기능이 시각 정보 처리에 할애되어 있다는 점에서, 웹사이트들은 잘 알려진 이 사실을 적극적으로 사용해 방문자의 주목을 끌고 있습니다. 하지만 저품질의 부적절한 이미지를 사용하는 웹사이트는 방문자를 설득하기 어렵습니다.
페이지 로딩에 3초 이상 걸리는 웹사이트는 사용자 이탈률이 높아지고 구글 검색 순위도 낮아집니다. 따라서 방문자 수나 검색 노출이 부진하다면 이미지 최적화부터 점검해야 합니다. 아래에서 소개하는 팁들을 참고해 보세요.
구체적인 방법을 살펴보기에 앞서, 이미지 최적화가 무엇인지 그리고 왜 중요한지 먼저 짚어보겠습니다.
이미지 최적화란 무엇인가?
이미지 최적화는 화질 저하 없이 파일 용량을 줄이는 과정입니다. 즉, 가능한 한 가장 작은 크기를 유지하면서 올바른 포맷·크기·해상도의 고품질 이미지를 확보하는 것을 의미합니다. 압축, 리사이징, 캐싱 등 다양한 방식으로 이미지를 최적화하면 웹사이트 성능이 개선되고 페이지 로딩 속도가 빨라집니다.
왜 이미지 최적화가 중요한가?
사용자는 로딩에 3초 이상 걸리는 웹사이트를 쉽게 이탈하며, 이는 이탈률(bounce rate)을 높이고 결국 전환율(conversion rate)에도 부정적인 영향을 미칩니다. 반면 이미지 최적화를 통해 페이지 로딩 속도를 개선하면 검색 엔진 최적화(SEO) 순위 향상과 사용자 경험 강화라는 효과도 함께 얻을 수 있습니다.
페이지 로딩 속도란 웹페이지가 완전히 로드되는 데 걸리는 시간을 말합니다. 로딩 시간이 2초 미만인 웹사이트일수록 방문자에게 사랑받으며, 검색 순위에서도 유리하게 작용합니다. 즉, 이미지 최적화는 단순히 속도 문제를 넘어 SEO와 전환율과 직결되는 핵심 요소입니다.
그럼 지금부터 웹페이지 로딩 속도를 높이는 이미지 최적화 방법을 하나씩 알아보겠습니다.
1. 올바른 색상 모드(RGB)로 저장하기
컴퓨터에서 이미지를 표현할 때 주로 사용되는 색상 모드는 RGB와 CMYK 두 가지입니다. RGB는 빨강(Red), 초록(Green), 파랑(Blue)을, CMYK는 청록(Cyan), 자홍(Magenta), 노랑(Yellow), 검정(Black)을 의미합니다. RGB는 카메라와 컴퓨터의 표준 색 공간이며, CMYK는 인쇄용으로 사용됩니다.
CMYK 이미지를 웹에 사용하면 페이지 로딩 속도가 느려질 뿐 아니라 RGB 대비 선명함과 생동감도 떨어집니다. 따라서 방문자의 시선을 끌고 로딩 속도를 높이려면 반드시 RGB 색상 모드의 이미지를 사용해야 합니다.
CMYK 이미지를 RGB로 변환할 때는 어도비 포토샵(Adobe Photoshop)을 활용할 수 있습니다. 색상 프로필을 변경한 후에는 원본과 구분하기 쉽도록 다른 이름으로 저장해 두는 것이 좋습니다.
2. 이미지 파일 용량 압축하기
웹에서는 2MB를 초과하는 이미지 파일을 사용하지 않는 것이 좋습니다. 과도한 용량은 페이지 로딩 속도를 늦추기 때문입니다. 파일 용량은 2MB(2048KB) 이내로 유지하는 것이 바람직합니다.
또한 웹용 이미지는 픽셀이 깨져 보이는 '픽셀레이션(pixelation)' 현상이 나타나면 안 됩니다. 즉, 이미지는 또렷하고 품질이 일정해야 합니다. 이미지 품질은 압축 설정값과 최종 파일 용량에 좌우되는데, 적절한 압축 설정을 적용하면 작은 용량과 좋은 화질을 동시에 얻을 수 있습니다.
일반적으로 압축률 70~80% 수준으로 저장한 이미지는 픽셀 깨짐이 거의 발생하지 않습니다. 이를 위해서는 이미지 압축 도구를 활용하면 편리합니다.
3. 올바른 파일 형식으로 저장하기
그래픽과 이미지를 저장할 수 있는 대표적인 형식은 JPG, PNG, GIF, SVG 네 가지입니다. 각 형식마다 장단점이 있으므로, 이미지가 래스터(raster) 방식인지 벡터(vector) 방식인지에 따라 적합한 형식을 골라 저장해야 합니다.
래스터 이미지는 정해진 수의 픽셀로 구성되며 스캐너나 카메라처럼 픽셀 기반 프로그램으로 만들어집니다. 확대할수록 화질이 저하되며, JPG·PNG·GIF 형식이 가장 적합합니다.
벡터 그래픽은 벡터 소프트웨어로 제작되며, 화질 손실 없이 자유롭게 확대·축소할 수 있습니다. SVG와 GIF가 대표적인 형식이지만, JPG나 PNG로도 저장은 가능합니다. 다만 이 경우 그래픽을 무한대로 확장할 수 있는 장점이 사라집니다.
JPG
- 장점: 최소한의 파일 용량, 우수한 고화질 표현, 웹 및 최신 기기와의 호환성
- 단점: 압축 시 화질 저하, 투명 배경 미지원
- 활용 시점: 움직임이 없는 고화질 이미지가 필요할 때 적합하지만, 컬러 배경 위에는 사용하지 않는 것이 좋습니다.
PNG
PNG는 JPG보다 활용도가 높은 래스터 형식으로, 1,600만 가지 이상의 색상과 알파 채널(투명 배경)을 지원합니다.
- 장점: 투명 배경 지원으로 컬러 배경 위에 이미지를 겹쳐 사용할 수 있음, 화질 손실 없이 압축 가능
- 단점: JPG보다 파일 용량이 큼, 애니메이션 미지원
- 활용 시점: 흰색이 아닌 배경의 그래픽, 텍스트, 날카로운 윤곽선, 로고, 아이콘 등의 디자인에 적합합니다.
GIF
GIF 역시 래스터 형식으로, 여러 이미지를 연속으로 배치해 움직임을 만들어내는 애니메이션 표현이 가능합니다.
- 장점: 애니메이션 메시지와 이미지 제작 가능, 투명 배경 지원
- 단점: 색상 수에 따라 용량과 화질이 좌우됨(색상이 많으면 선명하지만 용량 증가, 색상이 적으면 화질 저하), 256색까지만 표현 가능
- 활용 시점: 하나의 그래픽 안에서 여러 이미지를 유연하고 재미있게 보여줄 때 유용합니다. 단, 색상이 많은 그래픽은 파일 용량이 커질 수 있습니다.
SVG
JPG·PNG·GIF와 달리 SVG는 벡터 형식입니다. 웹에서 선명한 그래픽 객체를 자유롭게 다룰 수 있으며, 잉크스케이프(Inkscape), 어도비 일러스트레이터(Adobe Illustrator), 스케치(Sketch) 같은 프로그램으로 제작·편집할 수 있습니다.
- 장점: 작은 파일 용량, 화질 손실 없는 리사이징, 개발자 친화적, 일러스트레이터 등으로 벡터 이미지 편집 가능, 애니메이션 지원, 마이크로소프트 오피스 그래픽 지원
- 단점: 복잡한 이미지의 경우 코드 기반 특성상 파일이 무거워질 수 있으며, 사실적인 사진 표현에는 부적합
- 활용 시점: 확대해도 화질이 유지되므로 웹의 그래픽, 로고, 아이콘, 일러스트에 적합합니다. 또한 고밀도 디스플레이(스마트폰 등)에서도 깔끔하게 표현되므로 모바일 환경에도 잘 어울립니다.
4. 스마트폰 디스플레이용 다중 해상도 내보내기
스마트폰이 보편화되면서 사용자는 모든 것을 모바일 기기에서 확인하길 원합니다. 그런데 스마트폰 디스플레이는 PC·웹 표준인 72PPI가 아닌 200PPI 이상의 고밀도 화면을 사용합니다.
두 종류의 PPI를 모두 지원하려면 어도비 일러스트레이터나 포토샵을 활용해 2배(200%), 3배(300%) 스케일의 이미지를 함께 내보낼 수 있습니다. 이렇게 하면 원본 이미지 외에 고해상도 버전도 확보할 수 있습니다.
5. 작은 이미지는 115% 확대하기
작은 크기의 래스터 이미지를 사용할 때는 115% 정도로 확대해 두면 픽셀 깨짐을 줄일 수 있습니다. 이때 어도비 포토샵을 활용하면 편리합니다.
위에서 소개한 방법들을 실천하면 선명하고 집중도 높은 이미지를 확보할 수 있습니다. 최적화된 이미지는 방문자의 관심을 끌고 페이지에 머무는 시간을 늘려 줄 뿐 아니라, 웹페이지를 더 아름답게 만들면서도 로딩 시간까지 단축시켜 줍니다.
이미지 최적화는 웹뿐 아니라 이미지를 저장하고 매력적으로 관리하는 데에도 도움이 됩니다. 용량이 큰 이미지는 많은 대역폭을 소모해 사용자에게 불쾌감을 줄 수 있으므로, 반드시 최적화된 이미지를 사용하는 습관을 들이는 것이 좋습니다.