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