วันนี้เราจะมาพูดถึงหัวข้อที่ใกล้ตัวและโดนใจผมก็คือ การบีบอัดภาพ! ฉันล้อเล่นนะ แต่มีบางอย่างที่น่าพึงพอใจอย่างประหลาดเกี่ยวกับการลดขนาดไฟล์ภาพเป็นเปอร์เซ็นต์มหาศาลโดยไม่ลดคุณภาพลง

แรงบันดาลใจสำหรับโพสต์นี้มาจากโพสต์ยอดนิยมในกลุ่ม Facebook ของ Beaver Builders ฉันเพิ่งถ่ายวิดีโอสอนเกี่ยวกับการเปิดใช้งานและการใช้อัลกอริธึม Guetzli ใหม่ของ Google ใน ImageOptim และฉันก็ตกใจกับตัวเลือก อื่นๆ ทั้งหมดที่ฉันไม่เคยคุ้นเคยมาก่อน ในบทความนี้ เราจะพูดถึงเคล็ดลับและเครื่องมือในการบีบอัดรูปภาพสำหรับเว็บ

คำศัพท์เบื้องต้น

ก่อนที่เราจะเจาะลึก เรามาสร้างคำศัพท์ทั่วไปกันก่อน

JPEG, PNG, SVG – นี่คือไฟล์รูปภาพสามประเภทที่ได้รับความนิยมมากที่สุดบนเว็บ สำหรับบทช่วยสอนนี้ เราจะเน้นไปที่ JPEG และ PNG เป็นหลัก เนื่องจากพวกมันจะได้รับประโยชน์สูงสุดจากการบีบอัดและการเพิ่มประสิทธิภาพ

โดยปกติแล้ว JPEG จะเหมาะกับรูปภาพที่มีความเที่ยงตรงสูง เช่น รูปภาพและกราฟิกบนเว็บที่ไม่มีความโปร่งใส

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

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

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

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

ฉันควรบีบอัดรูปภาพมากแค่ไหน?

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

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

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

ตัวเลือกเครื่องมือการบีบอัดรูปภาพ

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

ImageOptim

ฉันเริ่มต้นด้วยและยังคงชอบ ImageOptim ImageOptim มีเฉพาะใน OSX เท่านั้น แต่รองรับการบีบอัดแบบ lossy และ lossless สำหรับทั้งไฟล์ JPEG และ PNG นอกจากนี้ยังสามารถกำหนดค่าให้ใช้อัลกอริธึมการบีบอัดที่ค่อนข้างใหม่ของ Google นั่นคือ Guetzli โดยเฉลี่ยแล้ว Guetzli สามารถลดขนาดไฟล์ได้มากกว่าอัลกอริธึมอื่นๆ ถึง 20-30%

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

Smush จาก WPMU Dev

Smush เป็นปลั๊กอิน WordPress ฟรีจาก WPMU Dev ที่สามารถกำหนดค่าเพื่อเพิ่มประสิทธิภาพรูปภาพที่มีอยู่ในการติดตั้ง WordPress ของคุณและ/หรือเมื่อคุณอัปโหลดไปยัง WordPress Smush นั้นยอดเยี่ยมเนื่องจากการยกของหนักทำได้โดยเซิร์ฟเวอร์ของ WPMU Dev และทั้งคู่ก็ปรับให้เหมาะสมและปรับขนาดรูปภาพ

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

TinyPNG

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

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

ลองนึกภาพ

Imagify เป็นอีกหนึ่งตัวเลือก SASS บนเว็บที่มีปลั๊กอิน WordPress เฉพาะเพื่อเพิ่มประสิทธิภาพและปรับขนาดรูปภาพเมื่อคุณอัปโหลดหรือโดยตรงจากพื้นที่ผู้ดูแลระบบ WordPress ปลั๊กอิน Imagify WordPress มีบทวิจารณ์เฉลี่ย 4.5 ดาวที่น่าประทับใจ และบทวิจารณ์จำนวนมากทราบว่าคุณภาพของภาพที่ได้ด้วย Imagify นั้นดีกว่าทางเลือกอื่น

Imagify มีแผนฟรีที่ให้คุณอัปโหลดและปรับแต่งรูปภาพที่มีขนาดต่ำกว่า 2mb รูปภาพในเวอร์ชันที่ได้รับการปรับปรุงแล้วจะยังพร้อมให้ดาวน์โหลดจากเซิร์ฟเวอร์เป็นเวลา 24 ชั่วโมง

JPEGมินิ

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

ชอร์ตพิกเซล

ShortPixel เป็นอีกหนึ่ง SASS บนเว็บ หากคุณต้องการถ่ายโอนการบีบอัดรูปภาพไปยังเซิร์ฟเวอร์คลาวด์ นี่เป็นตัวเลือกที่ยอดเยี่ยม ลองดู แผนฟรีของพวกเขาช่วยให้คุณปรับแต่งภาพได้สูงสุด 100 ภาพต่อเดือน และมีแผนระดับพรีเมียมเริ่มต้นที่ $5 ต่อเดือนสำหรับข้อมูลเพิ่มเติม ShortPixel ยังมีปลั๊กอิน WordPress และเป็นปลั๊กอินยอดนิยมในหมู่ทีม BB ที่เหลือ

ลองนึกภาพ

คุณชอบอะไร?

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

นอกจากนี้ หากคุณเป็นคนประเภทที่กิน นอน และหายใจขณะแสดง การสัมภาษณ์จอน บราวน์เกี่ยวกับแนวทางปฏิบัติที่ดีที่สุดในการแสดงสมัยใหม่น่าจะดึงดูดใจคุณ