development

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

big-blog 2020. 6. 23. 21:41
반응형

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

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

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

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

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

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

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

그래서 제 질문은 이미지를 크게 줄이기 위해 이미지를 어떻게 변경하고 있습니까? 다른 파일 형식에 대해 다른 답변이 있다고 생각합니다. 이것이 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)
};

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

(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 doesn't really try hard to do that when saving images for the web, so it's not surprising that any tool beats it.

See

To Replicate PageSpeed's JPG Compression Results in Windows:

I was able to get exactly the same compression results as PageSpeed using the Windows version of jpegtran which you can get at www.jpegclub.org/jpegtran. I ran the executable using the DOS prompt (use Start > CMD). To get exactly the same file size (down to the byte) as PageSpeed compression, I specified Huffman optimization as follows:

jpegtran -optimize source_filename.jpg output_filename.jpg

For more help on compression options, at the command prompt, just type: jpegtran

Or to Use the Auto-generated Images from the PageSpeed tab in Firebug:

I was able to follow Pumbaa80's advice to get access to PageSpeed's optimized files. Hopefully the screenshot here provides further clarity for the FireFox environment. (But I was not able to get access to a local version of these optimized files in Chrome.)

And to Clean up the Messy PageSpeed Filenames using Adobe Bridge & Regular Expressions:

Although PageSpeed in FireFox was able to generate optimized image files for me, it also changed their names turning simple names like:

nice_picture.jpg

into 

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

I discovered that this seems to be a common complaint. Since I didn't want to rename all my pictures by hand, I used Adobe Bridge's Rename tool along with a Regular Expression. You could use other rename commands/tools that accept Regular Expressions, but I suspect that Adobe Bridge is readily available for most of us working with PageSpeed issues!

  1. Start Adobe Bridge
  2. Select all files (using Control A)
  3. Select Tools > Batch Rename (or Control Shift R)
  4. In the Preset field select "String Substitution". The New Filenames fields should now display “String Substitution”, followed by "Original Filename"
  5. Enable the checkbox called “Use Regular Expression”

  6. In the “Find” field, enter the Regular Expression (which will select all characters starting at the rightmost underscore separator):

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

  7. In the “Replace with” field, enter:

    .jpg

  8. Optionally, click the Preview button to see the proposed batch renaming results, then close

  9. Click the Rename button

Note that after processing, Bridge deselects files that were not affected. If you want to clean all your .png files, you need reselect all the images and modify the configuration above (for "png" instead of "jpg"). You can also save the configuration above as a preset such as "Clean PageSpeed jpg Images" so that you can clean filenames quickly in future.

Configuration Screenshot / Troubleshooting

If you have troubles, it's possible that some browsers might not show the RegEx expression above properly (blame my escape characters) so for a screenshot of the configuration (along with these instructions), see:

How to Use Adobe Bridge's Batch Rename tool to Clean up Optimized PageSpeed Images that have Messy Filenames

In my opinion the best option out there that effectively handles most image formats in a go is trimage. It effectively utilizes optipng, pngcrush, advpng and jpegoptim based on the image format and delivers near perfect lossless compression.

The implementation is pretty easy if using a command line. 

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

and voila! :-)
Additionally you will find a pretty simple interface to do it manually as well.

There's a very handy batch script that recursively optimizes images beneath a folder using OptiPNG (from this blog):

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

ONE LINE!

If you are looking for batch processing, keep in mind trimage complains if you don't have Xserver avail. In that case just write a bash or php script to do something like

<?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 {} \;");
?>

Change options to suite your needs.

For windows there are several drag'n'drop interfaces for easy access.

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

For PNG files I found this one for my enjoyment, apparently 3 different tools wrapped in this GIU. Just drag and drop and it does it for you.

https://pnggauntlet.com/

It takes time though, try compressing a 1MB png file - I was amazed how much CPU went into this compression comparison which has to be what is going on here. Seems the image is compressed a 100 ways and the best one wins :D

Regarding the JPG compression I to feel its risky to strip of color profiles and all extra info - however - if everyone is doing it - its the business standard so I just did it myself :D

I saved 113MB on 5500 files on a WP install today, so its definately worth it!

참고URL : https://stackoverflow.com/questions/5451597/how-does-googles-page-speed-lossless-image-compression-work

반응형

'development' 카테고리의 다른 글

WebAPI 또는 MVC를 사용하여 ASP.NET에서 JSON 반환  (0) 2020.06.23
이 거대한 정규식은 어떻게 작동합니까?  (0) 2020.06.23
리눅스에서 시간 측정-시간 대 시계 대 getrusage 대 clock_gettime 대 gettimeofday 대 timespec_get?  (0) 2020.06.23
Visual Studio 2008 다운로드 및 설치  (0) 2020.06.23
HTML에서 작은 따옴표를 사용할 수 있습니까?  (0) 2020.06.23

'development'의 다른글

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

관련글

댓글

티스토리툴바