웹사이트 이미지 최적화 — LCP를 늦추는 큰 이미지 줄이기 - Tooly 가이드

2026. 05. 17

웹사이트 이미지 최적화 — LCP를 늦추는 큰 이미지 줄이기

웹사이트 첫 화면의 큰 이미지가 LCP와 모바일 속도에 미치는 영향을 설명합니다. 이미지 크기, 형식, lazy loading, 썸네일 생성까지 운영자가 먼저 점검할 항목을 정리했습니다.

홈페이지 첫 화면에 3MB짜리 배너 이미지를 올리면 서버가 빨라도 방문자는 느리다고 느낍니다. 이미지 최적화는 디자인 문제가 아니라 속도와 검색 품질 문제입니다.

이미지 압축 도구 바로 사용하기 →

Core Web Vitals(구글이 웹페이지 사용 경험을 재는 지표 묶음)에서 LCP는 화면에서 가장 큰 주요 콘텐츠가 보이기까지 걸리는 시간을 봅니다. 구글 기준에서 좋은 LCP는 보통 2.5초 이하로 알려져 있습니다. 첫 화면의 큰 이미지가 늦게 내려오면 LCP가 바로 나빠질 수 있습니다.

내 사이트의 LCP가 궁금하다면 구글 PageSpeed Insights(pagespeed.web.dev)에 주소를 넣어 보세요. 무료이고, 어떤 이미지가 LCP 요소인지도 짚어 줍니다.

먼저 볼 이미지

모든 이미지를 동시에 고칠 필요는 없습니다. 영향이 큰 순서로 봅니다.

  1. 모바일 첫 화면에 보이는 대표 이미지
  2. 상품 상세 상단 이미지
  3. 블로그 썸네일 목록
  4. 본문 중간의 큰 사진
  5. 아이콘과 로고

특히 국내 쇼핑몰이나 예약 페이지는 모바일 유입이 많습니다. PC 화면에서만 확인하지 말고 휴대폰 네트워크에서 열어 봐야 합니다.

최적화 체크리스트

항목 권장 방향
표시 크기 실제 표시 영역보다 과하게 큰 원본 업로드 금지
형식 사진은 JPG/WebP, 투명 이미지는 PNG/SVG 검토
압축 글자와 제품 경계가 깨지지 않는 선에서 줄이기
lazy loading 첫 화면 아래 이미지는 지연 로딩
썸네일 목록용 이미지는 별도 작은 파일 생성

lazy loading(지연 로딩)은 화면에 보일 차례가 됐을 때에야 이미지를 내려받는 방식입니다. 첫 화면 아래에 있는 사진까지 처음부터 전부 받지 않으니 초기 로딩이 가벼워집니다.

300px 카드에 3000px 사진을 그대로 넣으면 브라우저가 줄여 보여 줄 뿐 다운로드 부담은 그대로입니다. 서버에서 썸네일을 만들거나 업로드 전에 크기를 줄이는 편이 좋습니다.

크기부터 줄이는 순서

압축보다 먼저 할 일이 픽셀 크기 줄이기입니다. 이미지 크기 조절 도구에서 이렇게 하면 됩니다.

  1. 점선 상자에 이미지를 끌어다 놓거나 클릭해 선택합니다. 업로드하면 가로(Width)·세로(Height) 입력칸에 원본 픽셀 값이 자동으로 채워집니다.
  2. 비율 유지(Maintain aspect ratio) 체크는 기본으로 켜져 있습니다. 이 상태에서 Width에 목표 폭만 입력하면 Height가 비율에 맞게 자동 계산됩니다.
  3. Resize & Download 버튼을 누르면 파일명 뒤에 새 크기가 붙은 파일(예: banner_1200x900.jpg)이 저장됩니다.

예를 들어 휴대폰으로 찍은 4000×3000 사진을 Width 1200으로 줄이면 Height는 900으로 자동 계산됩니다. 픽셀 수로는 1,200만 화소에서 108만 화소로, 약 11분의 1이 됩니다. 크기를 줄인 다음 이미지 압축 도구로 용량을 한 번 더 줄이면 순서가 완성됩니다.

WebP를 쓸 때 주의할 점

WebP는 대체로 용량 효율이 좋지만 모든 업무 흐름에서 항상 정답은 아닙니다. 편집 프로그램, 이메일 클라이언트, 구형 환경에서 호환성을 확인해야 합니다. 공개 웹페이지에서는 WebP를 쓰고, 원본 보관은 JPG나 PNG로 유지하는 식의 분리도 가능합니다. 변환이 필요하면 JPG → WebP 변환 도구를 쓰면 됩니다.

여기서 막히면

크기 조절 도구에서 Width를 바꿨는데 Height가 따라 움직여 당황할 수 있습니다. 비율 유지가 켜져 있어서 그렇습니다. 배너 규격처럼 가로세로를 따로 지정해야 한다면 체크를 끄면 되는데, 이 경우 사진이 늘어나거나 눌려 보일 수 있으니 결과를 꼭 확인하세요.

줄인 이미지를 올렸는데 화면에서 흐릿하다면 너무 작게 줄인 경우입니다. 요즘 휴대폰은 고밀도 화면이라, 표시 폭의 2배 정도 픽셀로 준비하면 선명함과 용량의 균형이 잡힙니다.

자주 묻는 질문

이미 올려 둔 이미지도 전부 다시 올려야 하나요? 전부 할 필요는 없습니다. PageSpeed Insights가 지적한 첫 화면 이미지부터 바꾸는 편이 효과 대비 수고가 적습니다.

압축과 크기 조절 중 뭘 먼저 하나요? 크기(픽셀)를 먼저 줄이고 그다음 압축합니다. 반대로 하면 큰 해상도가 그대로 남아 효과가 제한적입니다.

방향이 돌아간 사진은요? 이미지 회전 도구로 먼저 바로잡고 크기 조절과 압축을 진행하세요. 흑백 문서 이미지라면 이미지 흑백 변환 도구로 용량과 가독성을 함께 점검할 수 있습니다.

최적화는 한 번에 끝나는 작업이 아닙니다. 새 배너를 올릴 때마다 크기, 형식, LCP 영향을 확인하는 운영 습관이 필요합니다.

목록