온라인 이미지 압축 방법 총정리 - 설치 없이 브라우저에서 용량 90% 줄이는 무료 도구와 설정값
프로그램 설치 없이 브라우저에서 이미지 용량을 줄이는 방법을 정리했습니다. 손실 압축과 무손실 압축의 차이, 포맷별 선택 기준, 화질을 지키는 권장 설정값까지 한 번에 확인하세요.
블로그 글이 유난히 느리게 뜨거나, 사이트에 파일을 올리다가 용량 초과 안내를 받아본 경험이 있으실 겁니다. 원인은 대부분 이미지입니다. 스마트폰으로 찍은 사진 한 장은 보통 3MB에서 8MB 정도인데, 웹 화면에 표시하는 데 실제로 필요한 용량은 그 10분의 1이면 충분합니다. 온라인 이미지 압축 방법만 제대로 알아두면 프로그램 설치 없이 브라우저에서 몇 초 만에 용량을 줄일 수 있습니다. 오늘은 그 원리와 실전 순서를 정리합니다.
이미지 압축이 필요한 이유
이미지 압축은 단순히 저장 공간을 아끼는 작업이 아닙니다. 구글은 페이지 로딩 속도를 검색 순위에 반영하는데, 핵심 지표인 LCP(가장 큰 콘텐츠가 표시되는 시간)를 늦추는 주범이 바로 큰 이미지입니다. 블로그나 쇼핑몰을 운영한다면 이미지 용량이 곧 방문자 이탈률과 직결됩니다.
- 로딩 속도: 이미지가 페이지 전체 용량의 절반 이상을 차지하는 경우가 많습니다
- 업로드 제한: 게시판, 지원서, 민원 사이트는 보통 1MB에서 5MB 사이의 첨부 제한이 있습니다
- 데이터 절약: 모바일 방문자의 데이터 사용량을 줄여 체감 속도가 좋아집니다
- 저장 공간: 클라우드나 서버 용량 비용을 아낄 수 있습니다
손실 압축과 무손실 압축의 차이
압축 방식은 크게 두 가지입니다. 손실 압축은 사람 눈이 잘 구분하지 못하는 색상과 디테일 정보를 버리면서 용량을 크게 줄입니다. JPEG와 WebP가 대표적이고, 사진에 적합합니다. 무손실 압축은 원본 데이터를 그대로 보존하면서 저장 방식만 효율화합니다. PNG가 대표적이며, 로고나 스크린샷처럼 선명한 경계가 중요한 이미지에 적합합니다.
어느 쪽을 선택해야 할까
일반적인 사진이라면 고민할 필요 없이 손실 압축입니다. 품질 80% 수준의 JPEG는 원본과 눈으로 구분하기 어려운데 용량은 절반 이하로 떨어지는 경우가 많습니다. 반대로 글자가 들어간 스크린샷을 손실 압축하면 글자 주변에 얼룩 같은 노이즈가 생기므로 PNG를 유지하는 편이 낫습니다.
압축의 핵심은 용량과 화질의 교환이 아니라, 애초에 필요 없던 데이터를 버리는 것입니다. 웹에 올릴 이미지의 원본 해상도가 4000px이라면, 화질 저하 없이도 이미 줄일 여지가 충분하다는 뜻입니다.
이미지 포맷별 압축 특징 비교
같은 사진이라도 어떤 포맷으로 저장하느냐에 따라 용량이 크게 달라집니다. 주요 포맷 네 가지를 비교하면 다음과 같습니다.
| 포맷 | 압축 방식 | 적합한 용도 | 특징 |
|---|---|---|---|
| JPEG | 손실 | 사진, 풍경, 인물 | 호환성이 가장 좋음. 투명 배경 불가 |
| PNG | 무손실 | 로고, 스크린샷, 아이콘 | 투명 배경 지원. 사진 저장 시 용량이 큼 |
| WebP | 손실/무손실 모두 | 웹용 전반 | 같은 화질 기준 JPEG보다 대체로 25~30% 작음 |
| AVIF | 손실/무손실 모두 | 웹용 고효율 | 압축률이 가장 높지만 일부 구형 환경에서 미지원 |
2026년 현재 주요 브라우저는 모두 WebP를 지원하므로, 웹에 올리는 이미지는 WebP로 변환하는 것이 가장 무난한 선택입니다.
온라인 이미지 압축 방법 3단계
설치형 프로그램 없이도 브라우저에서 바로 압축할 수 있습니다. 순서는 세 단계입니다.
1단계: 해상도부터 줄이기
압축보다 먼저 할 일은 리사이즈입니다. 스마트폰 사진의 가로 폭은 보통 4000px 안팎인데, 블로그 본문에 표시되는 폭은 800px 내외입니다. 해상도만 줄여도 용량이 크게 떨어집니다. 브라우저에서 바로 쓸 수 있는 이미지 리사이저 같은 도구를 이용하면 픽셀 크기 조절과 용량 축소를 한 번에 처리할 수 있어 편리합니다.
2단계: 포맷 변환과 품질 조절
리사이즈한 이미지를 WebP나 JPEG로 저장하면서 품질 값을 조절합니다. 구글이 만든 Squoosh는 압축 전후 화질을 화면을 반으로 나눠 비교하면서 품질 슬라이더를 조절할 수 있어 초보자에게 특히 유용합니다. PNG 용량을 줄여야 한다면 TinyPNG처럼 색상 수를 최적화해 주는 서비스가 효과적입니다.
3단계: 결과 확인 후 다운로드
압축된 이미지를 원본 크기 그대로 띄워 놓고 글자 경계, 피부 톤, 하늘처럼 그라데이션이 있는 영역을 확인합니다. 뭉개짐이 보이면 품질 값을 5~10 정도 올려서 다시 저장하면 됩니다.
화질을 지키는 권장 설정값
어떤 값으로 저장해야 할지 막막하다면 아래 기준에서 시작해 보세요. 대부분의 웹 용도에서 무난하게 통하는 설정입니다.
- 블로그 본문 사진: 가로 1200px, JPEG 또는 WebP 품질 75~85
- 썸네일: 가로 600~800px, 품질 70~80
- 배경 이미지: 가로 1920px, 품질 70~75
- 스크린샷: 원본 해상도 유지, PNG 또는 무손실 WebP
품질 값을 60 아래로 내리면 대부분의 사진에서 열화가 눈에 띄기 시작합니다. 용량이 아직 크다면 품질을 더 내리기보다 해상도를 한 단계 줄이는 쪽이 결과물이 훨씬 깔끔합니다.
압축 후 반드시 확인할 것
압축 자체보다 중요한 것이 마무리 점검입니다. 발행 전에 아래 항목을 확인하세요.
- 화질 확인: 100% 크기로 띄워 글자와 경계선이 뭉개지지 않았는지 확인
- 파일명 정리: IMG_3021.jpg 대신 내용을 설명하는 파일명으로 변경하면 검색 노출에도 유리
- 원본 보관: 압축본은 웹용, 원본은 따로 백업. 손실 압축은 되돌릴 수 없습니다
- 대체 텍스트: 블로그라면 이미지에 alt 텍스트를 입력해 접근성과 SEO를 함께 챙기기
블로그 운영자라면 이미지 최적화와 함께 본문 분량 관리도 발행 전 루틴으로 만들어 두면 좋습니다. 포털 검색은 지나치게 짧은 글을 선호하지 않기 때문에, 글자수 세기 도구로 본문 길이를 확인하고 이미지 용량을 점검하는 것을 발행 전 마지막 단계로 두는 방식입니다.
오늘 할 일은 두 가지입니다. 지금 운영 중인 블로그나 사이트에서 가장 많이 보는 페이지 하나를 열어 이미지 용량을 확인해 보세요. 그리고 1MB가 넘는 이미지가 있다면 가로 1200px, 품질 80 기준으로 다시 저장해 교체해 보세요. 페이지가 뜨는 속도부터 달라지는 것을 바로 체감하실 수 있습니다.
