การเพิ่มประสิทธิภาพ JPEG สำหรับเว็บ - คู่มือขั้นสูง

พบการบีบอัดภาพในทุกรูปแบบสื่อดั้งเดิม อย่างไรก็ตามความแตกต่างระหว่าง GIF, PNG และ JPEG คือ อย่างไร ข้อมูลถูกบีบอัดและแสดงผลบนหน้าจอ มีเคล็ดลับมากมายสำหรับการเขียนสื่อภาพที่ยอดเยี่ยมที่เผยแพร่บนเว็บ แต่นักออกแบบหลายคนยังไม่เข้าใจพื้นฐานบางอย่าง.

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

หลีกเลี่ยงการประหยัดที่ 100% เสมอ

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

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

• ต่ำ - 10%
• กลาง - 30%
• สูง - 60%
• สูงมาก - 80%
• สูงสุด - 100%

แม้ใน Adobe Photoshop คุณภาพของภาพ 60% ก็ถือว่า 'สูง' นักพัฒนาเว็บหลายคนจะรับรองระหว่าง 50% - 70% เป็นช่วงที่ปลอดภัยที่จะใช้.

ต่ำแค่ไหนต่ำเกินไป?

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

ฉันจะยืนยันว่าต่ำกว่า 30% คุณกำลังตัดคุณภาพของภาพพื้นฐาน นักออกแบบคนอื่นจะสาบาน 50% ในฐานะ “จำกัด” เพื่อลดค่าที่ดีที่สุด แต่คำแนะนำที่ดีที่สุดที่นี่คือลองการตั้งค่าที่แตกต่างกันและดูว่าอะไรที่ดูดีที่สุด! คุณไม่ผิดไปเลยกับการศึกษาทดสอบสองสามครั้งเพื่อปรับแต่งภาพ JPEG สำหรับเว็บ.

ตัวเลือกการบีบอัด

ก่อนอื่นเราควรจะอธิบายถึงคำสองคำว่า 'การบีบอัด' และ 'คุณภาพ' ซึ่งเป็นสิ่งที่ตรงกันข้ามกัน ซึ่งหมายความว่าหากคุณบันทึก JPEG ที่การบีบอัด 40% คุณจะได้รับคุณภาพ 60% (เมื่อเทียบกับคุณภาพสูงสุด 100% ที่ไม่มีการบีบอัด).

นี่เป็นตัวเลือกพื้นฐานที่สุดในการใช้งาน - และควรเพียงพอเมื่อบันทึกสำหรับเว็บ ผู้ใช้ทั่วไปไม่ได้รับการปรับแต่งที่ลึกซึ้งยิ่งขึ้น Subsampling เป็นเรื่องที่ซับซ้อนมากขึ้นเมื่อคุณแปลงภาพ RGB เป็น YCbCr (ความสว่าง, Chroma Blue, Chroma Red).

(ที่มาของภาพ: Kara Monroe)

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

(ที่มาของภาพ: Derek Hatfield)

ในฐานะที่เป็นบันทึกย่อด้านที่น่าสนใจ Adobe Photoshop ไม่ได้ใช้ประโยชน์จากชุดย่อยสำหรับการบีบอัดเสมอไป ภาพใด ๆ ที่บันทึกผ่านทาง “บันทึกสำหรับเว็บ” กล่องโต้ตอบจะใช้การสุ่มตัวอย่าง Chroma ต่ำกว่าค่าคุณภาพ 50%.

สื่อเว็บที่ต่างกัน

เว็บยังเต็มไปด้วยสื่อภาพประเภทต่าง ๆ คุณสามารถมีรูปถ่ายไอคอนปุ่มป้ายและกราฟิกอื่น ๆ มากมาย แต่เป็นเรื่องที่น่าสังเกตว่าการเปรียบเทียบคุณภาพระหว่างปุ่มและภาพถ่ายนั้นไม่สมเหตุสมผล.

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

การวางแผนรูปแบบกราฟิก

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

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

อีกหนึ่งเครื่องมือที่น่าลองใช้คือ Yahoo! Smush.it เป็นแอปพลิเคชันบนเว็บที่ใช้เบราว์เซอร์ที่คุณสามารถอัปโหลดรูปภาพและ Smush.it จะลบไบต์พิเศษที่ไม่จำเป็นทั้งหมดออกเพื่อเพิ่มขนาดไฟล์ มันไร้ความสูญเสีย 100% หมายความว่าคุณภาพของภาพจะไม่ลดลงเลย และยิ่งกว่านั้นคุณสามารถอัปโหลดภาพจาก URL โดยตรงหากคุณมีภาพเหล่านั้นโฮสต์ไว้ในเว็บไซต์ของคุณหรือเซิร์ฟเวอร์บุคคลที่สาม.

เครื่องมือเพิ่มเติม

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

IrfanView

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

สิ่งที่ดียิ่งกว่าคือการสนับสนุนปลั๊กอินจากนักพัฒนาบุคคลที่สาม ตัวอย่างหนึ่งคือ RIOT (Radical Image Optimization Tool) ปลั๊กอินนี้ทำงานกับโปรแกรมแก้ไขกราฟิกโอเพนซอร์สอื่นที่คล้ายคลึงกันเช่น GIMP มันมีมุมมองภาพคู่ที่คุณสามารถปรับพารามิเตอร์การบีบอัดสำหรับแต่ละภาพของคุณ.

การสนับสนุนซอฟต์แวร์นั้นยอดเยี่ยมและคุณสมบัติ RIOT นั้นใช้งานง่ายมาก นอกจากการบีบอัดรูปภาพแล้วคุณยังสามารถลบข้อมูลเมตาเพิ่มเติมเช่น EXIF ​​และ Adobe XMP บิตข้อมูลพิเศษเหล่านี้สามารถเพิ่มลงในขนาดไฟล์ทั้งหมดของคุณเท่านั้นและไม่ค่อยจำเป็น.

ImageOptim สำหรับ Mac

หากคุณใช้งาน OS X และต้องการแอปการบีบอัดที่ทรงพลังแล้วไม่ต้องมองหาที่อื่นอีก ImageOptim เป็นเครื่องมือที่มีประสิทธิภาพในการบีบอัดภาพสำหรับเว็บ - ในบางครั้งดีกว่า Photoshop.

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

มีปัญหาเล็กน้อยเกี่ยวกับการปล่อยเสถียร 1.3.3 ล่าสุดในการเรนเดอร์ภาพ JPEG แบบพิกเซลใน Opera ลองตรวจสอบภาพที่ปรับให้เหมาะสมทั้งหมดของคุณในเบราว์เซอร์หลัก ๆ 4 อัน ได้แก่ Chrome, Safari, Firefox และ Opera (และอาจ IE) หากมีสิ่งใดที่บิดเบือนคุณสามารถลองดาวน์โหลด ImageOptim 1.3.0 ซึ่งจะแปลงไฟล์ให้สะอาดกว่าเล็กน้อย.

ทรัพยากรที่มีประโยชน์

• JPEG 101: คู่มือหลักสูตร Crash บน JPEG
• การตั้งค่าการบีบอัดที่ถูกต้องเพื่อบันทึกภาพ JPG สำหรับ WordPress
• เทคนิคการเพิ่มประสิทธิภาพ JPEG ที่ชาญฉลาด
• วิธีปรับภาพ JPEG ให้เหมาะสมสำหรับเว็บไซต์
• ทุกสิ่งที่คุณต้องการรู้เกี่ยวกับการบีบอัดภาพ

ข้อสรุป

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

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