เครือข่ายนำส่งข้อมูล (CDN) สำหรับเนื้อหารูปภาพมีประสิทธิภาพยอดเยี่ยมในการเพิ่มประสิทธิภาพรูปภาพสำหรับเว็บ การเปลี่ยนเว็บไซต์ไปใช้ CDN สำหรับรูปภาพอาจทำให้ขนาดไฟล์รูปภาพลดลง 40-80% และในกรณีส่วนใหญ่ CDN สำหรับรูปภาพจะเพิ่มประสิทธิภาพรูปภาพได้ดีกว่าสคริปต์การเพิ่มประสิทธิภาพรูปภาพในรันไทม์
CDN สำหรับรูปภาพคืออะไร
CDN รูปภาพมีความเชี่ยวชาญด้านการเปลี่ยนรูปแบบ การเพิ่มประสิทธิภาพ และการแสดงรูปภาพ หรือจะมองว่าเป็น API สําหรับการเข้าถึงและจัดการรูปภาพที่ใช้ในเว็บไซต์ก็ได้ สำหรับรูปภาพที่โหลดจาก CDN ของรูปภาพ URL ของรูปภาพจะระบุไม่เพียงรูปภาพที่จะโหลดเท่านั้น แต่ยังระบุพารามิเตอร์ต่างๆ เช่น ขนาด รูปแบบ และคุณภาพด้วย ซึ่งจะช่วยให้คุณสร้างรูปภาพรูปแบบต่างๆ สําหรับกรณีการใช้งานที่แตกต่างกันได้
CDN รูปภาพแตกต่างจากสคริปต์การเพิ่มประสิทธิภาพรูปภาพขณะสร้างตรงที่ CDN รูปภาพจะสร้างรูปภาพเวอร์ชันใหม่ตามความจำเป็น ด้วยเหตุนี้ CDN จึงเหมาะกว่าในการสร้างรูปภาพที่ปรับแต่งอย่างมากสำหรับลูกค้าแต่ละรายมากกว่าสคริปต์บิลด์
วิธีที่ CDN รูปภาพใช้ URL เพื่อระบุตัวเลือกการเพิ่มประสิทธิภาพ
URL รูปภาพที่ CDN รูปภาพใช้จะสื่อข้อมูลสำคัญเกี่ยวกับรูปภาพ รวมถึงการเปลี่ยนรูปแบบและการเพิ่มประสิทธิภาพที่ควรใช้กับรูปภาพ รูปแบบ URL จะแตกต่างกันไปตาม CDN รูปภาพที่คุณใช้ แต่ในระดับสูง รูปแบบทั้งหมดจะมีฟีเจอร์ที่คล้ายกัน ฟีเจอร์ที่พบบ่อยที่สุดมีดังนี้
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 ในตัวอย่าง) ส่วนหัว content-type HTTP จะบอกเบราว์เซอร์ว่า 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 นี้เป็นโอเพนซอร์สและใช้งานได้ฟรี แต่มีฟีเจอร์น้อยกว่า CDN เชิงพาณิชย์ส่วนใหญ่ และเอกสารประกอบมีค่อนข้างจำกัด เว็บไซต์ที่ใช้ Thumbor ได้แก่ Wikipedia, Square และ 99designs ดูวิธีติดตั้ง CDN รูปภาพของ Thumbor เพื่อดูวิธีการตั้งค่า
- สมมติ
- Imagor
CDN รูปภาพของบุคคลที่สาม
CDN รูปภาพของบุคคลที่สามให้บริการ CDN รูปภาพ CDN รูปภาพจะให้บริการเพิ่มประสิทธิภาพและแสดงรูปภาพโดยคิดค่าบริการ เช่นเดียวกับที่ผู้ให้บริการระบบคลาวด์ให้บริการเซิร์ฟเวอร์และโครงสร้างพื้นฐานอื่นๆ โดยคิดค่าบริการ เนื่องจาก CDN รูปภาพของบุคคลที่สามจะดูแลรักษาเทคโนโลยีพื้นฐาน คุณจึงเริ่มใช้งาน CDN ได้อย่างรวดเร็ว แต่การย้ายข้อมูลเว็บไซต์ขนาดใหญ่ให้เสร็จสมบูรณ์อาจใช้เวลานานกว่านั้น โดยทั่วไป CDN รูปภาพของบุคคลที่สามจะมีราคาตามระดับการใช้งาน โดย CDN รูปภาพส่วนใหญ่จะมีระดับการใช้งานแบบไม่มีค่าใช้จ่ายหรือช่วงทดลองใช้ฟรีเพื่อให้คุณลองใช้ผลิตภัณฑ์
เลือก CDN รูปภาพ
CDN รูปภาพมีตัวเลือกที่ดีมากมาย บางโปรแกรมมีฟีเจอร์มากกว่าโปรแกรมอื่นๆ แต่โปรแกรมใดๆ ก็ตามจะช่วยประหยัดไบต์ในรูปภาพและทำให้หน้าเว็บโหลดเร็วขึ้น นอกจากชุดฟีเจอร์แล้ว ปัจจัยอื่นๆ ที่ควรพิจารณาเมื่อเลือก CDN สำหรับรูปภาพ ได้แก่ ค่าใช้จ่าย การสนับสนุน เอกสารประกอบ และความง่ายในการตั้งค่าหรือย้ายข้อมูล
ผลต่อ Largest Contentful Paint (LCP)
รูปภาพเป็นส่วนสําคัญของประสบการณ์ของผู้ใช้ในหลายเว็บไซต์ จึงถือเป็นปัจจัยสําคัญใน Largest Contentful Paint ของเว็บไซต์ สิ่งที่ควรคำนึงถึงหากตัดสินใจใช้ CDN สำหรับรูปภาพมีดังนี้
- รูปภาพที่แสดงจาก CDN อาจมาจากเซิร์ฟเวอร์ข้ามแหล่งที่มา ซึ่งอาจทำให้เวลาในการตั้งค่าการเชื่อมต่อของเว็บไซต์เพิ่มขึ้น หากเป็นไปได้ ให้ลองใช้ CDN รูปภาพที่ทำหน้าที่เป็นพร็อกซีผ่านต้นทางหลักเพื่อไม่ให้ต้องเพิ่มต้นทางเพิ่มเติมที่เบราว์เซอร์จะเชื่อมต่อ ซึ่งจะมีผลเหมือนกับการโฮสต์รูปภาพด้วยตนเองในต้นทางหลัก
- ลองใช้ค่าแอตทริบิวต์
fetchpriorityเป็น"high"ในองค์ประกอบรูปภาพ LCP เพื่อให้เบราว์เซอร์เริ่มโหลดรูปภาพนั้นโดยเร็วที่สุด - หากระบบไม่พบรูปภาพใน HTML เริ่มต้นในทันที ให้ลองใช้
rel=preloadคำแนะนำสำหรับรูปภาพ LCP ที่เป็นไปได้เพื่อให้เบราว์เซอร์โหลดรูปภาพนั้นล่วงหน้าได้ - หากใช้พร็อกซีผ่านต้นทางไม่ได้ และเบราว์เซอร์จะไม่รู้ว่าจะโหลดรูปภาพใดจนกว่าจะโหลดหน้าเว็บในภายหลัง ให้ตั้งค่าการเชื่อมต่อกับ CDN รูปภาพข้ามแหล่งที่มาโดยเร็วที่สุดเพื่อลดระยะการโหลดทรัพยากรสําหรับรูปภาพที่อาจเป็น LCP