Google의 Page Speed ​​무손실 이미지 압축은 어떻게 작동합니까?

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

예를 들면 다음과 같습니다.

• http://farm3.static.flickr.com/2667/4096993475_80359a672b_s.jpg를 무손실로 압축 하면 33.5KiB (85 % 감소)를 절약 할 수 있습니다.
• http://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpg를 무손실로 압축 하면 18.5KiB (77 % 감소)를 절약 할 수 있습니다.
• http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png를 무손실로 압축 하면 262B (11 % 감소)를 절약 할 수 있습니다.
• http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/images/ui-bg_flat_75_ffffff_40x100.png를 무손실로 압축 하면 91B를 줄일 수 있습니다 (51 % 감소).
• http://www.gravatar.com/avatar/0b1bccebcd4c3c38cb5be805df5e4d42?s=45&d=mm를 무손실로 압축 하면 61B (5 % 감소)를 절약 할 수 있습니다.

이것은 JPG 및 PNG 파일 형식 모두에 적용됩니다 (Gif 또는 기타 테스트하지 않았습니다).

Flickr 썸네일도 참고하십시오 (모든 이미지는 75x75 픽셀입니다). 이것이 정말 큰 경우 Yahoo가 왜이 서버 측을 전체 라이브러리에 적용하고 스토리지 및 대역폭 부하를 줄이지 않습니까?

Stackoverflow.com조차도 약간의 절감 효과를 나타냅니다.

• http://sstatic.net/stackoverflow/img/sprites.png?v=3을 무손실로 압축 하면 1.7KiB (10 % 감소)를 절약 할 수 있습니다.
• http://sstatic.net/stackoverflow/img/tag-chrome.png를 무손실로 압축 하면 11B (1 % 감소)를 절약 할 수 있습니다.

PageSpeed에서 Photoshop의 '웹용으로 저장'기능을 사용하여 만든 PNG 파일을 상당히 절약 할 수 있다고 제안했습니다.

그래서 제 질문은 이미지를 크게 줄이기 위해 이미지를 어떻게 변경하고 있습니까? 다른 파일 형식에 대해 다른 답변이 있다고 생각합니다. 이것이 JPG에서 실제로 무손실입니까? 그리고 어떻게 Photoshop을 이길 수 있습니까? 내가 조금 의심해야합니까?

기술적 인 세부 사항에 관심이 있다면 소스 코드를 확인하십시오.

• png_optimizer.cc
• jpeg_optimizer.cc
• webp_optimizer.cc

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)
};

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

(NB :를 통해 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 도 있습니다 .

jpegoptimJPG 파일 optipng을 최적화하고 PNG 파일을 최적화 하는 데 사용 합니다.

on bash인 경우 디렉토리의 모든 JPG를 무손실로 최적화하는 명령은 다음과 같습니다.

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

손실 압축 JPG 이미지에 추가 -m[%]할 수있는 jpegoptim예는 다음과 같습니다.

 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. 최적화 수준이 높을수록 처리 시간이 길어집니다.

기술 / 도구 중 일부를 설명하는 http://code.google.com/speed/page-speed/docs/payload.html#CompressImages 를 살펴보십시오 .

압축 효율을 위해 인코더의 CPU 시간을 교환해야합니다. 압축은 더 짧은 표현을 검색하는 것이며 더 열심히 검색하면 더 짧은 표현을 찾을 수 있습니다.

PNG24 + a 대신 PNG8 + a, JPEG의 최적화 된 허프만 테이블 등 이미지 형식 기능을 최대한 활용하는 문제도 있습니다.

웹용 이미지를 저장할 때 Photoshop은 실제로 그렇게하려고 노력하지 않으므로 어떤 도구보다 뛰어난 도구를 사용하는 것은 놀라운 일이 아닙니다.

보다

• ImageOptim (무손실) 및
• 작은 PNG 파일 용 ImageAlpha (손실) ( 작동 방법에 대한 높은 수준의 설명 )
• 더 나은 JPEG 압축기를위한 JPEGmini / MozJPEG (손실).

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

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

jpegtran -optimize source_filename.jpg output_filename.jpg

압축 옵션에 대한 자세한 내용을 보려면 명령 프롬프트에서 다음을 입력하십시오. jpegtran

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

Pumbaa80의 조언에 따라 PageSpeed의 최적화 된 파일에 액세스 할 수있었습니다. 희망 스크린 샷은 여기 파이어 폭스 환경에 대한 더 선명도를 제공합니다. 그러나 Chrome에서 이러한 최적화 된 파일의 로컬 버전에 액세스 할 수 없었습니다.

그리고 Adobe Bridge 및 Regular Expressions를 사용하여 지저분한 PageSpeed ​​파일 이름을 정리하려면 :

FireFox의 PageSpeed에서 최적화 된 이미지 파일을 생성 할 수 있었지만 이름도 다음과 같이 간단한 이름으로 바뀌 었습니다.

nice_picture.jpg

으로

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

이것이 일반적인 불만 인 것 같습니다. 손으로 모든 사진의 이름을 바꾸고 싶지 않았기 때문에 Adobe Bridge의 이름 바꾸기 도구를 정규식과 함께 사용했습니다. 정규식을 허용하는 다른 이름 바꾸기 명령 / 도구를 사용할 수 있지만 PageSpeed ​​문제를 다루는 대부분의 사람들이 Adobe Bridge를 즉시 사용할 수 있다고 생각합니다!

1. Adobe Bridge 시작
2. 모든 파일 선택 (Control A 사용)
3. 도구> 배치 이름 바꾸기 (또는 Control Shift R)를 선택하십시오.
4. 사전 설정 필드에서 "문자열 대체"를 선택하십시오. 새 파일 이름 필드에 "문자열 대체"가 표시되고 "원래 파일 이름"이 표시됩니다.
5. "정규 표현식 사용"체크 상자를 활성화하십시오.

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

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

7. "바꾸기"필드에 다음을 입력하십시오.

   .jpg

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

9. 이름 바꾸기 버튼을 클릭하십시오

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

구성 스크린 샷 / 문제 해결

문제가있는 경우 일부 브라우저에서 위의 RegEx 표현식을 올바르게 표시하지 않을 수 있으므로 (이스케이프 문자를 비난) 구성 스크린 샷 (이 지침과 함께)을 보려면 다음을 참조하십시오.

Adobe Bridge의 배치 이름 변경 도구를 사용하여 파일 이름이 지저분한 최적화 된 PageSpeed ​​이미지를 정리하는 방법

제 생각에는 대부분의 이미지 형식을 효율적으로 처리 할 수있는 최상의 옵션은 다듬기 입니다. 이미지 형식에 따라 optipng, pngcrush, advpng 및 jpegoptim을 효과적으로 활용 하며 거의 완벽한 무손실 압축을 제공합니다.

명령 행을 사용하면 구현이 매우 쉽습니다.

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

그리고 짜잔! :-)
또한 수동으로 수행하는 매우 간단한 인터페이스를 찾을 수 있습니다.

OptiPNG를 사용하여 폴더 아래의 이미지를 재귀 적으로 최적화하는 매우 편리한 배치 스크립트가 있습니다 ( 이 블로그에서 ).

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

한 줄!

일괄 처리를 찾고 있다면 Xserver를 사용할 수없는 경우 정리가 불평한다는 점을 명심하십시오. 이 경우 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 {} \;");
?>

필요에 맞게 옵션을 변경하십시오.

창에는 쉽게 접근 할 수있는 몇 가지 드래그 앤 드롭 인터페이스가 있습니다.

https://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/

PNG 파일의 경우이 GIU에 래핑 된 3 가지 도구가 있습니다. 끌어서 놓기 만하면됩니다.

https://pnggauntlet.com/

그래도 시간이 걸리고 1MB png 파일을 압축하십시오.이 압축 비교에 CPU가 얼마나 많이 들어 갔는지 놀랐습니다. 이미지가 100 가지 방식으로 압축되어 가장 좋은 방법은이기는 것 같습니다 : D

JPG 압축과 관련하여 색상 프로파일과 모든 추가 정보를 제거하는 것이 위험하다고 생각하지만 모든 사람이 수행하는 경우 비즈니스 표준이므로 직접 수행했습니다.

나는 오늘 WP 설치에서 5500 파일에 113MB를 저장 했으므로 그만한 가치가 있습니다!