שימוש ברשתות CDN של תמונות לאופטימיזציה של תמונות

Jeremy Wagner

Katie Hempenius

Barry Pollard

מדוע להשתמש ב-CDN של תמונה?

רשתות להעברת תוכן של תמונות (CDN) מצוינות באופטימיזציה של תמונות. מעבר ל-CDN של תמונה יכול להניב חיסכון של 40-80% בגודל קובץ התמונה. באופן כללי, ניתן להשיג את אותן תוצאות באמצעות סקריפטים של build בלבד, אבל זה מקרה נדיר.

מהו CDN של תמונות?

CDNs לתמונות מתמחים בטרנספורמציה, באופטימיזציה ובמסירה של תמונות. אפשר גם להתייחס אליהם כאל ממשקי API שמאפשרים גישה לתמונות שבהן משתמשים באתר וביצוע מניפולציות עליהן. עבור תמונות שנטענות מ-CDN של תמונה, כתובת URL של תמונה מציינת לא רק איזו תמונה לטעון, אלא גם פרמטרים כמו גודל, פורמט ואיכות. כך קל ליצור וריאציות של תמונה לתרחישים שונים לדוגמה.

קובצי CDN של תמונות שונים מסקריפטים של אופטימיזציית תמונות בזמן ה-build בכך שהם יוצרים גרסאות חדשות של תמונות לפי הצורך. כתוצאה מכך, רשתות CDN בדרך כלל מתאימות יותר ליצירת תמונות המותאמות אישית במיוחד לכל לקוח בנפרד מאשר סקריפטים של build.

כיצד רשתות CDN של תמונות משתמשות בכתובות אתרים כדי לציין אפשרויות אופטימיזציה

כתובות URL של תמונות שמשמשות רשתות CDN של תמונות מספקות מידע חשוב על התמונה ועל הטרנספורמציות והאופטימיזציות שצריך להחיל עליה. הפורמטים של כתובות URL משתנים בהתאם ל-CDN של התמונה, אבל ברמה העליונה לכולם יש תכונות דומות. נסביר עכשיו על כמה מהתכונות הנפוצות ביותר.

מקור

CDN של תמונה יכול להתקיים בדומיין שלכם או בדומיין של ה-CDN של התמונה. בדרך כלל, CDNs של תמונות של צד שלישי מציעים אפשרות להשתמש בדומיין מותאם אישית תמורת תשלום. שימוש בדומיין שלך מאפשר לך להחליף בקלות את ה-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 של התמונות תטפל עבורך בפרטי היצירה של מפתחות אבטחה ומעקב אחריהם.

טרנספורמציות

CDNs של תמונות מציעים עשרות ובמקרים מסוימים מאות, של טרנספורמציות תמונה שונות. הטרנספורמציות האלה מצוינות באמצעות מחרוזת של כתובת URL, ואין הגבלות על שימוש בכמה טרנספורמציות בו-זמנית. בהקשר של ביצועי אינטרנט, השינויים החשובים ביותר בתמונות הם גודל, דחיסות פיקסלים, פורמט ודחיסה. השינויים האלה הם הסיבה לכך שמעבר ל-CDN של תמונה בדרך כלל גורם לירידה משמעותית בגודל התמונה.

בדרך כלל יש ההגדרה הטובה ביותר מבחינה אובייקטיבית לשינויי ביצועים, לכן CDN מסוים של תמונות תומכים במצב "אוטומטי" עבור הטרנספורמציות האלה. לדוגמה, במקום לציין שתמונות ישונו לפורמט WebP, אפשר לאפשר ל-CDN לבחור ולהציג באופן אוטומטי את הפורמט האופטימלי. אותות ש-CDN של תמונה יכול להשתמש בהם כדי לקבוע את הדרך הטובה ביותר לבצע טרנספורמציה של תמונה כוללים:

• רמזים ללקוחות (לדוגמה, רוחב אזור התצוגה, DPR ורוחב התמונה)
• הכותרת Save-Data
• כותרת הבקשה של סוכן המשתמש
• Network Information API

לדוגמה, ה-CDN של התמונה עשוי להציג AVIF בדפדפן Chrome, WebP בדפדפן Edge ו-JPEG בדפדפן ישן מאוד. ההגדרות האוטומטיות הן פופולריות, כי הן מאפשרות לכם לנצל את המומחיות המשמעותית של רשתות CDN לתמונות כדי לבצע אופטימיזציה של תמונות, ללא צורך בשינויים בקוד כדי לאמץ טכנולוגיות חדשות כשהן נתמכות על ידי ה-CDN של התמונה.

סוגים של תמונות CDN

ניתן לחלק רשתות CDN של תמונות לשתי קטגוריות: בניהול עצמי ובניהול צד שלישי.

CDNs של תמונות בניהול עצמי

CDNs בניהול עצמי יכולים להיות בחירה טובה עבור אתרים עם צוות מהנדסי תוכנה שמרגישים בנוח לתחזק את התשתית שלהם.

• Thumbor הוא ה-CDN הפופולרי ביותר של תמונות בניהול עצמי. זהו קוד פתוח והשימוש בו בחינם, אבל בדרך כלל יש בו פחות תכונות מרוב ה-CDN המסחריים, והתיעוד שלו מוגבל במידה מסוימת. וויקיפדיה, ריבוע ו99עיצובים הם שלושה אתרים שמשתמשים ב-Thumbor. ראה את הפוסט כיצד להתקין את CDN של תמונת Thumbor לקבלת הוראות על הגדרתו.
• דמיוני
• Imagor

CDNs של תמונות של צד שלישי

CDNs של תמונות של צד שלישי מספקים CDNs לתמונות כשירות. בדיוק כמו שספקי שירותי ענן מספקים תמורת תשלום שרתים ותשתיות אחרות, רשתות CDN של תמונות מציעות אופטימיזציה והצגה של תמונות בתשלום. מאחר שרשתות CDN של תמונות של צד שלישי שומרות על הטכנולוגיה הבסיסית, תחילת העבודה היא פשוטה למדי ובדרך כלל ניתן להשלים תוך 10-15 דקות, אם כי העברה מלאה של אתר גדול עשויה להימשך זמן רב יותר. CDNs של תמונות של צד שלישי מתומחרים בדרך כלל לפי רמות שימוש, כאשר רוב רשתות ה-CDN של התמונות מספקות רמה ללא תשלום או תקופת ניסיון בחינם כדי לתת לכם הזדמנות לנסות את המוצר שלהם.

בחירת CDN לתמונה

יש הרבה אפשרויות טובות ל-CDN של תמונות. לחלק יהיו תכונות רבות יותר מאחרות, אבל כולן יעזרו לכם לחסוך בייטים בתמונות וכך לטעון את הדפים מהר יותר. מלבד קבוצות התכונות, גורמים נוספים שיש לקחת בחשבון בעת בחירת רשת CDN של תמונה הם העלות, התמיכה, התיעוד וקלות ההתקנה או ההעברה.

גם כדאי לנסות אותם בעצמך לפני קבלת החלטה. בהמשך ניתן למצוא Codelabs עם הוראות לתחילת העבודה במהירות עם מספר רשתות CDN לתמונות.

ההשפעות על Largest Contentful Paint (LCP)

תמונות הן חלק חיוני מחוויית המשתמש באתרים רבים, ולכן הן מביאות בחשבון את איכות הביצועים של אתרים בכל הנוגע להמהירות שבה נטען רכיב התוכן הכי גדול (LCP). הנה כמה דברים שכדאי לזכור אם מחליטים להשתמש ב-CDN של תמונה:

1. תמונות שמוצגות מ-CDN עשויות להגיע משרת חוצה-מקורות, וכתוצאה מכך נדרש זמן נוסף להגדרת החיבור. כשאפשר, כדאי לנסות להשתמש ב-CDN של תמונה שעובר דרך שרת proxy דרך המקור הראשי, כדי שלא יתווסף מקורות נוספים לדפדפן כדי להתחבר אליהם. למצב הזה יש אותה השפעה כמו תמונות באירוח עצמי במקור הראשי.
2. כדאי להשתמש בערך המאפיין fetchpriority של "high" ברכיב התמונה מסוג LCP כדי שהדפדפן יוכל להתחיל לטעון את התמונה בהקדם האפשרי.
3. אם תמונה לא גלויה מיד ב-HTML הראשוני, כדאי להשתמש ברמז rel=preload עבור התמונה התואמת ל-LCP כדי שהדפדפן יוכל לטעון את התמונה מראש.
4. אם לא ניתן להעביר שרת proxy דרך המקור שלך, והתמונה המדויקת שתיטען לא תהיה ידועה בשלב מאוחר יותר במהלך טעינת הדף, כדאי להגדיר חיבור ל-CDN של התמונה ממקורות שונים בהקדם האפשרי כדי לקצר את שלב טעינת המשאב שעשויה להיות התמונה המוכנה של LCP בדף שלך.

CDN של תמונות הם כלים חיוניים שמבטלים את הקשיים של אופטימיזציה ידנית של תמונות, ויש להתייחס אליהם. עם זאת, כמו תמיד, צריך לקחת בחשבון פשרות. כדאי לשים לב לתמונות של מועמד ה-LCP באתר שלכם ולהוסיף רמזים בהתאם, כדי לקצר את זמן האחזור שיתקבל בבקשות החשובות האלה.