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