이미지 압축 가이드: 품질을 잃지 않고 파일 크기를 줄입니다

나는 한 번 전체 오후를 보냈다 client's 사이트 내 React 코드의 렌더링 버그 때문에 느렸다. 구성 요소를 프로파일링,메모된 것,추격 재 렌더링. 실제 문제는 배경 영웅 이미지였습니다: 3,1 MB JPEG 는 80% 품질의 정확히 동일한 이미지가 480 KB 였을 때 100% 품질로 저장되었으며 동일하게 보였습니다. 나는 앱을 과도하게 설계하고 자산을 과소 생각했습니다. That's 하루를 낭비하는 매우 개발자 방법.

그 이후로 이미지 압축은 마지막이 아닌 내가 가장 먼저 확인하는 것이 었습니다. It & # 39;s 또한 가장 오해 - & quot;quality & quot 를 잃지 않고 압축; 역설처럼 취급됩니다,언제 정말 it & # 39;s 는 단지 어떤 레버가 데이터를 버리고 어떤 레버가 does & # 39;t 를 아는 문제입니다. 이 가이드는 Toolz.dev 를 배송하고 튜닝하는 동안 구축 된 내가 사용하는 정신 모델입니다 핵심 웹 바이탈 클라이언트 사이트에서: 압축이 실제로 작동하는 방식, 손실 대 무손실을 사용해야 하는 시기, 특정 품질 번호가 계속 승리하는 이유.

TL;DR: 사용 이미지 압축 웹 사진을 위한 질의 주위에 80%에 - that's 파일이 60–80%를 긴축하고 당신은 아직도 can't 가 정상적인 크기에 원본에서 그것을 떨어져 말할 수 있는 감미로운 반점을 압축하십시오 원본에서 (JPEG를 다시 압축하지 마십시오), 그리고 항상 크기 조정 압축하기 전에 치수를 표시하려면. 최대 절약을 위해, 변환 사진 웹P 첫째. 모든 것이 브라우저에서 실행됩니다 - 아무것도 업로드하지 않습니다.

What's 이미지를 압축할 때 실제로 발생합니까?

디지털 이미지는 각각 색상을 저장하는 픽셀의 격자입니다. That's 왜 원시 이미지가 엄청난가. 24 비트 색상의 1920×1080 이미지는:

1920 × 1080 × 3 bytes = 6,220,800 bytes ≈ 5.93 MB

한 장의 사진에 거의 6 메가바이트. 그 중 10 개가있는 페이지는 텍스트로드 한 줄 전에 60MB 의 다운로드가 될 것입니다. 압축은 생존 가능하게하기 위해 존재하며 근본적으로 다른 두 가지 방법 중 하나로 그렇게합니다.

무손실 압축 데이터에서 패턴을 찾아서 더 컴팩트하게 인코딩하며,아무것도 버리지 않습니다. 압축 해제된 이미지는 원본과 동일한 픽셀 단위입니다. 기법은 우아합니다: 런-렝스 인코딩은 "red,red, red,red, red" into "5× red"; 사전 코딩 (PNG's 코어의 Deflate 알고리즘) 은 반복되는 패턴을 짧은 코드로 대체합니다; 예측 필터링은 각 픽셀을 예측 값과의 차이로 저장하므로 부드러운 그라데이션은 아름답게 압축되는 작은 숫자의 긴 실행이 됩니다. PNG,무손실 WebP,무손실 AVIF 는 모두 이런 방식으로 작동합니다.

손실 압축 데이터를 버림으로써 훨씬 더 큰 절감 효과를 얻습니다. 시각 시스템은 눈치 채지 못할 것입니다. 그리고 it's 는 &quot 보다 영리합니다;일부 픽셀을 삭제합니다." RGB 에서 이미지를 휘도 플러스 색상 모델로 변환 한 다음 (눈은 색상보다 밝기에 훨씬 민감합니다) 밝기를 선명하게 유지하면서 색상 채널의 해상도를 줄입니다. 이미지를 블록으로 나누고 각각을 주파수 계수로 변환하며 고주파수 인 미묘한 질감과 노이즈를 더 적은 값으로 반올림합니다. 반올림 단계 인 양자화는 데이터가 실제로 손실되는 곳입니다. JPEG,손실 WebP 및 손실 AVIF 는 모두이 호를 따릅니다.

실제적인 upshot: 무손실은 모든 화소가 의미있는 심상을 위해 이다 - 로고,스크린샷, 도표,파삭파삭한 원본을 가진 무엇이든. 손실은 사진과 자연적인 심상을 위해,여기서 "looks sameall" matters far more than "is bit-for-bit sameall."

품질 설정은 실제로 무엇을 의미합니까?

"품질 80%"는 사람들이 무엇을 사는지 알지 못한 채 설정한 숫자입니다. Here's 실제 시청 크기에서 전후 비교를 많이 기반으로 JPEG 및 손실 WebP 에 사용하는 맵입니다.

100%(최대): 거의 결코 올바른 선택. 파일은 눈에 보이는 개선 없이 80%보다 3–5× 더 큰 경우가 많습니다. 오후를 낭비하는 영웅 이미지가 여기에 저장되었습니다.

85–95%(높음): 미묘한 디테일이 진정으로 중요한 사진 포트폴리오 및 이미지의 경우 90%에서는 100% 줌에서도 대부분의 시청자에게 아티팩트가 보이지 않습니다.

75–85%(웹 스위트 스팟): 최대값보다 60~70% 작으며,정상적인 보기 크기에서는 아티팩트가 보이지 않습니다. 거의 모든 웹 이미지가 속하는 곳입니다.

50~75%(공격적): 크기가 중요한 썸네일 및 미리보기의 경우 자세히 살펴보면 유물이 부드러운 그라데이션과 미세한 질감으로 표시되기 시작합니다.

50% 미만: 눈에 보이는 차단성과 컬러 밴딩. 진정으로 우선순위가 낮은 이미지나 하드 사이즈 제약을 위해 예약하세요.

PNG doesn't 에는 "quality" 슬라이더가 있기 때문에 it's 무손실 - 당신은 다르게 최적화합니다. 압축 수준 (0–9) 은 6 개의 합리적인 기본값으로 더 작은 파일에 대한 인코딩 시간을 거래합니다. 색 심도를 줄이는 것은 이미지가 몇 가지 색상을 사용할 때 엄청나게 도움이됩니다: 24 비트에서 8 비트로 떨어진 16 색 로고는 눈에 보이는 변화가 전혀없는 극적으로 줄어 듭니다. 그리고 메타 데이터 - EXIF,색상 프로필,타임스탬프 - 를 벗겨 내면 그림에 영향을 미치지 않는 바이트를 다듬습니다.

WebP 는 웹에 대 한 나의 기본값입니다: 품질 80 에서 그것은 동등한 품질에서 JPEG 보다 25–35% 작은 실행,그리고 그것은 또한 대략 분기에 의해 PNG 를 이길 무손실 모드를 수행 합니다. AVIF 는 여전히 더 열심히 압축-일반적으로 50% + JPEG 보다 작은-하지만 더 천천히 인코딩 및 isn't 꽤 보편적으로 지원,그래서 나는 혼자 보다는 WebP 대체와 함께 제공 합니다.

어떤 형식으로 압축해야 합니까?

형식을 고르는 것은 압축 전투의 절반이고,결정은 선택권이 그것을 보는 보다는 더 간단합니다. Here's 비교 I'd 는 새로운 팀원을 건네줍니다:

단일 가장 일반적인 형식 실수 - 그리고 I & # 39;ve 내가 셀 수있는 것보다 더 많은 시간을 코드 리뷰에서 잡은 - PNG 로 사진을 저장하는 것입니다. PNG 는 무손실이기 때문에 PNG 로 저장된 사진은 눈에 띄는 차이가없는 85% 품질의 JPEG 와 같은 사진보다 몇 배 더 클 수 있습니다. PNG 는 자연 이미지가 아닌 하드 에지와 텍스트가있는 그래픽 용입니다. 사진에 JPEG 또는 WebP 를 사용하면 한 번의 변경으로 부풀어 오른 페이지 & # 39;s 무게의 대부분을 되찾을 수 있습니다.

변환은 두 번의 클릭 작업입니다 포맷 변환기. 내가 실제로 발송하는 패턴은 브라우저가 협상하게합니다:

<img src="photo-800.webp"
     srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="Description">

그 srcset 브라우저를 여러 가지 크기로 핸즈하고 장치에 맞는 것을 다운로드 할 수 있으므로 전화는 데스크톱 이미지를 결코 당기지 않습니다. it's 빠른 사이트와 느린 사이트의 차이점.

What's 웹 이미지를 압축하는 올바른 순서?

순서는 어떤 개인적인 조정 보다는 더 많은 것,그리고 틀리게 얻음것은 최대량 "I 압축 그것 및 it's 아직도 huge" 불평의 뒤에 조용한 실수이다. 순서,매번:

먼저 크기를 조정합니다. 800×600 으로 표시될 4000×3000 이미지를 압축하는 것은 폐기되려는 픽셀에 대한 노력을 낭비하며, 그 결과는 여전히 필요한 것보다 훨씬 더 크다. 크기 조정 디스플레이 치수(Retina의 경우 두 배) 전에 압축기를 만지는 것. 이 한 번의 재정렬은 어떤 품질 조정보다 더 큰 이미지 문제를 해결합니다.

두번째로 변환. 다음을 사용하여 사진을 WebP(또는 대체 기능이 있는 AVIF)로 이동합니다 포맷 변환기. You're 는 이제 더 작고 더 나은 형식의 이미지를 압축합니다.

세번째 압축. 실행 이미지 압축 손실 웹 이미지의 경우 약 80%에서 결과를 판단합니다 실제 시청 크기에서- 아무도 웹페이지를 그런 식으로 보지 않기 때문에 400%로 확대되지 않았습니다.

그 콘크리트를 만들기 위해, here's 웹 최적화 패스는 내가 실제 페이지에서 실행: 무거운 이미지를 찾기 위해 등대와 감사, 그 디스플레이 크기에 각각 크기 조정, WebP로 변환, 75–80% 에서 압축 한 다음, 다시 실행 등대를 확인 하기 위해 일반적인 결과는 50–80% 총 이미지 무게와 가장 큰 만족 페인트에서 측정 가능한 점프-이는 처음에이 전체 경로 아래로 나를 보낸 메트릭입니다.

압축과 함께 크기 조정, 형식 선택 및 배경 제거에 대한 광범위한 투어를 위해 이미지 도구 가이드 전체 툴킷을 다룹니다.

어떤 압축 실수가 가장 큰 비용을 초래합니까?

오류의 소수 대부분의 낭비 바이트와 가장 눈에 띄는 품질 손상을 설명합니다. I've made every one of these.

이미 압축된 JPEG를 다시 압축합니다. 손실 압축의 각 라운드는 이전 것 위에 새로운 아티팩트를 쌓고,손상은 누적되고 영구적입니다. 항상 압축하십시오 원본 소스에서그리고 해당 원본을 보관하십시오. 이전 압축 사본에서가 아니라 모든 압축 버전을 생성하십시오.

사진에 PNG를 사용합니다. 위에 덮여 있지만, it's 당신이 그것을 발견 할 때 가장 큰 단일 승리: 5 MB PNG 사진은 눈에 띄는 차이없이 500 KB JPEG가된다.

과압축. JPEG 를 30%로 떨어 뜨리면 눈에 보이는 차단성과 밴딩이있는 작은 파일이됩니다. 웹의 경우 75 – 85%로 유지하고 실제 크기로 테스트하여 바닥을 찾으십시오.

크기 조정 단계를 건너뜁니다. 위에서 다룬 것처럼 크기를 조정하기 전에 압축하면 원래보다 더 크고 품질이 낮은 파일이 생성됩니다.

현대 형식을 무시합니다. WebP를 사용할 수 있을 때 JPEG를 제공하면 아무런 이유 없이 잠재적 절감액의 25~35%가 테이블에 남습니다.

객관적으로 작업을 확인하려는 경우 지각 측정 기준이 존재합니다. 0.95 이상의 SSIM은 일반적으로 "visual lossless, " 및 Google's 1.0 미만의 Butteraugli 점수는 차이가 본질적으로 보이지 않음을 의미합니다. 그러나 솔직히 일상 업무의 경우 원본과 압축 버전을 실제 크기로 나란히 보는 것은 수학이 할 수 있는 거의 모든 것을 알려줍니다.

자주 묻는 질문

품질을 잃지 않고 이미지를 압축하려면 어떻게해야합니까?

진정한 픽셀 완벽한 무손실 압축의 경우 PNG 또는 무손실 WebP 를 사용하십시오. "visually lossless" - 차이점이 보이지 않습니다 - 80 –90% 품질로 JPEG 또는 WebP 를 사용하십시오. The 이미지 압축 도구를 사용하면 다운로드하기 전에 품질을 설정하고 압축 버전과 원본을 비교할 수 있으므로 크기가 떨어지지만 이미지가 여전히 그대로 보이는 정확한 지점을 찾을 수 있습니다.

왜 80% 퀄리티가 마법의 숫자로 여겨지는가?

진짜 보기 크기에 시험 전후의 많은에 걸쳐,80%의 주위에 JPEG 또는 WebP 질은 파일이 최대에서 60–70%를 긴축한 곳에 이다 그러나 인공물은 화소 엿보기 없이 아직도 보이지 않는다. 더 높은 가서 당신은 세부사항을 위해 많은 바이트를 아무도 보지 않는다 지불한다; 매우 더 낮게 가고 기온변화는 밴드에 시작한다. It's 웹 사용을 위한 제일 균형,왜 it's 내가 도달하는 기본값.

2026년 웹사이트에 가장 적합한 이미지 형식은 무엇입니까?

WebP 는 최고의 기본값입니다 - 효과적으로 범용 브라우저 지원을 통해 JPEG 보다 약 25–35% 작습니다. 최대 절감 효과를 얻으려면 a 에서 WebP 대체 기능이 제공되는 AVIF (JPEG 보다 약 50% 작음) 를 사용하십시오 <picture> 요소. 로 변환합니다 포맷 변환기. 로고와 같은 정품 벡터 아트를 래스터로 압축하지 않고 SVG 로 유지합니다.

손실 압축과 무손실 압축의 차이점은 무엇입니까?

무손실 압축은 그것의 무엇이든을 버리기 없이 자료를 능률적으로 재배열합니다,그래서 결과는 원본과 동일한 화소에 화소 - PNG 입니다. 손실 압축은 영구히 당신의 눈이 주의하기 위하여 확률이 낮은 자료를 제거해,멀리 더 높은 저축을 달성하 - JPEG 는 이 방법을 사용합니다. 무손실은 전형적으로 10–40% 감소를 열매를 산출합니다; 손실은 일반적으로 60–90%를 산출합니다. 원본과 도표를 위해 무손실,사진을 위해 손실을 이용하십시오.

압축하기 전이나 후에 이미지의 크기를 조정해야 합니까?

항상 크기를 먼저 조정합니다. 큰 이미지를 압축한 다음 축소하면 크기가 삭제되는 픽셀에 대한 압축 노력이 낭비되어 필요한 것보다 크고 품질이 낮은 파일을 남깁니다. 먼저 디스플레이 크기로 크기를 조정한 다음 더 작은 이미지를 압축합니다. 그 순서는 가장 작고 깨끗한 결과를 생성합니다.

온라인 도구로 이미지를 압축하는 것이 안전합니까?

대부분의 온라인 압축기는 이미지를 처리하기 위해 서버에 이미지를 업로드하는데,이는 개인 사진이나 클라이언트 작업에 대한 관심사입니다. The 이미지 압축 Toolz.dev의 도구는 캔버스 API를 사용하여 브라우저에서 완전히 실행되므로 이미지가 장치를 떠나지 않습니다. 개인적이거나 독점적인 모든 것에 안전합니다.

왜 같은 이미지를 두 번 압축하는 것은 나쁜 생각인가?

손실 압축은 세부사항을 버리고,두번 하면 두번 버린다 - 두번째 패스는 첫번째 pass's 위에 신선한 아티팩트를 추가한다,그리고 그 어느 것도 돌아오지 않는다. 이것이 이미 한번 압축된 파일을 압축하는 것보다는 항상 원본을 유지하고 그것으로부터 모든 압축된 버전을 생성해야 하는 이유이다.

내 이미지가 너무 큰지 어떻게 알 수 있나요?

귀하의 페이지에 대해 Google Lighthouse 또는 PageSpeed Insights 를 실행; 둘 다 대형 이미지를 플래그하고 더 나은 크기를 제안합니다. 엄지 손가락의 빠른 규칙: 어떤 단일 이미지가 200 KB 이상이라면 it's 최적화 가치가 있으며 영웅 이미지는 특히 가장 큰 내용 페인트를 구동하기 때문에 그 아래에 잘 앉아 있어야합니다. resize-convert-compress 워크 플로우 및 재 감사를 통해 범죄자에게 먹이를줍니다.

이미지를 200KB 또는 1MB와 같은 특정 파일 크기로 압축하려면 어떻게 해야 합니까?

디스플레이 치수로 크기를 먼저 조정한 다음 대상을 지울 때까지 품질을 낮추십시오: 80%에서 시작하고 you're가 여전히 끝났다면 70%를 시도한 다음 60%를 시도하십시오. 그만큼 이미지 압축 도구는 슬라이더를 움직일 때 출력 크기를 보여 주므로 추측하고 다시 내보내는 대신 임계 값을 넘는 것을 볼 수 있습니다. WebP 로 형식을 전환하면 일반적으로 동일한 품질 설정에서 25 – 35%를 더 구입하게되며,이는 종종 그 자체로 충분합니다.

이미지를 압축하면 해상도나 크기가 감소합니까?

아니오 - 압축과 크기 조정은 분리되는 가동입니다. 3000×2000 사진을 압축하는 것은 그것을 3000×2000 남겨둡니다; 그것은 다만 몇몇 정밀한 세부사항의 비용에 더 적은 바이트를 사용하여 그 화소를 저장합니다. 당신이 더 적은 화소를 원하는 경우에,that's 크기 조정,그리고 it's 보통 가장 무게를 저장하는 변화. 둘 다 하는 것은,그 순서 대로,90 KB 웹 이미지로 6 개 MB 사진기 파일을 도는 무슨입니다.