이미지는 훌륭한 웹사이트를 만드는 데 있어 가장 중요한 요소 중 하나입니다. 방문자의 시선을 사로잡고, 콘텐츠의 공유를 촉진하며, 제품 구매와 같은 행동을 유도하는 강력한 도구입니다.
하지만 고해상도 이미지나 용량이 큰 파일을 그대로 사용하면 웹사이트 속도가 느려지고 방문자에게 좋지 않은 사용자 경험을 안겨줄 수 있습니다. 다행히 요즘은 화질 저하 없이 이미지를 압축하고, 심지어 이 과정을 자동화해 주는 다양한 도구가 널리 보급되어 있기 때문에 느린 웹사이트를 방치할 명분은 전혀 없습니다.
이 글에서는 웹에서 사용할 이미지를 최적화하는 여러 가지 방법을 소개하고, 특히 워드프레스 사이트에 바로 적용할 수 있는 실전 팁을 정리했습니다.
올바른 파일 형식 선택하기
JPEG와 PNG는 웹에서 가장 널리 쓰이는 두 가지 이미지 형식입니다. JPEG는 색상이 풍부한 사진에 적합한 압축 형식이며, PNG는 텍스트가 포함된 이미지, 일러스트레이션, 로고, 스크린샷, 배경이 투명한 이미지에 훨씬 유리합니다. 또 하나 흔히 쓰이는 형식인 GIF는 색상 수가 적거나 단색 영역이 넓은 이미지에 적합하며, 오늘날에는 주로 움직이는 이미지(애니메이션)에 사용됩니다.
최근에는 WebP처럼 JPEG보다 뛰어난 압축률을 제공하는 차세대 형식도 각광받고 있으니 참고하시기 바랍니다. 대부분의 이미지 편집 프로그램은 여러 형식으로 저장할 수 있으므로, 용도에 맞는 형식을 선택하면 가장 선명한 결과물을 얻을 수 있고 사이트의 사용자 경험도 한층 향상됩니다.
적절한 크기와 해상도 사용하기
웹사이트에 이미지를 추가할 때는 신중해야 합니다. 모범적인 방법은 이미지가 실제 화면에 표시되는 것과 동일한 가로·세로 크기로 저장하고, 화질 저하가 없는 범위에서 최대한 작은 파일 용량을 유지하는 것입니다. 필요 이상으로 큰 원본 이미지를 축소해서 보여주는 것은 불필요한 대역폭 낭비로 이어집니다.
업로드 전 이미지 압축하기
서버에 올리기 전에 이미지를 압축해 주는 도구는 매우 다양합니다. 대표적으로 포토샵(Photoshop)에는 '웹 및 기기용으로 저장(Save for Web & Devices)' 기능이 있어 형식과 품질 설정을 조절하면서 실시간으로 파일 용량을 확인할 수 있습니다. 무료 오픈소스 편집 도구인 GIMP 역시 비슷한 기능을 제공합니다.
프로그램 설치 없이 사용할 수 있는 온라인 압축 서비스도 있습니다. Picresize, Kraken.io, TinyPNG 같은 사이트에 고해상도 이미지를 업로드하면 자동으로 최적화된 압축 파일을 내려받아 웹에서 바로 사용할 수 있습니다.
업로드 후 이미지 압축하기
이미 서버에 올라간 이미지를 최적화하려면 플러그인을 활용하는 것이 편리합니다. 가장 인기 있는 플러그인 중 하나인 WP Smush는 전용 서버를 통해 JPEG, PNG, GIF 파일을 개별적으로 또는 일괄 처리하여 최적화해 줍니다. 파일에서 메타데이터와 불필요한 색상 정보를 제거하는 방식으로 용량을 줄이며, 무료 버전은 1MB 이하 이미지에만 적용되지만 Pro 버전으로 업그레이드하면 최대 5MB까지 지원됩니다.
비슷한 기능을 가진 또 다른 훌륭한 플러그인으로 EWWW Image Optimizer가 있습니다. 이 플러그인은 이미지를 파일 용량이 가장 작게 나오는 형식으로 자동 변환해 주는 것이 특징입니다.
이 외에도 워드프레스 공식 플러그인 저장소에는 다양한 이미지 최적화 플러그인이 등록되어 있으니 직접 살펴보는 것도 좋습니다. 위의 두 가지는 실제로 사용해 본 결과 모두 안정적으로 잘 작동했으므로, 처음 시작하신다면 충분히 만족스러운 선택이 될 것입니다.
이미지 태그 올바르게 작성하기
이미지 크기를 조정하는 것만큼 중요한 것이 태그를 제대로 작성하는 것입니다. 먼저 alt(대체 텍스트) 속성을 반드시 입력하세요. 이미지가 로딩되지 않거나 스크린 리더를 사용하는 방문자에게 텍스트 기반 설명을 제공할 수 있으며, 검색 엔진이 사이트의 이미지를 더 잘 색인하도록 도와 상당한 검색 트래픽을 확보하는 데도 기여합니다.
필요한 곳에 캡션(이미지 설명 문구)을 추가하는 것도 방문자가 이미지를 이해하는 데 큰 도움이 됩니다. 설명이 포함된 제목 태그와 파일 이름 역시 같은 효과를 냅니다. 예를 들어 이미지를 'FXSCSUYE.jpg'처럼 의미 없는 이름으로 저장하는 대신, 주제와 사이트 성격에 맞는 키워드가 담긴 이름을 사용하세요. 이는 SEO 관점에서도 분명한 이점이 됩니다.
지연 로딩(Lazy Loading) 활용하기
지연 로딩은 사용자가 화면을 스크롤하여 해당 이미지가 보이는 영역에 도달했을 때에만 이미지를 불러오는 기술입니다. 첫 화면의 몇 장은 즉시 로드되지만 나머지는 사용자가 근처에 올 때까지 로딩을 미루는 방식입니다. 이 기능을 적용하면 사이트 운영자와 방문자 모두의 대역폭을 절약할 수 있고 페이지 로딩 속도도 눈에 띄게 개선됩니다. 워드프레스에서는 BJ Lazy Load 같은 플러그인으로 손쉽게 지연 로딩을 구현할 수 있습니다.
CDN(콘텐츠 전송 네트워크) 활용하기
콘텐츠 전송 네트워크(CDN)를 사용하면 서버 부하를 크게 줄이고 웹사이트 성능을 끌어올릴 수 있습니다. CDN은 요청한 사용자와 물리적으로 가장 가까운 서버에서 리소스를 전송해 줍니다. 예를 들어 베이징의 방문자가 이미지를 요청했는데 사용 중인 CDN이 서울과 시드니에 서버를 두고 있다면, 해당 이미지는 서울 서버에서 전송됩니다.
MaxCDN은 평판이 좋은 CDN 서비스 중 하나이며, CloudFlare, CDN.net 등 다른 대안도 여럿 있습니다. 트래픽 규모와 예산에 맞춰 적합한 서비스를 선택하시기 바랍니다.
마무리
웹용 이미지 최적화는 페이지 로딩 시간을 단축하고 전반적인 사용자 경험을 개선하는 가장 효과적인 방법 중 하나입니다. 위에서 소개한 팁들을 하나씩 적용해 보면 사이트 속도 변화를 체감하실 수 있을 것입니다. 여러분만의 이미지 최적화 노하우가 있다면 아래 댓글로 함께 나눠주세요.