วิธีการบีบอัดภาพ: คู่มือนักออกแบบเว็บไซต์

Sep 16, 2025

วิธีการ

ความเร็วเฉลี่ยของการเชื่อมต่ออินเทอร์เน็ตสมัยใหม่จะฟังดูน่ากลัวสำหรับนักเว็บที่ผ่านมาในอดีต ย้อนกลับไปในวันแรก ๆ ของเว็บจำนวนข้อมูลที่ถ่ายโอนเป็นสิ่งสำคัญทั้งในแง่ของเวลาและค่าใช้จ่ายดังนั้นทุกคนที่เกี่ยวข้องกับการโฮสต์บางสิ่งบางอย่างออนไลน์พยายามทำให้ภาพเล็กลง

กระแทกแดกดันปัญหายังไม่ได้หายไปในปัจจุบัน ทุกครั้งที่คุณเยี่ยมชมเว็บไซต์สคริปต์หนัก (เช่นข่าวโลกหลัก) มันมักจะดึงเมกะไบต์โหลของรหัส JavaScript รูปภาพวิดีโอและ Whatnot มันอาจจะช้าลงอย่างเจ็บปวดและแม้กระทั่งค่าใช้จ่าย Penny สวยสำหรับผู้ใช้ข้อมูลมือถือบางราย (สิ่งนี้ไม่ควรเป็นปัญหาหากคุณใช้งานที่ดี สร้างเว็บไซต์ , และดี เว็บโฮสติ้ง ควรจับตามองให้คุณ)

ในบทช่วยสอนนี้เราจะหาวิธีที่คุณสามารถทำให้ไฟล์บิตแมปผอมลงสำหรับเว็บได้ ตราบใดที่มันใช้รูปแบบ PNG และ JPEG เก่าที่ดี (ดูเพิ่มเติมเกี่ยวกับ รูปแบบไฟล์รูปภาพ ที่นี่และให้แน่ใจว่าได้บันทึกไฟล์ของคุณในด้านขวา การจัดเก็บเมฆ เช่นกัน) เราจะดูว่าเราสามารถทำให้พวกเขาเล็กลงได้อย่างไรโดยไม่ลดทอนคุณภาพโดยใช้ความร้อน โครงการโอเพ่นซอร์ส . ในท้ายที่สุดเราจะมีไฟล์ที่เล็กลงอย่างมีนัยสำคัญที่จะยังคงดูดี แต่ต้องใช้เวลาและข้อมูลน้อยลงในการแสดงผลในเว็บเบราว์เซอร์ของผู้ใช้

อ่านเพื่อดำดิ่งสู่รายละเอียด ก่อนอื่นบันทึกย่อของซอฟต์แวร์ เครื่องมือทั้งหมดที่กล่าวถึงที่นี่คือ Open Source - ข้ามไปที่ด้านล่างเพื่อเป็นแนวทางในการ วิธีการรับซอฟต์แวร์ คุณต้องการ.

ธีมพอร์ตโฟลิโอ WordPress ที่ดีที่สุด

เลือกรูปแบบที่เหมาะสม

มันอาจฟังดูเล็กน้อยที่จะยังคงอยู่ในขนาดไฟล์ แต่ยังมีตัวอย่างเพียงพอที่ภาพมีขนาดใหญ่เกินไปโดยไม่มีวัตถุประสงค์หรือดูแย่มากแม้จะมีขนาดเล็ก เพื่อหลีกเลี่ยงข้อผิดพลาดดังกล่าวให้เลือกรูปแบบเพื่อบันทึกหรือแปลงภาพอย่างชาญฉลาด การใช้ JPEG หมายถึงการทำลายภาพเป็นกระเบื้อง 8x8 พิกเซลที่แต่ละกระเบื้องถูกบีบอัด ระดับการบีบอัดขึ้นอยู่กับผู้ใช้ (เป็นตัวเลื่อนนั้นเมื่อคุณบันทึกภาพ) แต่โดยทั่วไปแล้ว JPEG จะอนุญาตให้มีขนาดไฟล์ 10: 1 ได้รับการสูญเสียคุณภาพที่ยอมรับได้

ความแตกต่างของการรับรู้ระหว่างไฟล์ JPEG ที่ทำจากอัตราส่วนการบีบอัดสูง (80-100) และต่ำ (40-60) ต่ำน้อยที่สุดสำหรับภาพถ่ายภาพ แต่เห็นได้ชัดเจนมากสำหรับสิ่งต่าง ๆ เช่นงานศิลปะดิจิทัลไอคอนและภาพหน้าจอ ดังนั้นจึงแนะนำให้เลือก JPEG สำหรับภาพถ่ายและไปกับสิ่งอื่นสำหรับภาพบิตแมปประเภทอื่น ๆ

PNG เป็นหนึ่งในรูปแบบที่เหมาะสมที่สุดสำหรับกราฟิกเครือข่าย (จริงนั่นคือสิ่งที่ตัวย่อหมายถึง) ในขณะที่รูปแบบ JPEG มักจะสูญเสีย (แม้จะมีชุดคุณภาพถึง 100) รูปแบบ PNG อาจสูญเสียหรือไม่ ยิ่งไปกว่านั้นแม้ในขณะที่มันเป็นข้อมูลบีบอัดโดยการลดจำนวนสีที่ใช้ในภาพเพื่อให้ผลลัพธ์ทั่วไปยังคงดูกรอบและชัดเจน ดังนั้นเลือก PNG สำหรับการแสดงหน้าจอหรือรูปภาพประเภทอื่น ๆ ที่มีการเติมทึบ

เริ่มต้นด้วยวิธีการที่สะดวก

Imagine is based on Electron and provides a friendly interface for processing several images at once — ลองนึกภาพอยู่บนพื้นฐานของอิเล็กตรอนและให้ส่วนต่อประสานที่เป็นมิตรสำหรับการประมวลผลภาพหลายภาพในครั้งเดียว

การเพิ่มประสิทธิภาพไฟล์บิตแมปเป็นไปได้ด้วยเครื่องมือฟรีแวร์มากมายดังนั้นคุณจึงไม่ต้องพึ่งพาโปรแกรมแก้ไขภาพที่เต็มเปี่ยม ลองนึกภาพเป็นแอปพลิเคชั่นดังกล่าวและใช้งานง่ายอย่างไม่น่าเชื่อ เพียงลากภาพ (หรือสแต็กของภาพ) เหนือหน้าต่างจินตนาการและใช้สไลด์เล็ก ๆ เพื่อปรับอัตราส่วนการบีบอัด

ลองนึกภาพทำงานกับไฟล์ JPEG, PNG และ WebP และเหมาะสำหรับการเข้ารหัสที่สูญเสีย ข้อได้เปรียบที่ใหญ่ที่สุดคือเครื่องมือที่มีการโต้ตอบ มันแสดงให้คุณเห็นว่าภาพจะดูด้วยการตั้งค่าปัจจุบันอย่างไรและแสดงขนาดไฟล์ที่เสนอ ลองนึกภาพใช้งานได้ดีสำหรับการประมวลผลแบทช์ - อย่างน้อยก็สามารถบันทึกภาพที่เปิดทั้งหมดได้ในครั้งเดียวหากคุณต้องการ

ไม่จำเป็นต้องพูดมีหลายสิบถ้าไม่ใช่หลายร้อยของ JPEG และ PNG Optimisers อื่น ๆ รวมถึงบริการออนไลน์ที่มีประโยชน์ (เช่น tinyjpg . แต่อย่ารีบร้อน - เรามีบางสิ่งที่ดีกว่าแขนเสื้อของเรา

เทคนิคการบีบอัดขั้นสูง

For JPEG, we used a test photo of a straw hat on a blurred background; Guetzli reduced file size by 33 per cent and Lepton by another 23 per cent — สำหรับ JPEG เราใช้รูปถ่ายของหมวกฟางบนพื้นหลังเบลอ Guetzli ลดขนาดไฟล์ 33% และ Lepton อีก 23 เปอร์เซ็นต์

ตั้งแต่แรกเห็นดูเหมือนว่าเราไม่สามารถกัดขนาดไฟล์ JPEG ที่สูญเสียได้มากขึ้นสิ่งที่สามารถพิสูจน์ได้ทันทีโดยความพยายามที่ไร้ประโยชน์ในการเก็บถาวรภาพเพิ่มเติมโดยใช้ซิปหรือเทคนิคการบีบอัดอื่น ๆ แต่ที่นี่มา Guetzli, คุกกี้สวิสสมาร์ทและตัวเข้ารหัสการรับรู้ที่ซับซ้อนสำหรับ JPEG

Guetzli ทำให้ JPEG เฉลี่ยมีขนาดเล็กลง 20 ถึง 30 เปอร์เซ็นต์โดยการเพิ่มความหนาแน่นของการบีบอัด ความลับคืออัลกอริทึมตระหนักถึงวิธีที่มนุษย์รับรู้ถึงสิ่งที่พวกเขาเห็นดังนั้นภาพที่เกิดขึ้นยังคงดูดีต่อสายตา Guetzli เป็นเครื่องมือบรรทัดคำสั่งข้ามแพลตฟอร์มซึ่งใช้ไวยากรณ์ต่อไปนี้:

guetzli [--quality Q] [--verbose] original_image output_jpeg_image

ภาพต้นฉบับสามารถเป็น PNG หรือ JPEG ในขณะที่เอาต์พุตเป็น JPEG เสมอ ดังนั้นคุณสามารถใช้ GuETZLI เพื่อแปลง PNG เป็น JPEG ด้วยการบีบอัดที่ล้ำสมัย คุณภาพควรตกอยู่ระหว่าง 0-100 Guetzli เป็นซอฟต์แวร์ทรัพยากรที่หนักหน่วงอย่างไม่น่าเชื่อ มันใช้หน่วยความจำเกือบ 300MB ต่อ 1 ล้านพิกเซลและยังมีพลังงาน CPU จำนวนมาก เราหวังว่า JPEGS ที่ปรับให้เหมาะสมที่สุดของคุณจะไม่เพิ่มภาวะโลกร้อน ...

กราฟิกเครือข่ายแบบพกพาเป็นเรื่องราวที่แตกต่างกันตราบใดที่มันถูกออกแบบมาสำหรับการเข้ารหัสภาพที่ไม่มีการสูญเสีย เมื่อคุณบันทึกภาพเป็น PNG ในโปรแกรมแก้ไขรูปภาพเช่น GIMP คุณมีสไลเดอร์อัตราส่วนการบีบอัดที่มีค่าตั้งแต่ 0 ถึง 9 ที่นี่ 0 หมายถึงการบีบอัดและทำให้ภาพมีน้ำหนักราวกับว่าได้รับการบันทึกเป็น TIFF ในทางตรงกันข้าม 9 แถบออกไปส่วนใหญ่ของข้อมูลสีที่ไม่จำเป็นและผลลัพธ์ในไฟล์ที่มีขนาดเล็กกว่า TIFF 15-20 เท่า

เวลานี้เราจะพยายามสร้างไฟล์ PNG ขนาดเล็กแล้ว (ด้วยอัตราส่วน 9) แม้แต่น้อย เพื่อจุดประสงค์นี้เราจะใช้ ZopfLi เครื่องมือโอเพนซอร์ซอื่นที่มีรากฐานอีกครั้งใน Google Labs Zopfli เป็นคอมเพรสเซอร์คุณภาพสูงสำหรับการเข้ารหัสข้อมูล GZIP และ ZLIB

ส่วนที่น่าสนใจคือ Zopfli มีตัวเข้ารหัสสองตัวในหนึ่งมัด: ไบนารีวัตถุประสงค์ทั่วไปและเครื่องมือ 'zopflipng' เฉพาะ หลังเป็นสิ่งที่เราต้องการ! ZopFlipng เป็นตัวเข้ารหัสที่ใช้งานที่ยุบตามอัลกอริทึมบางอย่างได้รับการสนับสนุนจากรูปแบบ WebP มันฉลาดพอที่จะเลือกกลยุทธ์ที่ดีที่สุดโดยอัตโนมัติโดยใช้รหัส Scanline และลบชิ้นส่วนต่าง ๆ ที่ไม่จำเป็นภายใน PNG ใช้กับไวยากรณ์ง่ายๆนี้:

zopflipng original_png output_png

Zopflipng อาจทำงานได้ดียิ่งขึ้นด้วยตัวเลือกที่ชัดเจนต่อไปนี้:

 zopflipng-ierations = 500 - Filterers = 01234Mepb --lossy_8bit --lossy_transparent Original_png
เอาท์พุท _png

ราคาที่คุณจ่ายเหมือนกันกับ Guetzli: เครื่องมือใช้เวลามากในการประมวลผลภาพโดยเฉพาะถ้ามีขนาดใหญ่ ยิ่งมีการใช้ซ้ำมากเท่าใดก็ยิ่งใช้เวลานานเท่าไหร่ แต่ 500 เป็นจำนวนที่เหมาะสม ขนาดไฟล์ได้รับกับ Zopfli อยู่ระหว่าง 8 ถึง 20 เปอร์เซ็นต์ซึ่งเป็นสิ่งที่ดีมากสำหรับภาพที่สมบูรณ์แบบ โดยสรุปการได้รับ 8 เปอร์เซ็นต์เป็นเรื่องปกติสำหรับสกรีนช็อตในขณะที่ 20 เปอร์เซ็นต์เป็นไปได้ด้วยภาพถ่าย (เมื่อคุณต้องการเก็บไว้เป็น PNG)

อัปเกรดเป็นรูปแบบไฟล์ถัดไป

The test PNG image was an ordinary 1920x1080 screenshot; consequent compression by Zopflipng and then FLIF gained 14 per cent without reducing the number of colours — ภาพทดสอบ PNG เป็นภาพหน้าจอของ 1920x1080 สามัญ การบีบอัดที่เกิดจาก Zopflipng จากนั้น FLIF ได้รับ 14 เปอร์เซ็นต์โดยไม่ลดจำนวนสี

อย่างเป็นทางการส่วนนี้จะเกินขอบเขตของ PNG และ JPEG แต่มันใช้งานได้จริงมากเนื่องจากคุณสามารถจัดระเบียบการแปลงไฟล์ได้ในทันที สิ่งที่เราหมายถึงที่นี่คือการใช้รูปแบบภาพทางเลือกและรูปใหม่ที่มีประสิทธิภาพสูงกว่ามาตรฐานอุตสาหกรรมที่ดีที่สุด (อ่าน WebP)

หนึ่งคือ FLIF รูปแบบภาพที่ไม่สูญเสียใหม่ตาม Maniac (Meta-Adaptive Near-Adaptive Integer Irithmetic Coding) วิธีการบีบอัดซึ่งสามารถดับ PNG, FFV1, Lossless Webp, BPG ที่ไม่สูญเสียและ lossless jpeg 2000 ในแง่ของอัตราส่วนการบีบอัด FLIF มีให้สำหรับทุกแพลตฟอร์มและผู้ชมรูปภาพบางตัวสนับสนุนแล้ว แต่มันมีวิธีที่ยาวกว่าที่จะไปถึงกระแสหลัก ตอนนี้มันเหมาะสมกับการใช้ FLIF สำหรับการจัดเก็บหรือบนฝั่งเซิร์ฟเวอร์ มันสามารถทำหน้าที่เหมือนรูปแบบการเก็บถาวรที่มีประสิทธิภาพ คุณจะต้องคว้ารหัสจากหน้า GitHub ของโครงการและรวบรวม เมื่อคุณมี flif การติดตั้งไบนารีใช้คำสั่งต่อไปนี้เพื่อเข้ารหัสภาพ PNG:

 flif -e Original_png output_flif

แทนที่ - ด้วย -D และใส่ไฟล์ในลำดับย้อนกลับไปที่ 'บีบอัด' ภาพของคุณกลับไปที่ PNG ในแง่ของเครื่องมือตอนนี้มีองค์ประกอบ FLIF WIC API สำหรับ Windows ปลั๊กอิน QT FLIF สำหรับ Linux และ Phew Image Viewer และปลั๊กอิน QuickLook สำหรับ MacOS (ดูส่วนลิงค์สำหรับรายละเอียด) เมื่อเทียบกับภาพที่ถูกทรมานก่อนหน้านี้โดย Zopflipng FLIF ช่วยลดขนาดไฟล์ของมันลงอีกประมาณ 10 เปอร์เซ็นต์ ผลลัพธ์ที่น่าประทับใจ!

ฮีโร่ตัวสุดท้ายของเราคือ Lepton รูปแบบโอเพ่นซอร์สอื่นที่เผยแพร่อย่างไม่เห็นแก่ตัวโดยนักพัฒนา Dropbox Lepton ทำกับ JPEG สิ่งที่ flif ทำกับ png Lepton สามารถผอมลง JPEG ได้มากถึง 22 เปอร์เซ็นต์ในโหมด Lossless ซึ่งหมายความว่าการเข้ารหัสไม่ทำให้สูญเสียคุณภาพเมื่อเทียบกับไฟล์ JPEG ดั้งเดิม ภายใต้ประทุน Lepton หมายถึงเทคนิคสมาร์ทของการบีบอัดบล็อก JPEG 8x8 เหล่านั้น แทนที่จะเขียนศูนย์และวัตถุ lepton เข้ารหัสข้อมูลบิตแมปโดยใช้ VP8 arithmetic coder ซึ่งเคารพบริบทรอบแต่ละบล็อก

การทดสอบของเราพิสูจน์แล้วว่า Lepton มีประสิทธิภาพและรวดเร็วมาก คำสั่งดูเหมือนดังต่อไปนี้:

 เอาต์พุต Lepton Original.jpg.lep

และในหนึ่งหรือสองเครื่องมือที่ผลิตไฟล์. lep ที่มีขนาดเล็กลงเกือบหนึ่งในสี่ของต้นฉบับ เมื่อเทียบกับ Guetzli ที่ใช้เวลานาน Lepton ได้อย่างรวดเร็ว คุณสามารถใช้ Lepton วิธีเดียวกัน Dropbox ทำ รูปแบบนี้ช่วยให้คุณลดต้นทุนการจัดเก็บได้ 20 ถึง 25 เปอร์เซ็นต์และเนื่องจากเป็นเรื่องที่รวดเร็วคุณสามารถทำลำดับการเข้ารหัส / การถอดรหัสที่บินได้โดยไม่มีข้อเสียเปรียบที่สำคัญ โดยวิธีการที่คำสั่งการถอดรหัสนั้นง่ายพอ ๆ กันเพียงแค่ต้องสลับสองไฟล์และไฟล์ผลลัพธ์ที่เหมือนกันกับ JPEG ดั้งเดิม:

 Lepton Original.lep เอาต์พุต.jpg

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

วิธีการรับซอฟต์แวร์

ซอฟต์แวร์ทุกชิ้นที่อธิบายไว้ในบทช่วยสอนนี้คือโอเพ่นซอร์สเพื่อให้คุณสามารถใช้มันได้อย่างอิสระ ไม่จำเป็นต้องรำคาญทุกอย่างจากแหล่งที่มาเนื่องจากเครื่องมือส่วนใหญ่ด้านล่างมีการดาวน์โหลดไบนารี นี่คือวิธีการรับซอฟต์แวร์ขึ้นและทำงาน

คว้าไบนารี Guetzli ที่นี่ . มันเป็นสิ่งที่ง่ายที่สุดที่จะทำ Zopfli ให้รหัสเท่านั้น (สร้างด้วย 'ทำ') ที่ github . อย่างไรก็ตามมันอาจจะฉลาดสำหรับคุณที่จะได้รับมันผ่าน Node.js Package Manager:

  npm ติดตั้ง node-zopfli

ลิงค์ที่เป็นประโยชน์สำหรับ FLIF:

flif-hub : การนำไปใช้อ้างอิงแหล่งข้อมูลและหน้าต่างไบนารี
xnview mp : โปรแกรมดูภาพถ่ายข้ามแพลตฟอร์มที่มีการสนับสนุน FLIF ในตัว
QT-FLIF-Plugin : สวรรค์สำหรับผู้ใช้ Linux
วุ้ย : โปรแกรมดูและปลั๊กอิน QuickLook สำหรับ MacOS
Lepton : ซอร์สโค้ดและไบนารี Windows

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 316 ของ สุทธิ นิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา ซื้อปัญหา 316 ที่นี่ หรือ สมัครสมาชิกที่นี่ .

บทความที่เกี่ยวข้อง:

คู่มือที่ดีที่สุดในการแก้ไขภาพ
วิธีการสร้างข้อความความผิดพลาดและเอฟเฟกต์ภาพใน CSS
คู่มือนักออกแบบเพื่อใช้ภาพได้อย่างมีประสิทธิภาพยิ่งขึ้น
เคล็ดลับการเพิ่มประสิทธิภาพภาพที่สำคัญ 4 ฉบับ

วิธีการบีบอัดภาพ: คู่มือนักออกแบบเว็บไซต์

เลือกรูปแบบที่เหมาะสม

เริ่มต้นด้วยวิธีการที่สะดวก

เทคนิคการบีบอัดขั้นสูง

อัปเกรดเป็นรูปแบบไฟล์ถัดไป

วิธีการรับซอฟต์แวร์

วิธีการ - บทความยอดนิยม

ใช้ Adobe XD เพื่อสร้างปฏิสัมพันธ์แบบไมโคร

ใช้ Brain.js เพื่อสร้างเครือข่ายประสาทเทียม

วิธีการสร้างแอปแดชบอร์ดที่มีปฏิกิริยา

ฝึกฝนวิทยาศาสตร์ของการเพิ่มประสิทธิภาพอัตราการแปลง

ออกแบบเว็บไซต์ตอบสนองด้วยการปรับขนาดที่ใช้ EM

สร้างโปสเตอร์จากเทมเพลตใน Photoshop

วิธีรับมากขึ้นจากพื้นผิวดิจิตอล

10 Top Houdini Tutorials

หมวดหมู่