เครือข่ายนำส่งเนื้อหารูปภาพ

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

CDN รูปภาพให้ประโยชน์ทั้งหมดนี้โดยมีข้อแตกต่างหลักอย่างหนึ่งคือ ความสามารถในการเปลี่ยนรูปแบบและเพิ่มประสิทธิภาพเนื้อหาของรูปภาพตามสตริงที่ URL ที่ใช้เข้าถึง

ผู้ใช้จะอัปโหลดรูปภาพความละเอียดสูงตามรูปแบบบัญญัติไปยังผู้ให้บริการ ซึ่งจะสร้าง URL ที่ใช้เข้าถึง

https://res.cloudinary.com/demo/image/upload/sample.jpg

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

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

<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">

ครั้งแรกที่ผู้ใช้เข้าชม URL ที่มีการเปลี่ยนรูปแบบเหล่านี้ จะมีการสร้างและส่งรูปภาพเวอร์ชันใหม่ที่มีอัตราส่วนความกว้างเป็น 400 พิกเซล (w_400) ตามสัดส่วน จากนั้นระบบจะแคชไฟล์ที่สร้างขึ้นใหม่นั้นใน CDN เพื่อส่งไปยังผู้ใช้รายใดก็ได้ที่ขอ URL เดียวกันแทนการสร้างขึ้นใหม่ตามคำขอ

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

<img
  src="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w"
  srcset="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w,
        https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg 800w,
        https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg 600w"
  alt="…">

เราระบุระดับการบีบอัดที่ต้องการได้ด้วยตนเองโดยใช้ไวยากรณ์ที่คุ้นเคยดังนี้ q_ ย่อมาจาก "คุณภาพ" ตามด้วยตัวเลขชวเลขสำหรับระดับการบีบอัด

<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg"  alt="…">

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

การบีบอัดอัตโนมัติ

CDN ของรูปภาพที่ใช้ในการประมวลผลมีศักยภาพมากมาย ช่วยให้สามารถนำเสนอคุณลักษณะที่ทรงประสิทธิภาพอย่างไม่น่าเชื่อ: การวิเคราะห์เนื้อหาของรูปภาพเพื่อกำหนดระดับการบีบอัดและการตั้งค่าการเข้ารหัสที่เหมาะสมตามหลักอัลกอริทึม เช่นเดียวกับคุณหรือฉันจะปรับแต่งการบีบอัดสำหรับรูปภาพแต่ละภาพของเราด้วยตนเอง

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

กระบวนการอาจฟังดูซับซ้อนเช่นนี้ แต่การติดตั้งใช้งานก็ทำได้ยากขึ้นมาก โดยสำหรับ Cloudinary นั้น การเพิ่ม q_auto ใน URL รูปภาพจะเป็นการเปิดใช้ฟีเจอร์ต่อไปนี้

<img src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg" alt="…">
<!-- 250 KB-->

<img src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg" alt="…">
<!-- 134 KB-->

การเข้ารหัสอัตโนมัติและการเจรจาเนื้อหา

เมื่อได้รับคำขอรูปภาพ CDN ของรูปภาพจะระบุการเข้ารหัสที่ทันสมัยที่สุดที่เบราว์เซอร์รองรับผ่านส่วนหัว HTTP ที่เบราว์เซอร์ส่งไปพร้อมกับคำขอเนื้อหา โดยเฉพาะส่วนหัว Accept ส่วนหัวนี้ระบุการเข้ารหัสที่เบราว์เซอร์เข้าใจได้ โดยใช้ประเภทสื่อเดียวกันกับที่เราใช้เพื่อสร้างแอตทริบิวต์ type สำหรับ <source> ขององค์ประกอบ <picture>

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

<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">

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

ผลลัพธ์ที่ได้คือกระบวนการที่ไม่เพียงช่วยให้คุณสร้างไฟล์ที่เข้ารหัสแบบทางเลือกและปรับการตั้งค่าการบีบอัดด้วยตนเอง (หรือดูแลรักษาระบบที่ทำหน้าที่เหล่านี้ให้คุณ) เท่านั้น แต่ไม่จำเป็นต้องใช้ <picture> และแอตทริบิวต์ type ในการส่งไฟล์เหล่านั้นให้กับผู้ใช้อย่างมีประสิทธิภาพ ดังนั้น การใช้ไวยากรณ์ srcset และ sizes เพียงอย่างเดียวยังช่วยมอบรูปภาพที่เข้ารหัสให้กับผู้ใช้ได้ เช่น AVIF, กลับไปใช้ WebP (หรือ JPEG-2000 สำหรับ Safari เพียงอย่างเดียว) และกลับไปใช้การเข้ารหัสแบบเดิมที่เหมาะสมที่สุด

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