เครือข่ายนำส่งข้อมูลรูปภาพ (CDN) เพิ่มประสิทธิภาพรูปภาพสำหรับเว็บได้อย่างดีเยี่ยม การเปลี่ยนเว็บไซต์เป็น CDN สำหรับรูปภาพจะช่วยประหยัดขนาดไฟล์รูปภาพได้ 40–80% และในกรณีส่วนใหญ่ รูปแบบเหล่านี้สามารถเพิ่มประสิทธิภาพรูปภาพได้ดีกว่าสคริปต์เพิ่มประสิทธิภาพรูปภาพสำหรับเวลาที่สร้าง
CDN ของรูปภาพคืออะไร
CDN รูปภาพเชี่ยวชาญด้านการเปลี่ยนรูปแบบ การเพิ่มประสิทธิภาพ และการนำส่งรูปภาพ คุณอาจมองว่ารูปภาพเหล่านี้เป็น API สำหรับการเข้าถึงและจัดการรูปภาพที่ใช้ในเว็บไซต์ก็ได้ สำหรับรูปภาพที่โหลดจาก CDN ของรูปภาพ URL รูปภาพไม่เพียงแค่ระบุว่าต้องโหลดรูปภาพใดเท่านั้น แต่ยังรวมถึงพารามิเตอร์ต่างๆ เช่น ขนาด รูปแบบ และคุณภาพ ซึ่งจะช่วยให้คุณสร้างรูปภาพรูปแบบต่างๆ สำหรับกรณีการใช้งานต่างๆ ได้
CDN ของรูปภาพแตกต่างจากสคริปต์การเพิ่มประสิทธิภาพรูปภาพตามเวลาบิลด์ตรงที่สร้างรูปภาพเวอร์ชันใหม่ตามความจำเป็น ด้วยเหตุนี้ โดยทั่วไปแล้ว CDN จะเหมาะกับการสร้างรูปภาพที่ปรับแต่งให้เหมาะกับลูกค้าแต่ละรายมากกว่าการสร้างสคริปต์
วิธีที่ CDN รูปภาพใช้ URL ในการระบุตัวเลือกการเพิ่มประสิทธิภาพ
URL รูปภาพที่ CDN รูปภาพใช้จะถ่ายทอดข้อมูลสำคัญเกี่ยวกับรูปภาพ รวมถึงการเปลี่ยนรูปแบบและการเพิ่มประสิทธิภาพที่ควรใช้ รูปแบบ URL จะแตกต่างกันไปโดยขึ้นอยู่กับ CDN ของรูปภาพที่คุณใช้ แต่ในระดับสูง URL ทั้งหมดมีฟีเจอร์ที่คล้ายกัน ฟีเจอร์ที่พบได้บ่อยที่สุดมีดังนี้
Origin
CDN ของรูปภาพอาจแสดงในโดเมนของคุณเองหรือโดเมนของ CDN รูปภาพก็ได้ โดยทั่วไปแล้ว CDN รูปภาพของบุคคลที่สามจะมีตัวเลือกให้ใช้โดเมนที่กำหนดเองโดยคิดค่าธรรมเนียม การใช้โดเมนของคุณเองช่วยให้เปลี่ยน CDN รูปภาพในภายหลังได้ง่ายขึ้นเพราะไม่จำเป็นต้องเปลี่ยนแปลง URL
ตัวอย่างก่อนหน้านี้ใช้โดเมนของ CDN ของรูปภาพ ("example-cdn.com") ที่มีโดเมนย่อยที่ปรับเปลี่ยนให้เหมาะกับแต่ละบุคคล แทนที่จะใช้โดเมนที่กำหนดเอง
รูปภาพ
โดยปกติแล้ว CDN รูปภาพสามารถกำหนดค่าให้ดึงรูปภาพจากตำแหน่งที่มีอยู่โดยอัตโนมัติเมื่อจำเป็นได้ ความสามารถนี้มักจะทำได้โดยใส่ URL ที่สมบูรณ์ของรูปภาพที่มีอยู่ภายใน URL ของรูปภาพที่สร้างโดย CDN รูปภาพ ตัวอย่างเช่น คุณอาจเห็น URL ที่มีลักษณะดังนี้ https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto
URL นี้จะดึงและเพิ่มประสิทธิภาพรูปภาพที่มีอยู่ที่ https://flowers.com/daisy.jpg
รูปแบบไฟล์ที่ขอ (JPG ในตัวอย่าง) อาจไม่เหมือนกับรูปแบบไฟล์ภาพที่แสดงผล (ในตัวอย่าง WebP) ส่วนหัว HTTP ของ content-type จะบอกเบราว์เซอร์ว่า URL อยู่ในรูปแบบใดเพื่อให้สามารถประมวลผล URL ได้อย่างเหมาะสม ซึ่งอาจสร้างความสับสนหากมีการบันทึกไฟล์ลงดิสก์และใช้โดยโปรแกรมอื่นที่คาดไว้ว่ารูปแบบตรงกับนามสกุลไฟล์
อีกวิธีที่ระบบรองรับอย่างแพร่หลายในการอัปโหลดรูปภาพไปยัง CDN รูปภาพคือการส่งรูปภาพในคำขอ HTTP POST ไปยัง API ของ CDN ของรูปภาพ
คีย์ความปลอดภัย
คีย์ความปลอดภัยจะป้องกันไม่ให้ผู้อื่นสร้างรูปภาพเวอร์ชันใหม่ของคุณ เมื่อเปิดใช้ฟีเจอร์นี้ รูปภาพเวอร์ชันใหม่แต่ละเวอร์ชันต้องมีคีย์ความปลอดภัยที่ไม่ซ้ำกัน
หากมีคนพยายามเปลี่ยนพารามิเตอร์ของ URL รูปภาพ แต่ไม่ให้คีย์ความปลอดภัยที่ถูกต้อง บุคคลนั้นจะสร้างเวอร์ชันใหม่ไม่ได้ CDN ของรูปภาพจะดูแลรายละเอียดของการสร้างและติดตามคีย์ความปลอดภัยให้คุณ
การแปลงโฉม
CDN รูปภาพนำเสนอการแปลงรูปภาพที่แตกต่างกันหลายสิบภาพ และในบางกรณีอาจมีหลายร้อยภาพ การเปลี่ยนรูปแบบเหล่านี้ระบุไว้ในสตริง URL และไม่มีข้อจํากัดในการใช้การเปลี่ยนรูปแบบหลายรายการพร้อมกัน เพื่อประสิทธิภาพเว็บ การแปลงรูปภาพที่สำคัญที่สุดคือขนาด ความหนาแน่นของพิกเซล รูปแบบ และการบีบอัด การเปลี่ยนรูปแบบเหล่านี้เป็นเหตุผลที่โดยปกติแล้วการเปลี่ยนไปใช้ CDN รูปภาพจะทำให้ไฟล์ภาพของเว็บไซต์มีขนาดเล็กลง
เนื่องจากโดยปกติแล้วมักมีการตั้งค่าที่เหมาะสมอย่างเป็นกลางสำหรับการเปลี่ยนรูปแบบประสิทธิภาพ CDN รูปภาพบางแห่งรองรับโหมด "อัตโนมัติ" สำหรับการเปลี่ยนรูปแบบเหล่านี้ เช่น แทนที่จะระบุว่ารูปภาพจะเปลี่ยนไปเป็นรูปแบบ WebP คุณอาจให้ CDN เลือกและแสดงรูปแบบที่เหมาะสมที่สุดโดยอัตโนมัติได้ CDN ของรูปภาพสามารถกำหนดวิธีที่ดีที่สุดในการแปลงรูปภาพโดยใช้สัญญาณต่อไปนี้ รวมถึงสัญญาณอื่นๆ
- คำแนะนำเกี่ยวกับไคลเอ็นต์ (เช่น ความกว้างของวิวพอร์ต, DPR และความกว้างของรูปภาพ)
- ส่วนหัว
Save-Data - ส่วนหัวของคำขอ User-Agent
- Network Information API
ตัวอย่างเช่น CDN ของรูปภาพอาจแสดง AVIF ไปยังเบราว์เซอร์ Chrome, WebP ไปยังเบราว์เซอร์ Edge และ JPEG ไปยังเบราว์เซอร์รุ่นเก่ามาก การตั้งค่าอัตโนมัติเป็นที่นิยมเนื่องจากจะช่วยให้คุณใช้ประโยชน์จากความเชี่ยวชาญของ CDN รูปภาพในการเพิ่มประสิทธิภาพรูปภาพโดยไม่จำเป็นต้องเปลี่ยนโค้ดเพื่อนำเทคโนโลยีใหม่มาใช้เมื่อ CDN รูปภาพเริ่มรองรับ
ประเภทของ CDN รูปภาพ
CDN รูปภาพมี 2 หมวดหมู่หลัก ได้แก่ จัดการด้วยตนเอง และจัดการจากบุคคลที่สาม
CDN ของรูปภาพที่มีการจัดการด้วยตนเอง
CDN ที่จัดการด้วยตนเองเป็นตัวเลือกที่ดีสำหรับเว็บไซต์ที่มีเจ้าหน้าที่วิศวกรรมซึ่งสะดวกต่อการบำรุงรักษาโครงสร้างพื้นฐานของตนเอง
- Thumbor เป็น CDN สำหรับรูปภาพแบบจัดการด้วยตนเองที่ได้รับความนิยมมากที่สุด เครื่องมือนี้เป็นโอเพนซอร์สและใช้งานฟรี แต่มีฟีเจอร์น้อยกว่า CDN เชิงพาณิชย์ส่วนใหญ่ และเอกสารค่อนข้างจำกัด เว็บไซต์ที่ใช้ Thumbor ได้แก่ Wikipedia, Square และ 99designs ดูวิธีติดตั้ง CDN ของรูปภาพของ Thumbor เพื่อดูวิธีตั้งค่า
- จินตภาพ
- Imagor
CDN รูปภาพของบุคคลที่สาม
CDN รูปภาพของบุคคลที่สามให้บริการ CDN รูปภาพ เช่นเดียวกับที่ผู้ให้บริการระบบคลาวด์ให้บริการเซิร์ฟเวอร์และโครงสร้างพื้นฐานอื่นๆ โดยมีค่าใช้จ่าย CDN รูปภาพจะให้บริการเพิ่มประสิทธิภาพและนำส่งรูปภาพ เนื่องจาก CDN รูปภาพของบุคคลที่สามจะคงเทคโนโลยีเบื้องหลังไว้ คุณจึงเริ่มต้นใช้งานได้ค่อนข้างรวดเร็ว แม้ว่าการย้ายข้อมูลทั้งหมดสำหรับเว็บไซต์ขนาดใหญ่อาจใช้เวลานานกว่านั้น โดยทั่วไปแล้ว CDN รูปภาพของบุคคลที่สามจะตั้งราคาตามระดับการใช้งาน โดย CDN รูปภาพส่วนใหญ่จะมีรุ่นฟรีหรือช่วงทดลองใช้ฟรีเพื่อให้คุณได้ลองใช้ผลิตภัณฑ์ของตน
เลือก CDN ของรูปภาพ
มีตัวเลือกที่ดีมากมายสำหรับ CDN รูปภาพ บางฟีเจอร์มีฟีเจอร์มากกว่ารายอื่นๆ แต่ฟีเจอร์เหล่านั้นจะช่วยให้คุณประหยัดจำนวนไบต์ในรูปภาพได้และทำให้โหลดหน้าเว็บได้เร็วขึ้น นอกจากชุดฟีเจอร์แล้ว ปัจจัยอื่นๆ ที่ควรพิจารณาเมื่อเลือก CDN ของรูปภาพ ได้แก่ ต้นทุน การสนับสนุน เอกสารประกอบ และความสะดวกในการตั้งค่าหรือย้ายข้อมูล
ผลกระทบต่อการแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP)
รูปภาพเป็นส่วนสำคัญต่อประสบการณ์ของผู้ใช้ในหลายเว็บไซต์ จึงเป็นปัจจัยสำคัญสำหรับ Largest Contentful Paint ของเว็บไซต์ โปรดคำนึงถึงสิ่งต่อไปนี้หากคุณตัดสินใจใช้ CDN ของรูปภาพ
- รูปภาพที่แสดงจาก CDN อาจมาจากเซิร์ฟเวอร์แบบข้ามต้นทาง ซึ่งช่วยเพิ่มเวลาในการตั้งค่าการเชื่อมต่อของเว็บไซต์ได้ หากเป็นไปได้ ให้ลองใช้อิมเมจ CDN ที่พร็อกซีผ่านต้นทางหลัก จะได้ไม่ต้องเพิ่มต้นทางอื่นๆ ให้เบราว์เซอร์เชื่อมต่อ ซึ่งจะให้ผลเหมือนกับการโฮสต์รูปภาพด้วยตนเองในต้นทางหลัก
- ลองใช้ค่าแอตทริบิวต์
fetchpriorityที่มีค่า"high"ในองค์ประกอบรูปภาพ LCP เพื่อให้เบราว์เซอร์เริ่มโหลดรูปภาพนั้นได้โดยเร็วที่สุด - หากรูปภาพไม่ปรากฏโดยทันทีใน HTML เริ่มต้น ให้พิจารณาใช้คำแนะนำ
rel=preloadสำหรับรูปภาพตัวเลือก LCP เพื่อให้เบราว์เซอร์โหลดรูปภาพนั้นได้ล่วงหน้า - หากพร็อกซีผ่านต้นทางไม่ได้ และเบราว์เซอร์ไม่รู้ว่าจะโหลดรูปภาพใดจนกว่าหน้าเว็บจะโหลดภายหลัง ให้ตั้งค่าการเชื่อมต่อกับ CDN รูปภาพแบบข้ามต้นทางให้เร็วที่สุดเพื่อย่นระยะเวลาการโหลดทรัพยากรสำหรับรูปภาพที่อาจเป็นตัวเลือก LCP