การบีบอัดรูปภาพที่ไม่มีการสูญเสีย Page Speed ​​ของ Google ทำงานอย่างไร

เมื่อคุณเรียกใช้ปลั๊กอิน PageSpeed ​​ของ Google สำหรับ Firebug / Firefox บนเว็บไซต์มันจะแนะนำกรณีที่รูปภาพสามารถบีบอัดแบบไม่สูญเสียข้อมูลและให้ลิงก์เพื่อดาวน์โหลดรูปภาพขนาดเล็กกว่านี้

ตัวอย่างเช่น:

• การบีบอัด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 การบีบอัดแบบ Losslessly สามารถประหยัดได้ 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 การบีบอัดแบบLoss loss สามารถประหยัดได้ 61B (ลดลง 5%)

สิ่งนี้ใช้ได้กับทั้งไฟล์ JPG และ PNG (ฉันไม่ได้ทดสอบ GIF หรืออื่น ๆ )

หมายเหตุภาพขนาดย่อของ Flickr ด้วย (ภาพเหล่านั้นทั้งหมดคือ 75x75 พิกเซล) พวกมันประหยัดได้มาก ถ้านี่ยอดเยี่ยมจริงๆทำไม Yahoo ถึงไม่ใช้ฝั่งเซิร์ฟเวอร์นี้กับไลบรารีทั้งหมดของพวกเขาและลดการเก็บข้อมูลและแบนด์วิดท์

Stackoverflow.com ย่อมาจากการออมเล็กน้อย:

• http://sstatic.net/stackoverflow/img/sprites.png?v=3 การบีบอัดแบบ Losslessly สามารถบันทึก 1.7KiB (ลดลง 10%)
• http://sstatic.net/stackoverflow/img/tag-chrome.png การบีบอัดแบบ Losslessly สามารถประหยัด 11B (ลดลง 1%)

ฉันเคยเห็น PageSpeed ​​แนะนำการประหยัดที่เหมาะสมสำหรับไฟล์ PNG ที่ฉันสร้างขึ้นโดยใช้คุณสมบัติ 'Save for Web' ของ Photoshop

ดังนั้นคำถามของฉันคือพวกเขาทำอะไรกับการเปลี่ยนแปลงภาพเพื่อลดพวกเขามาก? ฉันเดาว่ามีคำตอบต่าง ๆ สำหรับประเภทไฟล์ที่แตกต่างกัน นี่เป็นไฟล์ที่ไม่สูญเสียไฟล์ 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ซึ่งใช้ในการแปลงเป็นรูปแบบที่เล็กที่สุด

ฉันใช้jpegoptimเพื่อเพิ่มประสิทธิภาพไฟล์ JPG และoptipngเพื่อเพิ่มประสิทธิภาพไฟล์ PNG

หากคุณเปิดbashใช้งานคำสั่งในการเพิ่มประสิทธิภาพ JPG ทั้งหมดในไดเรกทอรี (แบบเรียกซ้ำ) โดยไม่สูญเสียข้อมูลคือ:

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

คุณสามารถเพิ่ม-m[%]เพื่อjpegoptimที่จะ lossy ภาพ 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โปรดสังเกตว่าระดับการเพิ่มประสิทธิภาพที่สูงขึ้นหมายถึงเวลาในการประมวลผลที่ยาวนานขึ้น

ดูhttp://code.google.com/speed/page-speed/docs/payload.html#CompressImagesซึ่งอธิบายเทคนิค / เครื่องมือบางอย่าง

มันเป็นเรื่องของการแลกเปลี่ยนเวลาซีพียูของเครื่องเข้ารหัสเพื่อประสิทธิภาพในการบีบอัด การบีบอัดคือการค้นหาการรับรองที่สั้นกว่าและหากคุณค้นหาได้ยากขึ้นคุณจะพบการบีบอัดที่สั้นลง

นอกจากนี้ยังมีเรื่องของการใช้ความสามารถในการจัดรูปแบบภาพได้อย่างเต็มที่เช่น PNG8 + a แทน PNG24 + a ตาราง Huffman ที่ปรับให้เหมาะสมในรูปแบบ JPEG และอื่น ๆ

Photoshop ไม่ได้พยายามทำอย่างนั้นจริงๆเมื่อบันทึกรูปภาพสำหรับเว็บดังนั้นจึงไม่น่าแปลกใจที่เครื่องมือใด ๆ เต้น

ดู

• ImageOptim (lossless) และ
• ImageAlpha (lossy) สำหรับไฟล์ PNG ขนาดเล็ก ( คำอธิบายระดับสูงว่ามันทำงานอย่างไร ) และ
• JPEGmini / MozJPEG (สูญเสีย) สำหรับ JPEG คอมเพรสเซอร์ที่ดีขึ้น

วิธีจำลองผลลัพธ์การบีบอัด JPG ของ PageSpeed ​​ใน Windows:

ผมสามารถที่จะได้รับสิ่งผลการบีบอัดเช่นเดียวกับ PageSpeed ใช้ Windows รุ่นของ jpegtran ซึ่งคุณจะได้รับwww.jpegclub.org/jpegtran ฉันรันโปรแกรมปฏิบัติการโดยใช้ DOS prompt (ใช้ Start> CMD) เพื่อให้ได้ขนาดไฟล์เท่ากัน (ลงสู่ไบต์) เหมือนกับการบีบอัด PageSpeed ​​ฉันได้ระบุการเพิ่มประสิทธิภาพ Huffman ดังนี้:

jpegtran -optimize source_filename.jpg output_filename.jpg

สำหรับความช่วยเหลือเพิ่มเติมเกี่ยวกับตัวเลือกการบีบอัดที่พรอมต์คำสั่งเพียงพิมพ์: jpegtran

หรือใช้รูปภาพที่สร้างขึ้นอัตโนมัติจากแท็บ PageSpeed ​​ใน Firebug:

ฉันสามารถปฏิบัติตามคำแนะนำของ Pumbaa80 เพื่อเข้าถึงไฟล์ที่ได้รับการปรับปรุงของ PageSpeed หวังว่าภาพหน้าจอที่นี่จะให้ความชัดเจนมากขึ้นสำหรับสภาพแวดล้อมของ FireFox (แต่ฉันไม่สามารถเข้าถึงไฟล์ที่ปรับปรุงแล้วเหล่านี้ใน Chrome ได้)

และเพื่อล้างค่าชื่อไฟล์ Messy PageSpeed ​​โดยใช้ Adobe Bridge และนิพจน์ทั่วไป:

แม้ว่า PageSpeed ​​ใน FireFox สามารถสร้างไฟล์รูปภาพที่ปรับให้เหมาะกับฉันได้ แต่มันก็เปลี่ยนชื่อของพวกเขาให้เปลี่ยนชื่อแบบง่าย ๆ เช่น:

nice_picture.jpg

เข้าไป

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

ฉันค้นพบว่าสิ่งนี้ดูเหมือนจะเป็นคำร้องเรียนทั่วไป เนื่องจากฉันไม่ต้องการเปลี่ยนชื่อรูปภาพทั้งหมดด้วยมือฉันจึงใช้เครื่องมือเปลี่ยนชื่อของ Adobe Bridge พร้อมกับนิพจน์ทั่วไป คุณสามารถใช้คำสั่ง / เครื่องมือเปลี่ยนชื่ออื่นที่ยอมรับนิพจน์ปกติ แต่ฉันสงสัยว่า Adobe Bridge พร้อมใช้งานสำหรับพวกเราส่วนใหญ่ที่ทำงานกับปัญหา PageSpeed!

1. เริ่ม Adobe Bridge
2. เลือกไฟล์ทั้งหมด (โดยใช้การควบคุม A)
3. เลือกเครื่องมือ> เปลี่ยนชื่อแบทช์ (หรือควบคุม Shift R)
4. ในฟิลด์ที่ตั้งไว้ล่วงหน้าเลือก "การแทนที่สตริง" ฟิลด์ชื่อไฟล์ใหม่ควรแสดง“ การแทนที่สตริง” ตามด้วย "ชื่อไฟล์ดั้งเดิม"
5. เปิดใช้งานช่องทำเครื่องหมายที่ชื่อว่า“ Use Regular Expression”

6. ในฟิลด์“ ค้นหา” ป้อนนิพจน์ปกติ (ซึ่งจะเลือกอักขระทั้งหมดที่เริ่มต้นที่ตัวคั่นขีดล่างขวาสุด):

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

7. ในฟิลด์“ แทนที่ด้วย” ให้ป้อน:

   .jpg

8. หรือคลิกปุ่มดูตัวอย่างเพื่อดูผลลัพธ์การเปลี่ยนชื่อแบทช์ที่เสนอแล้วปิด

9. คลิกปุ่มเปลี่ยนชื่อ

โปรดทราบว่าหลังจากการประมวลผล Bridge ยกเลิกการเลือกไฟล์ที่ไม่ได้รับผลกระทบ หากคุณต้องการล้างไฟล์. png ทั้งหมดของคุณคุณต้องเลือกรูปภาพทั้งหมดใหม่และแก้ไขการกำหนดค่าด้านบน (สำหรับ "png" แทน "jpg") นอกจากนี้คุณยังสามารถบันทึกการกำหนดค่าข้างต้นเป็นค่าที่ตั้งล่วงหน้าเช่น "Clean PageSpeed ​​jpg Images" เพื่อให้คุณสามารถล้างชื่อไฟล์ได้อย่างรวดเร็วในอนาคต

ภาพหน้าจอการกำหนดค่า / การแก้ไขปัญหา

หากคุณมีปัญหาอาจเป็นไปได้ว่าเบราว์เซอร์บางตัวอาจแสดงนิพจน์ RegEx ด้านบนไม่ถูกต้อง (ตำหนิตัวละครของฉัน) สำหรับภาพหน้าจอของการกำหนดค่า (พร้อมกับคำแนะนำเหล่านี้) ดู:

วิธีการใช้เครื่องมือเปลี่ยนชื่อแบทช์ของ Adobe Bridge เพื่อล้างรูปภาพ PageSpeed ​​ที่ปรับปรุงประสิทธิภาพซึ่งมีชื่อไฟล์ยุ่ง

ในความคิดของตัวเลือกที่ดีที่สุดออกมีที่มีประสิทธิภาพจัดการรูปแบบภาพมากที่สุดในการเดินทางเป็น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 ในกรณีนี้เพียงแค่เขียน bash หรือ php script เพื่อทำสิ่งที่ชอบ

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

เปลี่ยนตัวเลือกเพื่อให้เหมาะกับความต้องการของคุณ

สำหรับ windows มีอินเทอร์เฟซ drag'n'drop หลายรายการเพื่อให้ง่าย

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

สำหรับไฟล์ PNG ฉันพบไฟล์นี้เพื่อความบันเทิงของฉันโดยเห็นได้ชัดว่ามีเครื่องมือต่าง ๆ 3 ห่ออยู่ใน GIU เพียงลากและวางและทำเพื่อคุณ

https://pnggauntlet.com/

ต้องใช้เวลาลองใช้การบีบอัดไฟล์ขนาด 1MB png - ฉันประหลาดใจมากที่ซีพียูเข้าสู่การเปรียบเทียบการบีบอัดนี้ซึ่งต้องเป็นสิ่งที่เกิดขึ้นที่นี่ ดูเหมือนว่าภาพจะถูกบีบอัด 100 วิธีและวิธีที่ดีที่สุดชนะ: D

เกี่ยวกับการบีบอัด JPG ฉันรู้สึกว่ามันเสี่ยงต่อการตัดโปรไฟล์สีและข้อมูลพิเศษทั้งหมด - อย่างไรก็ตาม - ถ้าทุกคนทำมัน - มันเป็นมาตรฐานธุรกิจดังนั้นฉันจึงทำเอง: D

ฉันบันทึก 113MB ใน 5500 ไฟล์ในการติดตั้ง WP วันนี้มันคุ้มค่าแน่นอน!