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

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

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

ถึงแม้กระบวนการนี้อาจฟังดูซับซ้อน แต่การใช้งานก็ไม่สามารถทำได้ง่ายกว่ามากนัก สำหรับ Cloudential การเพิ่ม 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 ของเอลิเมนต์ <picture> <source>

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

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

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

อินเทอร์เฟซผู้ใช้ CDN

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

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