사이트가 느리다는 진단을 받으면, 원인을 파고들수록 이미지에 닿는 경우가 많습니다. 페이지 전체 무게에서 이미지가 차지하는 비중이 크기 때문입니다. 특히 스마트폰으로 찍은 사진을 원본 그대로 올리면 한 장에 수 MB에 이르고, 그런 이미지가 몇 장만 있어도 페이지가 무거워집니다. 방문자는 그 무게를 로딩 대기로 체감하고, 느리면 그냥 떠납니다. 다행히 이미지 최적화는 복잡한 기술이 아니라 순서의 문제에 가깝습니다. 이 글은 크기 줄이기부터 압축·포맷·지연 로딩·크기 지정·대체 텍스트까지, 도구 없이도 따라 할 수 있는 이미지 최적화 순서를 정리합니다.
이미지가 가장 흔한 속도 범인
웹페이지의 무게는 글자보다 이미지·스크립트가 좌우합니다. 그중에서도 이미지는 손대기 쉬우면서 효과가 큰 부분입니다. 문제는 많은 사이트가 이미지를 "일단 보이기만 하면 된다"고 여겨, 찍은 그대로 올린다는 점입니다.
스마트폰 사진은 인쇄해도 될 만큼 큰 해상도로 저장됩니다. 그걸 화면 한 귀퉁이에 작게 보여주면서 원본 용량을 그대로 내려받게 하는 셈이니 낭비가 큽니다. 이미지 무게는 로딩 속도, 특히 가장 큰 콘텐츠가 뜨는 시간(LCP)에 직접 영향을 줍니다. 속도 개선을 어디서 시작할지 막막하다면, 이미지부터 보는 게 대개 가성비가 좋습니다. 속도 지표 전반의 우선순위는 Core Web Vitals 우선순위에서 다뤘습니다.
① 크기(치수)부터 줄이기
가장 먼저 할 일은 이미지의 실제 픽셀 크기를 줄이는 것입니다. 화면에서 가로 500픽셀로 보이는 자리에 4000픽셀짜리 원본을 올리는 경우가 흔한데, 이건 그냥 낭비입니다. 실제로 표시되는 크기에 맞춰 리사이즈합니다.
고화질 화면(레티나 등)을 감안해도 표시 크기의 두 배 정도면 충분합니다. 예를 들어 화면에 600픽셀로 보인다면 1200픽셀 정도로 저장하면 됩니다. 이 한 단계만으로도 용량이 크게 줄어드는 경우가 많습니다. 압축보다 먼저, 치수부터 줄이는 게 순서입니다.
② 압축으로 용량 줄이기
치수를 맞췄으면 이제 압축입니다. 같은 크기의 이미지라도 압축을 통해 용량을 더 줄일 수 있습니다. 사진의 경우 품질을 80% 안팎으로 낮춰도 눈으로는 차이를 느끼기 어려운데, 용량은 눈에 띄게 줄어듭니다.
도구는 무료로도 충분합니다. Squoosh 같은 웹 도구에 이미지를 올려 품질을 조절해 보며 저장하거나, 워드프레스 같은 CMS라면 이미지 최적화 플러그인이 자동으로 처리해 주기도 합니다. 중요한 건 "보이는 품질은 지키면서 용량만 덜어내는" 지점을 찾는 것입니다.
③ 포맷 — webp를 우선 고려
이미지 포맷도 용량에 영향을 줍니다. 오래 쓰인 JPEG·PNG보다 webp가 같은 품질에서 더 가벼운 경우가 많습니다. 요즘 브라우저는 대부분 webp를 지원하므로, 사진류는 webp로 저장하는 걸 우선 고려할 만합니다.
다만 포맷은 용도에 맞게 씁니다. 색이 많은 사진은 webp나 JPEG가 어울리고, 로고·아이콘처럼 선명한 경계와 투명 배경이 필요한 이미지는 PNG나 SVG가 낫습니다. 이 사이트도 로고는 벡터·webp를 함께 쓰고 있습니다. 무조건 한 포맷이 아니라, 이미지 성격에 맞추는 게 핵심입니다.
④ 지연 로딩으로 첫 화면 가볍게
페이지에 이미지가 많아도, 처음부터 전부 내려받을 필요는 없습니다. 화면 밖에 있는 이미지는 사용자가 스크롤해 가까워질 때 불러오면 됩니다. 이것이 지연 로딩(lazy loading)입니다. 이미지 태그에 loading="lazy"를 지정하는 방식이 일반적입니다.
덕분에 첫 화면 로딩이 가벼워집니다. 단, 예외가 있습니다. 상단의 대표 이미지처럼 처음부터 보이는 이미지는 지연 로딩 대상에서 빼고 즉시 불러오는 게 낫습니다. 첫 화면의 핵심 이미지까지 미루면 오히려 LCP가 나빠질 수 있기 때문입니다. "보이는 건 즉시, 아래 있는 건 나중에"가 기준입니다.
⑤ 크기를 지정해 화면 밀림 막기
이미지에 가로·세로 크기를 지정하지 않으면, 이미지가 늦게 로딩되며 아래 내용을 밀어내는 화면 밀림(CLS)이 생깁니다. 글을 읽거나 버튼을 누르려던 순간 화면이 튀는 그 현상입니다.
대응은 간단합니다. 이미지에 width와 height를 지정해 브라우저가 로딩 전부터 들어갈 자리를 확보하게 하는 것입니다. 그러면 이미지가 나중에 떠도 주변이 밀리지 않습니다. 속도만이 아니라 이 시각적 안정성도 사용자 경험의 일부라, 크기 지정은 습관으로 두는 게 좋습니다.
⑥ alt 텍스트 — 접근성과 검색 둘 다
마지막은 눈에 안 보이지만 중요한 대체 텍스트(alt)입니다. alt는 이미지가 무엇인지 설명하는 텍스트로, 두 가지 역할을 합니다. 화면을 못 보는 사용자의 스크린 리더가 이 설명을 읽어주고, 검색엔진도 이 텍스트로 이미지의 내용과 맥락을 파악합니다. 이미지 검색 유입의 실마리가 되기도 합니다.
쓰는 요령은 단순합니다. 이미지에 실제로 담긴 것을 자연스럽게 설명하면 됩니다. 키워드를 억지로 욱여넣으면 스크린 리더 사용자에게도 어색하고 검색엔진에도 좋지 않습니다. 반대로 순수하게 장식용인 이미지는 alt를 비워 두어 불필요한 낭독을 피합니다. 정확한 설명 하나가 접근성과 검색 모두를 챙깁니다.