רשתות להעברת תוכן (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, בדוגמה). כותרת ה-HTTP content-type מציינת לדפדפן את הפורמט של כתובת ה-URL, כדי שהוא יוכל לעבד אותה בצורה מתאימה. זה יכול לגרום לבלבול אם הקובץ נשמר בדיסק ומשמש תוכנה אחרת שמצפה שהפורמט יתאים לסיומת הקובץ.
דרך נוספת שנתמכת באופן נרחב להעלאת תמונות ל-CDN לתמונות היא לשלוח אותן בבקשת POST ל-API של ה-CDN לתמונות.
מפתח אבטחה
מפתח אבטחה מונע מאנשים אחרים ליצור גרסאות חדשות של התמונות שלכם. כשהתכונה הזו מופעלת, לכל גרסה חדשה של קובץ אימג' נדרש מפתח אבטחה ייחודי.
אם מישהו ינסה לשנות את הפרמטרים של כתובת ה-URL של התמונה בלי לספק מפתח אבטחה תקין, הוא לא יוכל ליצור גרסה חדשה. רשת ה-CDN של התמונות מטפלת בפרטים של יצירת מפתחות אבטחה ומעקב אחריהם בשבילכם.
טרנספורמציות
רשתות CDN לתמונות מציעות עשרות, ובמקרים מסוימים מאות, טרנספורמציות שונות של תמונות. הטרנספורמציות האלה מצוינות במחרוזת של כתובת ה-URL, ואין הגבלות על שימוש בכמה טרנספורמציות בו-זמנית. כדי לשפר את הביצועים באינטרנט, השינויים הכי חשובים בתמונות הם גודל, צפיפות פיקסלים, פורמט ודחיסה. השינויים האלה הם הסיבה לכך שבדרך כלל, מעבר ל-CDN של תמונות מקטין את קובצי התמונות באתר.
בדרך כלל יש הגדרה אובייקטיבית שהיא הכי טובה לשינויים בביצועים, ולכן חלק מרשתות ה-CDN לתמונות תומכות במצב "אוטומטי" לשינויים האלה. לדוגמה, במקום לציין שהתמונות יומרו לפורמט WebP, אתם יכולים לאפשר ל-CDN לבחור ולהציג באופן אוטומטי את הפורמט האופטימלי. רשת CDN לתמונות יכולה לקבוע את הדרך הטובה ביותר לשנות תמונה באמצעות האותות הבאים, בין היתר:
- איסוף אותות בצד הלקוח (לדוגמה, רוחב אזור התצוגה, DPR ורוחב התמונה)
- הכותרת
Save-Data - כותרת הבקשה של סוכן המשתמש
- Network Information API
לדוגמה, רשת ה-CDN של התמונות עשויה להציג AVIF לדפדפן Chrome, WebP לדפדפן Edge ו-JPEG לדפדפן ישן מאוד. הגדרות אוטומטיות הן פופולריות כי הן מאפשרות לכם לנצל את המומחיות של רשתות CDN לתמונות באופטימיזציה של תמונות, בלי שתצטרכו לשנות את הקוד כדי לאמץ טכנולוגיות חדשות כשרשת ה-CDN לתמונות מתחילה לתמוך בהן.
סוגים של רשתות CDN לתמונות
יש שתי קטגוריות עיקריות של רשתות CDN לתמונות: בניהול עצמי ובניהול של צד שלישי.
רשתות CDN לתמונות בניהול עצמי
רשתות CDN בניהול עצמי יכולות להתאים לאתרים עם צוות הנדסה שיכול לתחזק את התשתית שלהם.
- Thumbor היא רשת ה-CDN הפופולרית ביותר לניהול עצמי של תמונות. הוא בקוד פתוח וחינמי, אבל יש לו פחות תכונות מאשר לרוב רשתות ה-CDN המסחריות, והתיעוד שלו מוגבל. אתרים שמשתמשים ב-thumbor כוללים את Wikipedia, Square ו-99designs. הוראות להגדרה מפורטות במאמר איך מתקינים את רשת ה-CDN של Thumbor לתמונות.
- Imaginary
- Imagor
רשתות CDN של תמונות מצד שלישי
רשתות CDN של צד שלישי מספקות רשתות CDN של תמונות כשירות. כמו שספקי שירותי ענן מספקים שרתים ותשתיות אחרות בתשלום, רשתות CDN לתמונות מספקות אופטימיזציה והצגה של תמונות בתשלום. מכיוון שרשתות CDN של צד שלישי לתמונות מתחזקות את הטכנולוגיה הבסיסית, בדרך כלל אפשר להתחיל להשתמש בהן די מהר, אבל העברה מלאה של אתר גדול עשויה להימשך זמן רב יותר. התמחור של רשתות CDN של צד שלישי לתמונות מבוסס בדרך כלל על רמות שימוש, ורוב הרשתות האלה מספקות תוכנית בחינם או תקופת ניסיון בחינם כדי שתוכלו לנסות את המוצר שלהן.
בחירת רשת CDN לתמונות
יש הרבה אפשרויות טובות לרשתות CDN של תמונות. בחלק מהכלים יש יותר תכונות מאשר באחרים, אבל כולם יכולים לעזור לכם לחסוך בייטים בתמונות, וכך לטעון את הדפים מהר יותר. מלבד קבוצות התכונות, גורמים נוספים שכדאי להביא בחשבון כשבוחרים רשת CDN לתמונות הם עלות, תמיכה, תיעוד וקלות ההגדרה או ההעברה.
ההשפעה על המהירות שבה נטען רכיב התוכן הכי גדול (LCP)
תמונות הן חלק חיוני מחוויית המשתמש בהרבה אתרים, ולכן הן גורם חשוב במהירות שבה נטען רכיב התוכן הכי גדול באתר. אם אתם מחליטים להשתמש ב-CDN לתמונות, כדאי לזכור כמה דברים:
- תמונות שמוצגות מרשתות CDN יכולות להגיע משרת ממקורות שונים, מה שעלול להאריך את זמן הגדרת החיבור של האתר. כשזה אפשרי, נסו להשתמש ב-CDN של תמונות שמעביר את הבקשות דרך המקור הראשי, כדי שלא תוסיפו עוד מקורות שהדפדפן צריך להתחבר אליהם. ההשפעה של זה זהה לאירוח עצמי של תמונות במקור הראשי.
- כדאי להשתמש בערך המאפיין
"high"שלfetchpriorityברכיב התמונה של ה-LCP, כדי שהדפדפן יוכל להתחיל לטעון את התמונה הזו בהקדם האפשרי. - אם אי אפשר לגלות תמונה באופן מיידי ב-HTML הראשוני, כדאי להשתמש בהנחיה
rel=preloadלתמונה המועמדת ל-LCP כדי שהדפדפן יוכל לטעון את התמונה הזו מראש. - אם אתם לא יכולים להשתמש בשרת proxy דרך המקור, והדפדפן לא יידע איזו תמונה לטעון עד לשלב מאוחר יותר בטעינת הדף, הגדירו חיבור ל-CDN של התמונה ממקורות שונים בשלב מוקדם ככל האפשר כדי לקצר את שלב טעינת המשאבים של תמונות פוטנציאליות ל-LCP.