웹페이지가 느릴 때, 이미지 용량부터 줄이는 방법

웹페이지가 느리게 열린다면 가장 먼저 이미지 용량을 확인해 보는 것이 좋습니다. 많은 웹페이지에서 이미지가 전체 용량의 큰 부분을 차지하고, 카메라로 찍은 원본 사진을 그대로 올리면 한 장에 수 메가바이트가 넘기도 하기 때문입니다. 화면에 맞는 크기로 줄이고, 알맞은 형식으로 압축하고, 필요할 때만 불러오게 하면 같은 디자인으로도 페이지가 훨씬 빨라집니다.

왜 이미지가 속도를 좌우하나요?

웹페이지를 열면 브라우저는 글자와 함께 모든 이미지를 내려받아야 합니다. 이미지 용량이 크면 내려받는 시간이 길어지고, 특히 모바일 데이터 환경에서는 차이가 크게 느껴집니다. 페이지가 늦게 열리면 방문자가 기다리지 않고 떠나기 쉽고, 검색엔진도 페이지 속도를 사용자 경험의 한 요소로 봅니다. 그래서 이미지 최적화는 디자인과 성능, 검색 노출을 함께 좋게 만드는 작업입니다.

방법	효과
표시 크기에 맞게 줄이기	불필요한 픽셀 제거
알맞은 형식 고르기	같은 화질에 더 작은 용량
압축 품질 조정	눈에 띄지 않는 정보 제거
지연 로딩	보이는 이미지만 먼저 불러옴
크기 지정	화면 흔들림 방지

크기는 어떻게 맞추나요?

화면에 가로 800픽셀로 표시되는 이미지라면, 4,000픽셀짜리 원본을 올릴 필요가 없습니다. 고해상도 화면을 고려해도 표시 크기의 두 배 정도면 충분한 경우가 많습니다. 같은 이미지를 여러 크기로 만들어 두고, 화면 크기에 맞는 것을 골라 보여 주는 반응형 이미지 방식을 쓰면 모바일에서는 작은 이미지를, 큰 모니터에서는 큰 이미지를 불러올 수 있습니다.

어떤 형식으로 저장하나요?

사진은 JPG나 WebP, AVIF 같은 형식이 용량 대비 화질이 좋습니다. WebP와 AVIF는 같은 화질에서 JPG보다 용량이 작은 경우가 많아 최근 많이 쓰입니다. 투명한 배경이 필요한 이미지는 PNG나 WebP를, 로고와 아이콘처럼 단순한 도형은 SVG를 쓰면 크기를 키워도 깨지지 않고 용량도 작습니다. 압축 품질은 너무 낮추면 얼룩이 생기니, 화질을 눈으로 확인하며 적당한 값을 찾습니다.

지연 로딩은 무엇인가요?

지연 로딩은 화면에 보이지 않는 아래쪽 이미지를 처음부터 불러오지 않고, 사용자가 스크롤해서 가까워질 때 불러오는 방식입니다. 이렇게 하면 첫 화면이 훨씬 빨리 열립니다. 다만 첫 화면에 바로 보이는 큰 이미지까지 지연 로딩을 걸면 오히려 늦게 보일 수 있으니, 첫 화면 이미지는 바로 불러오도록 설정합니다.

화면이 흔들리는 문제는요?

이미지가 늦게 불러와지면서 그 아래 글자가 갑자기 밀려 내려가는 현상이 생기기도 합니다. 글을 읽던 사용자가 위치를 놓치거나 엉뚱한 버튼을 누르게 됩니다. 이미지의 가로세로 크기나 비율을 미리 지정해 두면 브라우저가 자리를 먼저 확보해 이런 흔들림을 막을 수 있습니다. 이미지 대체 텍스트도 함께 넣어 두면 접근성과 검색 노출에 도움이 됩니다. 웹 제작 사례는 에서 볼 수 있습니다.

자주 묻는 질문

이미지 용량은 얼마가 적당한가요?

정해진 기준은 없지만, 일반적인 본문 이미지는 수백 킬로바이트 이하로 줄이는 경우가 많습니다.

WebP는 모든 브라우저에서 보이나요?

최근 주요 브라우저는 대부분 지원합니다. 오래된 환경을 고려한다면 대체 형식을 함께 준비하십시오.

압축하면 화질이 많이 떨어지나요?

적당한 품질로 압축하면 눈으로는 거의 차이를 느끼기 어렵습니다.