CDN לתמונות (Image CDN) הוא שירות שמקבל את התמונה המקורית ומייצר ממנה, לפי הצורך, גרסה מותאמת לכל גולש: בגודל הנכון למסך, בפורמט המודרני ביותר שהדפדפן תומך בו, ובדחיסה מתאימה — ומגיש אותה משרתים קרובים לגולש. במקום להכין מראש עשר גרסאות של כל תמונה, מעלים תמונה אחת, וכתובת התמונה עצמה אומרת לשירות מה לייצר. לפי web.dev, מעבר ל-CDN לתמונות יכול להוריד 40%–80% ממשקל התמונות. זה פתרון חזק לאתרים עם הרבה תמונות — חנויות, אינדקסים, אתרי תוכן — אבל לא תמיד הכרחי.
במה זה שונה מ-CDN רגיל
CDN רגיל שומר עותקים של הקבצים שלכם — כמו שהם — בשרתים ברחבי העולם, ומגיש אותם מהשרת הקרוב לגולש. הוא חוסך מרחק, אבל אם העליתם תמונה של 3 מגה-בייט, הגולש יקבל 3 מגה-בייט, רק מהר יותר. CDN לתמונות גם משנה את הקובץ: מקטין, ממיר ודוחס. על CDN באופן כללי כתבתי במאמר מה זה CDN.
איך זה עובד: הכתובת היא ההוראה
לפי web.dev, כתובת התמונה בשירות כזה כוללת גם את התמונה המקורית וגם את השינויים המבוקשים. למשל, כתובת בסגנון:
https://images.example.com/products/shoe.jpg?w=600&format=auto&q=75
מבקשת את התמונה ברוחב 600 פיקסלים, בפורמט שנבחר אוטומטית ובאיכות 75. התחביר המדויק שונה בין שירות לשירות, אבל הרעיון זהה. הגרסה שנוצרת נשמרת במטמון, כך שהבקשה הבאה לאותה גרסה מוגשת מיד.
השינויים החשובים ביותר לביצועים, לפי web.dev, הם גודל, צפיפות פיקסלים, פורמט ודחיסה — ורוב השירותים מציעים הגדרת "אוטומטי" לכל אחד מהם.
בחירת פורמט אוטומטית
היתרון הגדול: אותה כתובת מחזירה פורמט שונה לדפדפנים שונים. web.dev נותן דוגמה של AVIF לכרום, WebP לדפדפן אחר, ו-JPEG לדפדפנים ישנים מאוד. השירות מחליט לפי מידע שהדפדפן שולח, כמו User-Agent, רמזי לקוח (Client Hints) על רוחב המסך וצפיפות הפיקסלים, וכותרת Save-Data של גולשים שביקשו לחסוך בנתונים. בלי שירות כזה, צריך להכין כל תמונה בכמה פורמטים ולכתוב <picture> עם כמה מקורות.
שני סוגים
| שירות מנוהל | אירוח עצמי | |
|---|---|---|
| דוגמאות | שירותים מסחריים, כולל אפשרויות ב-CDN כמו Cloudflare | קוד פתוח כמו Thumbor או Imaginary |
| הקמה | מהירה | דורשת שרת ותחזוקה |
| עלות | לפי שימוש, לרוב עם שכבה חינמית או ניסיון | חינם, אבל משלמים בשרת ובזמן |
| מתאים ל | רוב העסקים | צוות שרגיל לתחזק תשתית |
web.dev מציין שהשירותים בקוד פתוח חינמיים אבל עם פחות תכונות, ושהשירותים המנוהלים מתומחרים לפי שכבות שימוש. לפני שבוחרים, כדאי לבדוק איך התמחור מחושב — לפי מספר התמונות המקוריות, מספר הגרסאות שנוצרות או נפח התעבורה — כי באתר עם עשרות אלפי תמונות זה מצטבר. מחירים משתנים, ולכן בדקו את העמוד הרשמי של כל שירות.
מתי זה שווה את זה
כן:
- חנות עם מאות או אלפי מוצרים, כל אחד עם כמה תמונות.
- אינדקס או פורטל שבו משתמשים מעלים תמונות בגדלים ובפורמטים אקראיים — אי אפשר לסמוך שמישהו ידחוס אותן לפני ההעלאה.
- אתר עם הרבה מבקרים מהטלפון, שבו כל קילו-בייט חשוב.
- עיצוב שמציג אותה תמונה בגדלים רבים — כרטיס, עמוד מלא, תמונה ממוזערת.
לא בהכרח:
- אתר תדמית עם עשרים תמונות שכבר נדחסו נכון. וורדפרס יוצרת גדלים שונים בעצמה ומוסיפה
srcset, ותוסף המרה ל-WebP פותר את רוב השאר. ראו אופטימיזציה לתמונות.
מה לא לשכוח
- תמונת ה-LCP — גם מ-CDN לתמונות, היא צריכה להיות בתגית
<img>רגילה, בלי טעינה עצלה, עם עדיפות גבוהה. השירות לא פותר בעיה של תמונה שהדפדפן מגלה מאוחר; ראו שיפור LCP. - מידות —
widthו-heightעל התמונה, כדי למנוע תזוזות. - טקסט חלופי — הוא לא משתנה עם השירות, וצריך לכתוב אותו נכון; ראו טקסט חלופי לתמונות.
- דומיין — אם התמונות מוגשות מדומיין אחר, מוסיפים לו preconnect, ושוקלים להגיש מתת-דומיין של האתר כדי לשמור על הקשר בין התמונות לאתר.
- תלות — אם השירות נופל או משנה תנאים, כל התמונות באתר תלויות בו. שימרו את המקור אצלכם.
שאלות נפוצות
Cloudflare יכול לשמש כ-CDN לתמונות?
Cloudflare מגיש תמונות מהמטמון כברירת מחדל, ויש לו גם שירותים נפרדים לשינוי גודל ופורמט. מה כלול בכל תוכנית ומה עולה כסף — בדקו בתיעוד העדכני שלו. על Cloudflare באופן כללי כתבתי במאמר Cloudflare מה זה.
זה מחליף דחיסה לפני העלאה?
במידה רבה כן — השירות דוחס בעצמו. ובכל זאת, לא כדאי להעלות קבצים ענקיים ישירות מהמצלמה: הם תופסים מקום באחסון ומאטים את העיבוד הראשוני.
באתרים עם הרבה תמונות, הבחירה איך לטפל בהן — בתבנית, בוורדפרס או בשירות חיצוני — משפיעה על כל עמוד. אם התמונות מכבידות על האתר שלכם, ראו שיפור מהירות אתר או כתבו לי.
אהבתם את המאמר?
