רשתות CDN (רשתות להצגת תכנים) לתמונות מתאימות מאוד לביצוע אופטימיזציה של תמונות לאינטרנט. מעבר של האתר ל-CDN של תמונות יכול לחסוך 40% עד 80% בגודל קובצי התמונות, וברוב המקרים הוא מאפשר לבצע אופטימיזציה של התמונות טוב יותר מאשר סקריפט לאופטימיזציה של תמונות בזמן ה-build.
מה זה CDN לתמונות?
שירותי CDN לתמונות מתמחים בהמרה, באופטימיזציה ובהעברה של תמונות. אפשר גם להתייחס אליהם כאל ממשקי API לגישה ולשינוי של התמונות שבהן אתם משתמשים באתר. בתמונות שנטענות מ-CDN של תמונות, כתובת ה-URL של התמונה מציינת לא רק איזו תמונה צריך לטעון, אלא גם פרמטרים כמו גודל, פורמט ואיכות. כך אפשר ליצור וריאציות של תמונה למקרים שונים של שימוש.
CDN של תמונות שונה מסקריפטים לאופטימיזציה של תמונות בזמן ה-build, מאחר שהוא יוצר גרסאות חדשות של תמונות לפי הצורך. כתוצאה מכך, בדרך כלל רשתות CDN מתאימות יותר ליצירת קובצי אימג' שמותאמים אישית מאוד ללקוחות ספציפיים, בהשוואה לסקריפטים ל-build.
איך רשתות CDN של תמונות משתמשות בכתובות URL כדי לציין אפשרויות אופטימיזציה
כתובות ה-URL של התמונות שבהן משתמשים CDN של תמונות מעבירות מידע חשוב על התמונה ועל הטרנספורמציות והאופטימיזציות שצריך להחיל עליה. פורמטים של כתובות URL משתנים בהתאם ל-CDN של התמונות שבו אתם משתמשים, אבל ברמה גבוהה, לכולם יש תכונות דומות. ריכזנו כאן כמה מהתכונות הנפוצות ביותר.
מקור
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, כדי שהוא יוכל לעבד אותה בצורה מתאימה. המצב הזה עלול לגרום לבלבול אם הקובץ נשמר בדיסק ותוכנה אחרת משתמשת בו, כי היא מצפה שהפורמט יתאים לסיומת הקובץ.
דרך נוספת להעלות תמונות ל-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 לתמונות: מנוהלות באופן עצמאי ומנוהלות על ידי צד שלישי.
רשתות CDN לתמונות בניהול עצמי
שירותי CDN בניהול עצמי יכולים להיות בחירה טובה לאתרים שיש להם צוות מהנדסים שמתמצא בתחזוקת התשתית שלהם.
- Thumbor הוא שירות ה-CDN הפופולרי ביותר לניהול עצמי של תמונות. הקוד פתוח והשימוש בו בחינם, אבל יש לו פחות תכונות מרוב רשתות ה-CDN המסחריות, והמסמכים שלו מוגבלים במידה מסוימת. אתרים שמשתמשים ב-Thumbor כוללים את Wikipedia, Square ו-99designs. הוראות להגדרה מפורטות במאמר איך להתקין את CDN של Thumbor לתמונות.
- דמיוני
- Imagor
רשתות CDN של תמונות של צד שלישי
רשתות CDN של תמונות של צד שלישי מספקות רשתות CDN של תמונות כשירות. בדומה לכך שספקי ענן מספקים שרתים ותשתית אחרת בתשלום, רשתות CDN לתמונות מספקות אופטימיזציה והעברה של תמונות בתשלום. מאחר ש-CDN של תמונות של צד שלישי שומר על הטכנולוגיה הבסיסית, בדרך כלל אפשר להתחיל להשתמש בו במהירות יחסית, אבל העברה מלאה של אתר גדול עשויה להימשך זמן רב יותר. בדרך כלל, המחירים של שירותי CDN של תמונות של צד שלישי מבוססים על רמות שימוש, ורוב שירותי ה-CDN של תמונות מציעים רמה חינמית או תקופת ניסיון בחינם כדי לאפשר לכם לנסות את המוצר.
בחירת CDN לתמונות
יש הרבה אפשרויות טובות ל-CDN של תמונות. בחלק מהם יש יותר תכונות מאשר באחרים, אבל כל אחד מהם יכול לעזור לכם לחסוך בייטים בתמונות וכך לטעון את הדפים מהר יותר. בנוסף לחבילות התכונות, יש עוד גורמים שחשוב להביא בחשבון כשבוחרים CDN לתמונות: עלות, תמיכה, מסמכי עזרה וקלות ההגדרה או ההעברה.
ההשפעה על המדד 'המהירות שבה נטען רכיב התוכן הכי גדול' (LCP)
תמונות הן חלק חיוני מחוויית המשתמש באתרים רבים, ולכן הן גורם חשוב בזמן הטעינה של רכיב התוכן הכי גדול (LCP) באתר. ריכזנו כאן כמה דברים שכדאי לזכור אם אתם מחליטים להשתמש ב-CDN לתמונות:
- תמונות שמוצגות מ-CDN יכולות להגיע משרת שמגיע ממקורות שונים, מה שעלול להאריך את זמן הגדרת החיבור לאתר. כשהדבר אפשרי, כדאי להשתמש ב-CDN של תמונות שמשתמש בשרת proxy דרך המקור הראשי, כדי לא להוסיף מקורות נוספים שהדפדפן צריך להתחבר אליהם. לפעולה הזו יש את אותה השפעה כמו אירוח עצמאי של תמונות במקור הראשי.
- כדאי להשתמש בערך
"high"של המאפייןfetchpriorityברכיב התמונה מסוג LCP, כדי שהדפדפן יוכל להתחיל לטעון את התמונה הזו בהקדם האפשרי. - אם תמונה לא ניתנת לגילוי באופן מיידי בקוד ה-HTML הראשוני, מומלץ להשתמש ב
rel=preloadכדי שהדפדפן יוכל לטעון את התמונה הזו מראש. - אם אין לכם אפשרות להשתמש בשרת proxy דרך המקור, והדפדפן לא ידע איזו תמונה לטעון עד מאוחר יותר בתהליך טעינת הדף, מומלץ להגדיר חיבור ל-CDN של תמונות ממקורות שונים בהקדם האפשרי כדי לקצר את שלב טעינת המשאבים של תמונות מתאימות ל-LCP.