치수와 관련하여 JPEG 이미지의 "최적"파일 크기는 얼마입니까?

100,000 개가 넘는 JPEG 이미지를 스캔하고 파일 크기가 "너무 큰"경우 다시 압축하는 스크립트를 작성하려고합니다. 스크립팅은 쉬운 부분이지만 이미지를 "너무 큰"것으로 분류하는 방법을 잘 모르겠습니다.

예를 들어 파일 크기가 1.81MB 인 2400x600px 이미지가 있습니다. Photoshop의 웹 저장 명령은 60 품질과 동일한 크기로 540KB 파일을 만듭니다. 원래 크기의 약 29 %입니다.

이제이 숫자를 지침으로 사용하려고합니다. 540KB / (2,400 * 600 / 1,000,000) = 메가 픽셀 당 375KB와 같은 것. 이보다 큰 이미지는 큰 것으로 간주됩니다. 이것이 올바른 접근입니까, 아니면 더 나은 접근입니까?

편집 1 : 웹 사이트에 표시하기 위해 이미지를 최적화해야합니다.

편집 2 : 실험을 통해 원하는 출력 품질을 결정할 수 있습니다. 이미지 크기가 wrt 크기면에서 큰지, 낮은 품질로 저장 해야하는지 알아야합니다.

일 평균 , JPEG의 스위트 스폿 (sweet spot)은 주위 픽셀 당 하나의 비트 .

특정 유형의 그래픽 (예 : 평평한 영역 및 부드러운 그라디언트)이 다른 유형 (노이즈, 텍스트)보다 더 잘 압축되므로 모든 이미지에 맹목적으로 적용하는 강력한 방법이 아니기 때문에 이미지 내용에 따라 달라집니다.

또한 비교할 압축되지 않은 참조 이미지가없는 문제가 있으므로 현재 가지고있는 이미지의 현재 품질이 무엇인지, 그리고 여전히 품질을 낮추어 얼마나 수용 가능한지 알 수 없습니다. JPEG의 양자화 테이블에서 품질을 어느 정도 추측 할 수 있지만 신뢰할 수있는 방법은 아닙니다 (특히, 사용자 정의되고 최적화 된 양자화 테이블이있는 JPEG의 경우 ImageMagick의 품질 판단이 매우 잘못됨).

그렇게 말하면서 합리적인 실제 접근 방식이 있습니다.

1. 원하는 최대 JPEG 품질 설정 (70 ~ 85 범위)을 선택하십시오.
2. 이미지를 해당 품질 수준으로 다시 압축하십시오.
3. 재 압축 된 이미지가 ~ 10 % 이상 작 으면 재 압축 된 이미지 를 유지하십시오.

작은 파일 크기 만 선택하지 말고 파일 크기를 대폭 줄이십시오. JPEG의 압축 손실은 JPEG의 손실 특성으로 인한 세부 정보 손실 및 8 비트 RGB 로의 변환으로 인해 파일 크기가 항상 급격히 감소하는 경향이 있기 때문에 파일 크기를 조금만 드롭해도 가치가없는 품질이 크게 떨어질 수 있습니다. 그것.

JPEG로 압축 된 파일의 크기는 이미지의 복잡성에 따라 다릅니다. 설명하는 방식으로 파일 크기를 제어하려고하면 이미지 품질이 크게 달라집니다.

대신 다음 옵션을 고려하십시오.

• 충분한 접근 방식.  75와 같이 만족스러운 품질 설정을 사용하십시오. 결과의 크기를 원본 이미지와 비교하고 더 작은 파일을 유지하십시오. JPG로 변환 할 때 어떤 품질을 선택해야합니까?를 참조하십시오 .

• 은 JPEG 최소화 부를 사용 JPEGmini처럼 또는 jpeg-recompress에서 JPEG 아카이브 . 그들은 본질적으로 당신이하려고하는 것처럼 보이지만 JPEG 알고리즘 내부를 더 잘 인식하도록 설계되었습니다.

• Nathancahill이 제안한 것처럼 웹 개발자 관점에서 다양한 크기의 축소판을 생성 합니다.

아니요. 이것은 잘못된 접근법입니다.

픽셀 단위의 파일 크기는 최종 가중치와 관련이 있지만 유일한 요인은 아닙니다.

테스트하십시오. 동일한 2400x600px의 완전히 흰색 파일을 가져 와서 JPG로 저장하십시오.

이제 세부 정보가 많은 숲 사진 (같은 2400x600px)을 찍어 저장하십시오. 이 파일은 동일한 압축 설정을 사용하여 더 커집니다.

최종 크기는 다음 세 가지 요소에 따라 다릅니다.

• 픽셀 크기
• 압축 설정
• 내용 (이미지의 세부 사항 및 복잡성)

따라서 픽셀 크기를 기준으로 가중치를 정의 할 수 없습니다.

그러나 나는 당신의 문제를 이해합니다.

이미지의 현재 압축을 분석하지 않으면 "최적의"무게를 정의하기가 어렵습니다 (관찰자 또는 이미지 사용에 상대적)

압축 설정을 정의하고 "모든 설정"을 다시 압축 할 수 있습니다. "업로드"하기 전에이 작업을 수행할지 여부를 모르겠습니다. 저장된 일부 파일을 건너 뛰는 것보다 더 많은 시간을 절약 할 수 있습니다.

이미지를 분석하고 현재 압축 비율을 계산하는 도구가 있습니다. 그러나 그것이 중요하다는 것을 의심합니다.

여기 웹 개발자. 여기에 내가 접근하는 방법이 있습니다.

1. 표시된 이미지 크기와 필요한 화면 해상도를 결정하십시오.

첫 번째 작업은 이미지가 표시 될 픽셀 크기를 결정하는 것입니다. 온라인 상점에 제품 사진이 있습니까? 사진 갤러리? 사용자 프로필 사진? 여러 다른 크기? 필요한 픽셀 크기 목록을 만드십시오. 최신 휴대 전화 및 태블릿과 같은 고해상도 화면에 @ 2x 이미지가 필요한지 확인하십시오.

2. 썸네일 스크립트를 사용하여 새 이미지 파일을 만듭니다.

이것을 썸네일 스크립트라고하지만 썸네일 이상의 것 이상으로 사용할 수 있습니다. 많은 스크립트가 있거나 직접 작성할 수 있습니다. 원본 파일의 크기를 조정하지 않으면 스크립트에서 실수를하거나 고해상도 이미지가 필요하다는 것을 깨달았을 때 처리 할 수 ​​있습니다. 일반적인 방법은 출력 파일 이름에 접미사를 지정하는 것입니다. 예를 들면 다음과 같습니다.

lena.jpg (Original, 2000x3000)
lena-thumb.jpg (100x150)
lena-thumb@2x.jpg (200x300)
lena-product.jpg (400x600)
lena-product@2x.jpg (800x1200)

3. 압축.

축소판 스크립트는 새 이미지 파일을자를 때 jpg 압축을 지정해야합니다. 그러나 파일 크기를 훨씬 더 줄일 수있는 다른 축소 기가 있습니다.

@Rafael의 답변 에 JPEG 압축 입력 및 출력에 대한 설명이 있지만 웹에 응답하고 문제를 업로드하려고합니다.

웹 사이트에서 이미지를 사용하려면 (디자인 또는 컨텐츠 용) 일부 명령이 필요합니다. 내 이미지는 무엇에 사용됩니까? 로고, 표지 사진, 썸네일, 블로그 게시물의 사진, 갤러리의 전체 화면 사진 ... 또한 여러 용도로 사용하는 경우 (예 : 사진 및 갤러리 썸네일) 필요한 모든 크기의 이미지를 거부하려고합니다. 그러나 고유 한 웹 사이트를 구축하지 않는 한 오늘날 대부분의 웹 서비스는 더 큰 그림에서 더 작은 크기의 이미지를 생성하여 현장에서 사용할 수 있습니다.

이제 이미지 목적을 알았으므로 웹 사이트 (또는 CMS 또는 프론트 엔드 프레임 워크)는 이미지를 준수하기 위해 항상 최대 크기 (픽셀)를 요구합니다. 로고는 최대 600x600px, 배경 표지는 최대 1280x720px, 전체 화면 디스플레이 1920x1080의 콘텐츠 사진 또는 완벽한 세부 묘사를위한 카메라 기본 해상도 일 수 있습니다. 업로드하려는 웹 사이트에서 올바른 크기를 확인하십시오. 달성하려는 비율에 따라 필요한 최대 픽셀 크기 이상을 일치 시키려고합니다. 종횡비가 같지 않으면 일부 서비스에서 이미지가 잘리고 늘어납니다. 이 경우 필요한 최대 크기 및 비율에 맞게 이미지를 다시 잘라야합니다.

그런 다음 웹 사이트에서 파일 크기 제한을 적용하거나 이미지 목적에 따라 제한 할 수 있습니다. 페이지 로딩 시간과 관련하여 더 밝을수록 좋습니다. 2400x600px의 고해상도 이미지의 예에서 300 ~ 500kB는 로딩 시간에 아주 좋은 크기입니다. 이미지 목적에 따라 콘텐츠 그림 (예 : 사진)이 필요한 경우 카메라의 기본 해상도까지 이미지가 더 무거울 수 있습니다 (예 : 전체 화면 표시). 표시가 없으면 파일 크기 제한을 추측하기 어려울 수 있습니다. 대상 장치 (모바일, 데스크탑 ...), 대상 국가 네트워크 품질에 따라 다를 수 있습니다. 최고의 품질과 서비스를 위해 사진을 하나씩 처리하십시오. 보이는 아티팩트없이 최소 파일 크기를 얻습니다. 편의성 또는 속도 처리를 위해 전반적인 만족스러운 압축 수준을 사용하여 스크립트 크기를 조정합니다 (약 70 정도면 충분 함).@xiota의 답변 도 필요한 도구 일 수 있습니다. 여기에 자신의 표준을 설정하십시오.

TL; DR 웹 사이트의 이미지 목적은 크기 / 압축 량의 핵심입니다.

계산하는 것은 이미지 픽셀의 평균 압축 크기이며, 픽셀 크기를 원시 픽셀 크기 (일반적으로 24 비트 RGB의 경우 3 옥텟)로 나누면 압축 비율이 구해집니다.

이것은 이미지의 압축 상태에 대한 정보를 제공하는 좋은 지표이지만 압축 비율이 압축 프로파일에만 의존하지 않기 때문에 이미지가 충분히 압축되었는지 여부를 판단하는 것만으로는 충분하지 않습니다 (알고리즘 = JPEG, 품질 = 60/100) 그러나 이미지의 압축 가능성 : 이미지의 압축률이 다소 다르기 때문에 동일한 원시 크기와 동일한 압축 프로파일을 가진 다른 이미지는 다른 jpeg 크기를 생성합니다 (공백 이미지는 압축하기가 매우 쉽고 흰색) 소음이 없습니다).

이로 인해 "마지막으로 사용 된"품질 프로파일이이 이미지 (메타 데이터 또는 jpeg 헤더 구조로)에 저장되지 않기 때문에 대상 크기 / 품질 프로파일로 이미지를 다시 게시 할 때 가장 많이 사용되는 방법은 실제로 다시 압축하는 것입니다. 이미지의 초기 상태에 관계없이 모든 것을 자동으로 조정 합니다.

예, 필요하지 않을 때는 다시 압축 할 수 있습니다. 예. 더 높은 품질의 프로필로 다시 압축하면 공간이 손실 될 수 있지만, 이러한 경우는 예외적이며 대규모에서는 대상 품질 프로필을 유지하는 것이 가장 쉬운 방법입니다. 물론 이미지를 서서히 저하시키지 않기 위해 한 번만 수행하고 싶을 것입니다. 두 개의 이미지 라이브러리를 저장해야합니다. 초기 "손질되지 않은"이미지와 "게시 / 압축 될"이미지 라이브러리.

많은 파일을 재 압축하기 위해 존재하는 많은 도구가 있으며, 자신만의 스크립트를 작성하고 올바른 기술 스택 (주로 C ++ 및 libjpeg)을 사용하여 100k보다 큰 파일조차도 매우 빠를 수 있습니다.

더 똑똑하고 복잡한 프로세스를 구현하려는 경우 반복적 인 재 압축 / 비교 크기 논리를 실험하여 원래 품질 프로파일을 추정 할 수 있습니다 (동일한 품질로 재 압축하면 거의 동일한 크기를 가져야 함) 품질은 크기를 약간 늘리고 품질을 낮추면 크기가 크게 줄어 듭니다). 물론 이것은 훨씬 더 많은 CPU 전력을 소비합니다.

For example there is a 2400x600px image with a file size of 1.81MB.
Photoshop's save for web command creates a 540KB file at 60 quality and same dimensions.    
This is about 29% of original size.

압축되지 않은 원래 크기는 2400 x 600 x 3 = 4,320,000 바이트 (4.1MB)입니다. 24 비트 색상은 항상 픽셀 당 3 바이트의 RGB 데이터 이기 때문 입니다. 이 절대적인 진실을 해결할 방법이 없습니다.

그러나 JPG 크기는 이미지 세부 사항에 따라 다릅니다. 하늘이나 페인트 칠한 벽과 같은 큰 매끄러운 영역은 압축률이 높지만 잎이 많은 나무와 같이 세부적인 영역도 압축되지 않습니다. 따라서 절대 숫자 표시기가 없습니다.

그러나 540KB는 0.540 / 4.1 = 4.1MB 원본 크기의 13 %입니다 . 이전 JPG 크기의 29 % 일 수 있지만 원래 압축되지 않은 크기의 13 %입니다. 따라서 압축되지 않은 원래 크기의 1/8이 일반적으로 "정확한"품질로 간주됩니다. 최적의 품질은 아니지만 최대 품질은 아니지만 일반적으로 괜찮으며 일부 용도로는 충분합니다. 그냥, 이미 작습니다.

JPG 파일이 클수록 이미지 품질이 좋고, 작을수록 이미지 품질이 떨어집니다. 충분히 좋은 것을 결정해야하지만 JPG 압축으로 이미지 품질이 떨어지기 때문에 JPG는 "너무 크지"않습니다. 24 비트 색상은 압축되지 않은 픽셀 당 3 바이트입니다.

따라서 결정은 당신이 작은 것을 원하거나 좋은 것을 원한다면입니다.

그러나 더 많은 JPG 아티팩트가 추가되고 작은 크기로 데이터가 변경되어 더 이상 나아지지 않기 때문에 기존 JPG를 더 크게 만드는 것은 여전히 ​​더 나쁩니다.

JPG 아티팩트는 일반적으로 세부 사항이없는 매끄러운 영역에서 한 가지 색상의 8x8 픽셀 블록으로 표시되거나 세부 가장자리 주변의 거친 가장자리로 표시됩니다.

JPG를 편집하고 다시 저장하면 추가 JPG 아티팩트가 추가됩니다. 필요한 경우 항상 원래 압축 설정과 일치하도록 다시 저장하는 것이 좋습니다.

Photoshop의 "웹용으로 저장"은 실제로 파일 크기와 품질 사이에서 상당히 좋은 절충안이므로 좀 더 구체적인 요구 사항이 없으면 그와 함께 가야합니다. 일반적인 조언을 웹 개발자를위한 50-70 % 품질 범위에 충실하는 것입니다. 물론 예외는 있습니다. 회사 로고는 항상 멋지게 보이거나 무손실 형식으로 변환해야하며 90 % ~ 95 %의 품질을 원할 것입니다. 보이는 페이지 배경.

또한 이미지 크기를 다시 조정하는 것을 잊지 마십시오. 2400x600 사진은 4K 디스플레이에서 잘 보이지만 작은 화면에서는 크기가 조정되어 사용자에게 시각적 인 개선없이 데이터 대역폭을 낭비합니다. 사용할 웹 사이트 템플릿을 확인하여 이미지의 최적 너비를 찾으십시오. 일반적으로 작성 당시 1200-1300 픽셀 정도입니다 ( 여기에서 가장 많이 사용되는 해상도 참조 ).

변환 한 그림의 원본을 웹 품질로 유지하십시오. 이 자료를 재 작업하거나 인쇄해야 할 경우 60 % 품질과 1Mpix 해상도로만 유감스럽게 생각합니다.