ใช้ CDN รูปภาพเพื่อเพิ่มประสิทธิภาพรูปภาพ

Jeremy Wagner

Katie Hempenius

Barry Pollard

เหตุใดจึงควรใช้ CDN ของรูปภาพ

เครือข่ายนำส่งข้อมูลรูปภาพ (CDN) เพิ่มประสิทธิภาพรูปภาพได้อย่างดีเยี่ยม การเปลี่ยนไปใช้ CDN ของรูปภาพช่วยให้ขนาดไฟล์รูปภาพลดลง 40–80% ในทางทฤษฎี การจะได้ผลลัพธ์ที่เหมือนกันโดยใช้เฉพาะสคริปต์บิลด์เท่านั้นก็เป็นไปได้ แต่ในทางปฏิบัตินั้นหายาก

CDN ของรูปภาพคืออะไร

CDN รูปภาพเชี่ยวชาญด้านการเปลี่ยนรูปแบบ การเพิ่มประสิทธิภาพ และการนำส่งรูปภาพ คุณอาจมองว่ารูปภาพเหล่านี้เป็น API สำหรับการเข้าถึงและจัดการรูปภาพที่ใช้ในเว็บไซต์ก็ได้ สำหรับรูปภาพที่โหลดจาก CDN ของรูปภาพ URL รูปภาพไม่ได้บอกเพียงรูปภาพที่จะโหลดเท่านั้น แต่ยังระบุพารามิเตอร์ เช่น ขนาด รูปแบบ และคุณภาพ วิธีนี้ช่วยให้ง่ายต่อการสร้างรูปภาพรูปแบบต่างๆ สำหรับกรณีการใช้งานต่างๆ

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

อีกวิธีที่ระบบรองรับอย่างแพร่หลายในการอัปโหลดรูปภาพไปยัง 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 เชิงพาณิชย์ส่วนใหญ่ และมีเอกสารประกอบค่อนข้างจำกัด Wikipedia, Square และ 99designs เป็นเว็บไซต์ 3 แห่งที่ใช้ Thumbor ดูโพสต์วิธีติดตั้ง CDN รูปภาพของ Thumbor เพื่อดูวิธีตั้งค่า
• จินตภาพ
• Imagor

CDN รูปภาพของบุคคลที่สาม

CDN รูปภาพของบุคคลที่สามให้บริการ CDN รูปภาพ เช่นเดียวกับที่ผู้ให้บริการระบบคลาวด์ให้บริการเซิร์ฟเวอร์และโครงสร้างพื้นฐานอื่นๆ โดยคิดค่าบริการ CDN รูปภาพให้บริการเพิ่มประสิทธิภาพและนำส่งรูปภาพโดยเสียค่าธรรมเนียม เนื่องจาก CDN รูปภาพของบุคคลที่สามจะคงเทคโนโลยีเบื้องหลังไว้ การเริ่มต้นใช้งานจึงค่อนข้างง่ายและมักจะทำได้ภายใน 10-15 นาที แต่การย้ายข้อมูลที่สมบูรณ์สำหรับเว็บไซต์ขนาดใหญ่อาจใช้เวลานานกว่านั้น โดยทั่วไปแล้ว CDN รูปภาพของบุคคลที่สามจะคิดราคาตามระดับการใช้งาน โดย CDN รูปภาพส่วนใหญ่จะมีรุ่นฟรีหรือช่วงทดลองใช้ฟรีเพื่อเปิดโอกาสให้คุณได้ลองใช้ผลิตภัณฑ์ของตน

การเลือก CDN ของรูปภาพ

มีตัวเลือกที่ดีมากมายสำหรับ CDN รูปภาพ บางเว็บจะมีฟีเจอร์มากกว่าตัวอื่นๆ แต่ทุกฟีเจอร์น่าจะช่วยให้คุณประหยัดไบต์ในรูปภาพได้ ซึ่งทำให้โหลดหน้าเว็บได้เร็วขึ้น นอกจากชุดฟีเจอร์แล้ว ปัจจัยอื่นๆ ที่ควรพิจารณาเมื่อเลือก CDN ของรูปภาพ ได้แก่ ต้นทุน การสนับสนุน เอกสารประกอบ และความสะดวกในการตั้งค่าหรือย้ายข้อมูล

การทดลองดูด้วยตัวเองก่อนตัดสินใจก็อาจเป็นประโยชน์เช่นกัน ที่ด้านล่างนี้ คุณจะพบ Codelab พร้อมคำแนะนำเกี่ยวกับวิธีเริ่มต้นใช้งาน CDN รูปภาพหลายๆ แห่งอย่างรวดเร็ว

ผลกระทบต่อการแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP)

รูปภาพเป็นส่วนสำคัญต่อประสบการณ์ของผู้ใช้ในหลายเว็บไซต์ และดังนั้นจึงเป็นปัจจัยที่มีผลต่อประสิทธิภาพของเว็บไซต์เมื่อพูดถึง Largest Contentful Paint สิ่งที่ควรทราบหากตัดสินใจใช้ CDN ของรูปภาพมีดังนี้

1. รูปภาพที่แสดงจาก CDN อาจมาจากเซิร์ฟเวอร์แบบข้ามต้นทาง ซึ่งต้องใช้เวลาในการตั้งค่าการเชื่อมต่อเพิ่มเติม หากเป็นไปได้ให้พยายามใช้ CDN ของรูปภาพที่จะเชื่อมต่อผ่านต้นทางหลัก เพื่อให้คุณไม่ต้องเพิ่มต้นทางอื่นๆ ให้เบราว์เซอร์เชื่อมต่อ ซึ่งจะให้ผลเหมือนกับการโฮสต์รูปภาพด้วยตนเองในต้นทางหลัก
2. พิจารณาใช้ค่าแอตทริบิวต์ fetchpriority ที่มีค่า "high" ในองค์ประกอบรูปภาพ LCP เพื่อให้เบราว์เซอร์เริ่มโหลดรูปภาพนั้นได้โดยเร็วที่สุด
3. หากรูปภาพไม่สามารถค้นพบได้ทันทีใน HTML เริ่มต้น ให้พิจารณาใช้คำแนะนำ rel=preload สำหรับรูปภาพตัวเลือก LCP เพื่อให้เบราว์เซอร์โหลดรูปภาพนั้นได้ล่วงหน้า
4. หากพร็อกซีผ่านต้นทางไม่สามารถทำได้ และระบบไม่ทราบรูปภาพที่จะโหลดจริงจนกระทั่งภายหลังในระหว่างการโหลดหน้าเว็บ คุณควรตั้งค่าการเชื่อมต่อกับ CDN รูปภาพข้ามต้นทางให้เร็วที่สุดเท่าที่จะเป็นไปได้ เพื่อลดระยะการโหลดทรัพยากรของรูปภาพที่อาจเป็นรูปภาพตัวเลือก LCP ของหน้า

CDN รูปภาพเป็นเครื่องมือที่ขาดไม่ได้ซึ่งจะช่วยลดภาระในการเพิ่มประสิทธิภาพรูปภาพด้วยตนเอง ซึ่งควรนำมาใช้ แต่ก็อาจมีทางเลือกอื่นๆ ที่ต้องพิจารณา ดังนั้นการติดตามรูปภาพผู้สมัคร LCP ของเว็บไซต์และการเพิ่มคำแนะนำตามที่เหมาะสมจะช่วยลดเวลาในการตอบสนองที่เพิ่มเข้าไปในคำขอหลักเหล่านั้น