Tốc độ nén hình ảnh không mất dữ liệu của Google hoạt động như thế nào?

Khi bạn chạy plugin PageSpeed ​​của Google cho Fireorms / Firefox trên một trang web, nó sẽ gợi ý các trường hợp hình ảnh có thể được nén một cách dễ dàng và cung cấp một liên kết để tải xuống hình ảnh nhỏ hơn này.

Ví dụ:

• Nén không mất dữ liệu http://farm3.static.flickr.com/2667 / 4096993485_80359a672b_s.jpg có thể tiết kiệm 33,5KiB (giảm 85%).
• Nén không mất dữ liệu http://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpg có thể tiết kiệm 18,5KiB (giảm 77%).
• Nén một cách dễ dàng http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png có thể tiết kiệm được 262B (giảm 11%).
• Nén không mất dữ liệu http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/theme/base/images/ui-bg_flat_75_ffffff_40x100.png có thể tiết kiệm 91B (giảm 51%).
• Nén một cách dễ dàng http://www.gravatar.com/avatar/0b1bccebcd4c3c38cb5be805df5e4d42?s=45&d=mm có thể tiết kiệm 61B (giảm 5%).

Điều này áp dụng trên cả hai loại tệp JPG và PNG (Tôi chưa kiểm tra GIF hoặc các loại khác.)

Lưu ý rằng hình thu nhỏ của Flickr (tất cả những hình ảnh đó là 75x75 pixel.) Chúng là một số khoản tiết kiệm khá lớn. Nếu điều này thực sự tuyệt vời, tại sao Yahoo không áp dụng phía máy chủ này cho toàn bộ thư viện của họ và giảm tải lưu trữ và băng thông?

Ngay cả Stackoverflow.com là viết tắt của một số khoản tiết kiệm rất nhỏ:

• Nén không mất dữ liệu http://sstatic.net/stackoverflow/img/sprites.png?v=3 có thể tiết kiệm 1,7KiB (giảm 10%).
• Nén không mất dữ liệu http://sstatic.net/stackoverflow/img/tag-chrome.png có thể tiết kiệm 11B (giảm 1%).

Tôi đã thấy PageSpeed ​​đề xuất mức tiết kiệm khá tốt cho các tệp PNG mà tôi đã tạo bằng tính năng 'Save for Web' của Photoshop.

Vì vậy, câu hỏi của tôi là, những thay đổi họ đang làm cho hình ảnh để giảm chúng rất nhiều? Tôi đoán có những câu trả lời khác nhau cho các kiểu khác nhau. Đây thực sự là mất mát cho JPG? Và làm thế nào họ có thể đánh bại Photoshop? Tôi có nên nghi ngờ một chút về điều này?

Nếu bạn thực sự quan tâm đến các chi tiết kỹ thuật, hãy xem mã nguồn:

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

Đối với các tệp PNG, họ sử dụng OptiPNG với một số phương pháp thử và sai

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

Khi tất cả bốn kết hợp được áp dụng, kết quả nhỏ nhất được giữ lại. Đơn giản như vậy.

(NB: Công optipngcụ dòng lệnh cũng làm điều đó nếu bạn cung cấp -o 2thông qua -o 7)

Đối với các tệp JPEG, họ sử dụng jpeglib với các tùy chọn sau:

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

Tương tự, WEBP được nén bằng libwebp với các tùy chọn sau:

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

Ngoài ra còn có image_converter.cc được sử dụng để chuyển đổi dễ dàng sang định dạng nhỏ nhất.

Tôi sử dụng jpegoptimđể tối ưu hóa các tệp JPG vàoptipng để tối ưu hóa các tệp PNG.

Nếu bạn đang bật bash, lệnh để tối ưu hóa một cách dễ dàng tất cả các JPG trong một thư mục (đệ quy) là:

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

Bạn có thể thêm -m[%]vào jpegoptimđể nén hình ảnh JPG bị mất, ví dụ:

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

Để tối ưu hóa tất cả các PNG trong một thư mục:

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

-o2là mức tối ưu hóa mặc định, bạn có thể thay đổi từ này o2thành o7. Lưu ý rằng mức tối ưu hóa cao hơn có nghĩa là thời gian xử lý lâu hơn.

Hãy xem http://code.google.com.vn/speed/page-speed/docs/payload.html#CompressImages mô tả một số kỹ thuật / công cụ.

Đó là vấn đề thời gian CPU của bộ mã hóa giao dịch cho hiệu quả nén. Nén là tìm kiếm các biểu diễn ngắn hơn và nếu bạn tìm kiếm nhiều hơn, bạn sẽ tìm thấy các biểu diễn ngắn hơn.

Ngoài ra còn có vấn đề sử dụng các khả năng định dạng hình ảnh đến mức tối đa, ví dụ: PNG8 + a thay vì PNG24 + a, các bảng Huffman được tối ưu hóa trong JPEG, v.v.

Photoshop không thực sự cố gắng để làm điều đó khi lưu hình ảnh cho web, vì vậy không có gì đáng ngạc nhiên khi bất kỳ công cụ nào đánh bại nó.

Xem

• ImageOptim (không mất dữ liệu) và
• ImageAlpha (lossy) cho các tệp PNG nhỏ hơn ( mô tả cấp cao về cách thức hoạt động của nó ) và
• JPEGmini / MozJPEG (lossy) cho máy nén JPEG tốt hơn.

Để sao chép kết quả nén JPG của PageSpeed ​​trong Windows:

Tôi đã có thể nhận được kết quả nén chính xác giống như PageSpeed ​​bằng phiên bản Windows của jpegtran mà bạn có thể nhận được tại www.jpegclub.org/jpegtran . Tôi đã chạy tệp thực thi bằng dấu nhắc DOS (sử dụng Bắt đầu> CMD). Để có được chính xác cùng kích thước tệp (xuống byte) khi nén PageSpeed, tôi đã chỉ định tối ưu hóa Huffman như sau:

jpegtran -optimize source_filename.jpg output_filename.jpg

Để được trợ giúp thêm về các tùy chọn nén, tại dấu nhắc lệnh, chỉ cần gõ: jpegtran

Hoặc để sử dụng Hình ảnh được tạo tự động từ tab PageSpeed ​​trong Fireorms:

Tôi đã có thể làm theo lời khuyên của Pumbaa80 để có quyền truy cập vào các tệp được tối ưu hóa của PageSpeed. Hy vọng rằng ảnh chụp màn hình ở đây cung cấp rõ ràng hơn cho môi trường FireFox. (Nhưng tôi không thể có quyền truy cập vào phiên bản cục bộ của các tệp được tối ưu hóa này trong Chrome.)

Và để dọn dẹp các tên tệp trang lộn xộn bằng Adobe Bridge & các biểu thức thông thường:

Mặc dù PageSpeed ​​trong FireFox có thể tạo các tệp hình ảnh được tối ưu hóa cho tôi, nhưng nó cũng thay đổi tên của chúng thành các tên đơn giản như:

nice_picture.jpg

vào

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

Tôi phát hiện ra rằng đây dường như là một khiếu nại phổ biến. Vì tôi không muốn đổi tên tất cả các hình ảnh của mình bằng tay, tôi đã sử dụng công cụ Đổi tên của Adobe Bridge cùng với Biểu thức chính quy. Bạn có thể sử dụng các lệnh / công cụ đổi tên khác chấp nhận Biểu thức chính quy, nhưng tôi nghi ngờ rằng Adobe Bridge có sẵn cho hầu hết chúng ta làm việc với các vấn đề của PageSpeed!

1. Bắt đầu cầu Adobe
2. Chọn tất cả các tệp (sử dụng Điều khiển A)
3. Chọn Công cụ> Đổi tên hàng loạt (hoặc Control Shift R)
4. Trong trường Cài đặt sẵn, chọn "Thay thế chuỗi". Các trường Tên tệp mới bây giờ sẽ hiển thị Thay thế Chuỗi Chuỗi, theo sau là "Tên tệp gốc"
5. Kích hoạt hộp kiểm có tên là Sử dụng biểu thức chính quy

6. Trong trường Tìm Tìm, hãy nhập Biểu thức chính quy (sẽ chọn tất cả các ký tự bắt đầu từ dấu phân cách gạch dưới bên phải):

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

7. Trong trường Thay thế với trường, hãy nhập:

   .jpg

8. Tùy chọn, nhấp vào nút Xem trước để xem kết quả đổi tên hàng loạt được đề xuất, sau đó đóng

9. Nhấp vào nút Đổi tên

Lưu ý rằng sau khi xử lý, Bridge bỏ chọn các tệp không bị ảnh hưởng. Nếu bạn muốn xóa tất cả các tệp .png của mình, bạn cần chọn lại tất cả các hình ảnh và sửa đổi cấu hình ở trên (đối với "png" thay vì "jpg"). Bạn cũng có thể lưu cấu hình ở trên dưới dạng cài đặt trước, chẳng hạn như "Làm sạch hình ảnh trang jSp" để bạn có thể xóa tên tệp nhanh chóng trong tương lai.

Cấu hình Ảnh chụp màn hình / Khắc phục sự cố

Nếu bạn gặp sự cố, có thể một số trình duyệt có thể không hiển thị biểu thức RegEx ở trên một cách chính xác (đổ lỗi cho các ký tự thoát của tôi) để xem ảnh chụp màn hình của cấu hình (cùng với các hướng dẫn sau), xem:

Cách sử dụng công cụ Đổi tên hàng loạt của Adobe Bridge để dọn sạch các hình ảnh trang được tối ưu hóa có tên tệp lộn xộn

Theo tôi, lựa chọn tốt nhất hiện có giúp xử lý hiệu quả hầu hết các định dạng hình ảnh trong một lần là cắt xén . Nó sử dụng hiệu quả optipng, pngcrush, advpng và jpegoptim dựa trên định dạng hình ảnh và mang lại khả năng nén gần như hoàn hảo.

Việc thực hiện khá dễ dàng nếu sử dụng một dòng lệnh.

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

và Voila! :-)
Ngoài ra, bạn sẽ tìm thấy một giao diện khá đơn giản để làm điều đó bằng tay.

Có một tập lệnh bó rất tiện dụng, tối ưu hóa đệ quy hình ảnh bên dưới một thư mục bằng OptiPNG (từ blog này ):

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

MỘT ĐƯỜNG THẲNG!

Nếu bạn đang tìm cách xử lý hàng loạt, hãy nhớ rằng việc cắt xén sẽ phàn nàn nếu bạn không sử dụng Xserver. Trong trường hợp đó, chỉ cần viết một tập lệnh bash hoặc php để làm một cái gì đó như

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

Thay đổi tùy chọn để phù hợp với nhu cầu của bạn.

Đối với các cửa sổ, có một số giao diện drag'n'drop để dễ dàng truy cập.

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

Đối với các tệp PNG, tôi tìm thấy cái này để thưởng thức, rõ ràng có 3 công cụ khác nhau được gói trong GIU này. Chỉ cần kéo và thả và nó làm điều đó cho bạn.

https://pnggauntlet.com/

Mặc dù vậy, phải mất thời gian, hãy thử nén tệp png 1 MB - tôi đã ngạc nhiên khi có bao nhiêu CPU đi vào so sánh nén này, đó phải là những gì đang diễn ra ở đây. Có vẻ như hình ảnh được nén 100 cách và cách tốt nhất sẽ thắng: D

Về việc nén JPG tôi cảm thấy rủi ro khi dải các cấu hình màu và tất cả thông tin bổ sung - tuy nhiên - nếu mọi người đang thực hiện - đó là tiêu chuẩn kinh doanh nên tôi chỉ tự mình làm: D

Tôi đã lưu 113MB trên 5500 tệp trên bản cài đặt WP ngày hôm nay, vì vậy nó hoàn toàn xứng đáng!