רשתות להעברת תוכן תמונות (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 של התמונה. לדוגמה, ייתכן שתראו כתובת אתר שנראית כך:
הבא: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
כתובת ה-URL הזו תאחזר את התמונה הקיימת בכתובת https://flowers.com/daisy.jpg ותבצע אופטימיזציה שלה.
ייתכן שפורמט הקובץ המבוקש (בדוגמה הזו) לא יהיה זהה לפורמט
הפורמט של קובץ התמונה שהוחזר (WebP, בדוגמה). ה-HTTP content-type
מציין לדפדפן באיזה פורמט נמצאת כתובת ה-URL כדי שהוא יוכל לעבד את כתובת ה-URL
המתאים. הדבר עלול לגרום לבלבול אם הקובץ נשמר בדיסק ומשמש
תוכנה אחרת שמצפה שהפורמט יתאים לסיומת הקובץ.
דרך נוספת שנתמכת באופן נרחב להעלאת תמונות ל-CDN של תמונות היא לשלוח אותן בבקשת HTTP POST ל-API של ה-CDN של התמונה.
מפתח אבטחה
מפתח אבטחה מונע מאנשים אחרים ליצור גרסאות חדשות של התמונות שלכם. כשתכונה זו מופעלת, כל גרסה חדשה של תמונה דורשת מפתח אבטחה.
אם מישהו מנסה לשנות את הפרמטרים של כתובת האתר של התמונה, לא מספק מפתח אבטחה תקף, הוא לא יוכל ליצור מפתח אבטחה חדש . רשת ה-CDN של התמונות דואגת לפרטי היצירה והמעקב למפתחות אבטחה.
טרנספורמציות
רשתות CDN של תמונות מציעות עשרות, ובמקרים מסוימים גם מאות, של תמונות שונות וטרנספורמציות. הטרנספורמציות האלה מצוינות במחרוזת של כתובת ה-URL, אין הגבלות על שימוש במספר טרנספורמציות בו-זמנית. כדי לשפר את ביצועי האינטרנט, הטרנספורמציות החשובות ביותר לתמונה הן הגודל, פיקסלים צפיפות, פורמט ודחיסה. הטרנספורמציות האלה מעבר ל-CDN של תמונות בדרך כלל מקטין את קובצי התמונות באתר.
מכיוון שבדרך כלל יש את ההגדרה האובייקטיבית הטובה ביותר לביצועים וטרנספורמציות מסוימות, חלק מרשתות ה-CDN של התמונות תומכים ב-"auto" למצבים האלה וטרנספורמציות. לדוגמה, במקום לציין שתמונות יעברו טרנספורמציה בפורמט WebP, אפשר לאפשר ל-CDN לבחור ולהציג באופן אוטומטי את בפורמט אופטימלי. רשת CDN של תמונות יכולה לקבוע את הדרך הטובה ביותר לטרנספורמציה של תמונה באמצעות האותות הבאים, בין היתר:
- רמזים של לקוחות (לדוגמה, רוחב אזור התצוגה, DPR ורוחב התמונה)
Save-Dataכותרת- הסוכן המשתמש כותרת הבקשה
- Network Information API
לדוגמה, ה-CDN של התמונה עשוי להציג AVIF לדפדפן Chrome, WebP to Edge ו-JPEG לדפדפן ישן מאוד. ההגדרות האוטומטיות פופולריות כי הן מאפשרות לנצל את היתרונות של רשת CDN למומחית באופטימיזציה של תמונות תצטרכו לשנות את הקוד כדי לאמץ טכנולוגיות חדשות כשה-CDN של התמונות מתחיל שתומכים בהם.
סוגים של רשתות CDN של תמונות
יש שתי קטגוריות עיקריות של רשתות CDN של תמונות: בניהול עצמי ו בניהול צד שלישי.
רשתות CDN של תמונות בניהול עצמי
רשתות CDN בניהול עצמי יכולות להיות בחירה טובה לאתרים עם צוות מהנדסי תוכנה להרגיש בטוחים לתחזק תשתית משלהם.
- אהבתי הוא המשחק הפופולרי ביותר בניהול עצמי CDN של תמונות. זו אפליקציה בקוד פתוח שניתן להשתמש בה בחינם, אבל יש בה פחות תכונות בהשוואה רוב רשתות ה-CDN המסחריות, והתיעוד שלהן מוגבל במידה מסוימת. אתרים שמשתמשים בסימן 'אהבתי' כוללים את Wikipedia, ריבוע, ו-99 עיצובים. ראו כיצד להתקין את Thumbor image CDN עבור הוראות להגדרה שלו.
- דמיוני
- הדמיה
רשתות CDN של תמונות של צד שלישי
רשתות CDN של תמונות צד שלישי מספקות רשתות CDN של תמונות כשירות. באותו אופן, ספקי שירותי ענן מספקים שרתים ותשתיות אחרות בתשלום, רשתות CDN של תמונות. שירותי אופטימיזציה והצגה של תמונות בתשלום. כי תמונה של צד שלישי רשתות CDN שומרות על הטכנולוגיה הבסיסית, בדרך כלל אפשר להתחיל להשתמש די מהר, למרות שהעברה מלאה של אתר גדול עשויה להימשך ארוכה יותר. רשתות CDN של תמונות צד שלישי בדרך כלל מתומחרות בהתאם לרמות השימוש, עם רוב רשתות ה-CDN שנותנים שירות ללא תשלום או תקופת ניסיון בחינם מאפשרים לכם לנסות המוצר שלהם.
בחירת CDN של תמונות
יש הרבה אפשרויות טובות לרשתות CDN של תמונות. לחלק יש יותר תכונות מאשר לאחרים, אבל כל אחד מהם יכול לעזור לכם לחסוך בייטים בתמונות וכתוצאה מכך לטעון דפים מהר יותר. מלבד קבוצות תכונות, יש גורמים נוספים שצריך לקחת בחשבון כשבוחרים image CDN כולל עלות, תמיכה, תיעוד וקלות ההגדרה או ההעברה.
ההשפעות על Largest Contentful Paint (LCP)
תמונות הן חלק בלתי נפרד מחוויית המשתמש באתרים רבים, גורם חשוב במדד המהירות שבה נטען רכיב התוכן הכי גדול (LCP) של אתר. הנה רשימה של יש כמה דברים שחשוב לזכור אם מחליטים להשתמש ב-CDN של תמונות:
- התמונות שמוצגות מרשתות CDN יכולות להגיע משרת ממקורות שונים, שיכול להאריך את זמן הגדרת החיבור של האתר. כשהדבר אפשרי, כדאי להשתמש בתמונה רשת CDN שמספקת שרתי proxy דרך המקור הראשי, כך שלא מוסיפים מקורות נוספים שהדפדפן יתחבר אליו. האפקט הזה זהה לזה של תמונות באירוח עצמי במקור הראשי.
- כדאי להשתמש בערך המאפיין
fetchpriorityשל"high"ברכיב התמונה מסוג LCP, כדי שהדפדפן יוכל להתחיל לטעון את התמונה ברגע ככל האפשר. - אם תמונה לא מופיעה באופן מיידי ב-HTML הראשוני, כדאי להשתמש
rel=preloadרמז לתמונה של מועמד ה-LCP כדי שהדפדפן יוכל לטעון את התמונה לפני בזמן האימון. - אם אי אפשר להפעיל שרת proxy דרך המקור והדפדפן לא יודע איזו תמונה כדי להיטען מאוחר יותר במהלך טעינת הדף, להגדיר בהקדם האפשרי חיבור ל-CDN של תמונות ממקורות שונים כדי לקצר את שלב טעינת המשאב לתמונות פוטנציאליות של מועמדים ל-LCP.