เครือข่ายนำส่งข้อมูล (CDN) รูปภาพเหมาะอย่างยิ่งสำหรับการเพิ่มประสิทธิภาพรูปภาพสำหรับเว็บ การเปลี่ยนเว็บไซต์ไปใช้ CDN รูปภาพจะช่วยประหยัดขนาดไฟล์รูปภาพได้ 40-80% และในกรณีส่วนใหญ่ CDN รูปภาพจะเพิ่มประสิทธิภาพรูปภาพได้ดีกว่าสคริปต์เพิ่มประสิทธิภาพรูปภาพในเวลาบิลด์
CDN รูปภาพคืออะไร
CDN รูปภาพมีความเชี่ยวชาญในการเปลี่ยนรูปแบบ เพิ่มประสิทธิภาพ และแสดงรูปภาพ นอกจากนี้ คุณยังสามารถคิดว่า URL เหล่านี้เป็น 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 ในตัวอย่าง) ส่วนหัว HTTP content-type จะบอกเบราว์เซอร์ว่า URL อยู่ในรูปแบบใดเพื่อให้ประมวลผล URL ได้อย่างเหมาะสม ซึ่งอาจทำให้เกิดความสับสนหากบันทึกไฟล์ลงในดิสก์และใช้โดยโปรแกรมอื่นที่คาดว่ารูปแบบจะตรงกับนามสกุลไฟล์
อีกวิธีหนึ่งที่ได้รับการรองรับอย่างกว้างขวางในการอัปโหลดรูปภาพไปยัง CDN รูปภาพคือการส่งรูปภาพในคำขอ POST HTTP ไปยัง 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 ดูวิธีการตั้งค่าได้ที่วิธีติดตั้ง Thumbor Image CDN
- Imaginary
- 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