Google의 Page Speed ​​무손실 이미지 압축은 어떻게 작동하나요?

StackOverflow https://stackoverflow.com/questions/5451597

문제

웹사이트에서 Google의 Firebug/Firefox용 PageSpeed ​​플러그인을 실행하면 이미지를 무손실 압축할 수 있는 경우를 제안하고 이 작은 이미지를 다운로드할 수 있는 링크를 제공합니다.

예를 들어:

이는 JPG 및 PNG 파일 형식 모두에 적용됩니다. (GIF나 다른 파일 형식은 테스트하지 않았습니다.)

Flickr 축소판도 참고하세요(모든 이미지는 75x75픽셀입니다.). 꽤 큰 절감 효과가 있습니다.이것이 정말 훌륭하다면 Yahoo는 왜 이 서버측을 전체 라이브러리에 적용하고 스토리지 및 대역폭 부하를 줄이지 않습니까?

Stackoverflow.com조차도 아주 약간의 비용 절감을 의미합니다.

Photoshop의 '웹용으로 저장' 기능을 사용하여 만든 PNG 파일에 대해 PageSpeed가 상당히 절약할 수 있는 제안을 본 적이 있습니다.

그래서 내 질문은, 이미지를 그렇게 많이 줄이기 위해 이미지를 어떻게 변경하고 있습니까?파일 형식마다 답변이 다를 것 같습니다.JPG에 정말 무손실인가요?그리고 어떻게 Photoshop을 이길 수 있습니까?이건 좀 의심해봐야 하지 않을까요?

도움이 되었습니까?

해결책

기술적인 세부 사항에 정말로 관심이 있다면 소스 코드를 확인하세요.

PNG 파일의 경우 시행착오 방식으로 OptiPNG를 사용합니다.

// we use these four combinations because different images seem to benefit from
// different parameters and this combination of 4 seems to work best for a large
// set of PNGs from the web.
const PngCompressParams kPngCompressionParams[] = {
  PngCompressParams(PNG_ALL_FILTERS, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_ALL_FILTERS, Z_FILTERED),
  PngCompressParams(PNG_FILTER_NONE, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_FILTER_NONE, Z_FILTERED)
};

네 가지 조합을 모두 적용하면 가장 작은 결과가 유지됩니다.그렇게 간단합니다.

(참고:그만큼 optipng 명령줄 도구는 사용자가 제공하는 경우에도 해당 작업을 수행합니다. -o 2 ~을 통해 -o 7)

JPEG 파일의 경우 다음을 사용합니다. jpeglib 다음 옵션을 사용하세요:

 JpegCompressionOptions()
     : progressive(false), retain_color_profile(false),
       retain_exif_data(false), lossy(false) {}

마찬가지로 WEBP는 다음을 사용하여 압축됩니다. libwebp 다음 옵션을 사용하세요.

  WebpConfiguration()
      : lossless(true), quality(100), method(3), target_size(0),
        alpha_compression(0), alpha_filtering(1), alpha_quality(100) {}

도 있습니다 image_converter.cc 가장 작은 형식으로 무손실 변환하는 데 사용됩니다.

다른 팁

jpegoptim jpg 파일을 최적화하고 PNG 파일을 최적화하려면 optipng .

bash에있는 경우 디렉토리에서 모든 JPG를 무손실로 최적화하는 명령 (재귀 적으로)은 다음과 같습니다. 

find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim --strip-all {} \;
.

-m[%]에 jpegoptim를 추가하여 손실 recture jpg 이미지 (예 : ) 

 find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim -m70 --strip-all {} \;
.

디렉토리의 모든 PNG를 최적화하려면 다음을 수행하십시오. 

find /path/to/pngs/ -type f -name "*.png" -exec optipng -o2 {} \;
.

-o2는 기본 최적화 수준이므로 o2에서 o7로 변경할 수 있습니다.최적화 수준이 높아지면 더 긴 처리 시간이 의미합니다.

압축 효율을 위해 인코더의 CPU 시간을 거래하는 문제입니다. 압축은 더 짧은 표현을 검색하고 더 열심히 검색하면 짧은 것들을 찾을 수 있습니다.

또한 이미지 포맷 기능을 최대한 활용할 수있는 문제가 있습니다. PNG8 + A 대신 PNG24 + A, jpeg 등 최적화 된 허프만 테이블 등.

Photoshop은 웹용 이미지를 저장할 때는 그렇게하기 위해 열심히 노력하지 않으므로 어떤 도구가 그것을 때리는 것에 대해 놀라운 일이 아닙니다.

를 참조하십시오

Windows에서 PageSpeed의 JPG 압축 결과를 복제하려면:

Windows 버전의 jpegtran을 사용하여 PageSpeed와 정확히 동일한 압축 결과를 얻을 수 있었습니다. www.jpegclub.org/jpegtran.DOS 프롬프트(시작 > CMD 사용)를 사용하여 실행 파일을 실행했습니다.PageSpeed ​​압축과 정확히 동일한 파일 크기(바이트 단위)를 얻기 위해 다음과 같이 Huffman 최적화를 지정했습니다.

jpegtran -optimize source_filename.jpg output_filename.jpg

압축 옵션에 대한 자세한 도움말을 보려면 명령 프롬프트에 다음을 입력하세요.jpegtran

또는 Firebug의 PageSpeed ​​탭에서 자동 생성 이미지를 사용하려면:

PageSpeed의 최적화된 파일에 액세스하려면 Pumbaa80의 조언을 따를 수 있었습니다.스크린샷이길 바랍니다 여기 FireFox 환경에 대한 더욱 명확성을 제공합니다.(하지만 Chrome에서는 이러한 최적화된 파일의 로컬 버전에 액세스할 수 없었습니다.)

Adobe Bridge 및 정규 표현식을 사용하여 지저분한 PageSpeed ​​파일 이름을 정리하려면:

FireFox의 PageSpeed는 최적화된 이미지 파일을 생성할 수 있었지만 이름도 다음과 같은 간단한 이름으로 변경했습니다.

nice_picture.jpg

~ 안으로 

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

나는 이것이 일반적인 불만인 것 같다는 것을 발견했습니다.모든 사진의 이름을 직접 바꾸고 싶지 않았기 때문에 정규식과 함께 Adobe Bridge의 이름 바꾸기 도구를 사용했습니다.정규식을 허용하는 다른 이름 바꾸기 명령/도구를 사용할 수 있지만 PageSpeed ​​문제를 해결하는 대부분의 사용자는 Adobe Bridge를 쉽게 사용할 수 있을 것 같습니다.

  1. Adobe Bridge 시작
  2. 모든 파일 선택(컨트롤 A 사용)
  3. 도구 > 일괄 이름 바꾸기(또는 Shift R 제어)를 선택합니다.
  4. 사전 설정 필드에서 "문자열 대체"를 선택합니다.이제 새 파일 이름 필드에 "문자열 대체"가 표시되고 그 뒤에 "원본 파일 이름"이 표시됩니다.
  5. "정규식 사용" 확인란을 활성화합니다.

  6. "찾기" 필드에 정규식을 입력합니다(가장 오른쪽 밑줄 구분 기호에서 시작하는 모든 문자를 선택합니다).

    _(?!.*_)(.*)\.jpg$

  7. '바꾸기' 필드에 다음을 입력합니다.

    .jpg

  8. 선택적으로 미리보기 버튼을 클릭하여 제안된 일괄 이름 변경 결과를 확인한 다음 닫습니다.

  9. 이름 바꾸기 버튼을 클릭하세요.

처리 후 Bridge는 영향을 받지 않은 파일을 선택 취소합니다.모든 .png 파일을 정리하려면 모든 이미지를 다시 선택하고 위의 구성을 수정해야 합니다("jpg" 대신 "png"에 대해).위의 구성을 "Clean PageSpeed ​​jpg Images"와 같은 사전 설정으로 저장하면 나중에 파일 이름을 빠르게 정리할 수 있습니다.

구성 스크린샷/문제 해결

문제가 있는 경우 일부 브라우저에서는 위의 RegEx 표현식이 제대로 표시되지 않을 수 있으므로(이스케이프 문자가 잘못되었기 때문입니다) 구성 스크린샷(이 지침과 함께)은 다음을 참조하세요.

Adobe Bridge의 일괄 이름 바꾸기 도구를 사용하여 지저분한 파일 이름이 있는 최적화된 PageSpeed ​​이미지를 정리하는 방법

내 의견으로 가장 좋은 옵션은 Go에서 가장 많은 이미지 형식을 효과적으로 처리하는 가장 좋은 옵션을 Trimage 입니다. 이미지 형식을 기반으로 optipng, pngcrush, advpng 및 jpegoptim 을 효과적으로 활용하고 완벽한 무손실 압축 근처에서 제공됩니다.

명령 줄을 사용하는 경우 구현은 꽤 쉽습니다. 

sudo apt-get install trimage    
trimage -d images/*
.

와 voila!:-)
또한 수동으로 수행 할 수있는 꽤 간단한 인터페이스를 찾을 수 있습니다.

Optipng (이 블로그 ) : 

FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full %G
.

한 줄!

일괄 처리를 찾고있는 경우 Xserver Avail을 사용하지 않으면 염두를 두십시오.이 경우 Bash 또는 PHP 스크립트를 작성하여 와 같은 일을 할 수 있습니다. 

<?php
    echo "Processing jpegs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.jpg' -exec jpegoptim --strip-all {} \;");
    echo "Processing pngs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.png' -exec optipng -o7 {} \;");
?>
.

사용자의 요구 사항을 제품을 변경하려면 옵션을 변경하십시오.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top