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