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

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

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

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

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

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

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

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

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

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

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

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

רשתות CDN לתמונות בניהול עצמי

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

רשתות CDN של תמונות של צד שלישי

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

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

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

ההשפעה על המדד 'המהירות שבה נטען רכיב התוכן הכי גדול' (LCP)

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