רשתות להעברת תוכן של תמונות

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

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

המשתמש יעלה לספק תמונה קנונית ברזולוציה גבוהה, ותיצור כתובת URL שתשמש לגישה אליה:

https://res.cloudinary.com/demo/image/upload/sample.jpg

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

אפשר להחיל כל מספר של טרנספורמציות על ידי הוספת ערכים שמופרדים בפסיקים לכתובת ה-URL, לפני שם הקובץ והתוסף. כלומר, ניתן לשנות את התמונה שהועלתה לפי הצורך באמצעות src של הרכיב img שמבקש אותה.

<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">

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

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

<img
  src="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w"
  srcset="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w,
        https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg 800w,
        https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg 600w"
  alt="…">

אנחנו יכולים לציין באופן ידני את רמת הדחיסה הרצויה באמצעות התחביר שאמור להיות מוכר עכשיו: q_, קיצור של "quality" ואחריו הקיצור המספרי של רמת הדחיסה:

<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg"  alt="…">

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

דחיסה אוטומטית

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

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

עד כמה התהליך הזה נשמע מורכב, מבחינת Cloudinary, ההוספה של q_auto לכתובת URL של תמונה מאפשרת את התכונה הזו:

<img src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg" alt="…">
<!-- 250 KB-->

<img src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg" alt="…">
<!-- 134 KB-->

קידוד אוטומטי וניהול משא ומתן על תוכן

כשמקבלים בקשה לתמונה, רשתות CDN של תמונות קובעים את הקידוד המודרני ביותר שהדפדפן תומך בו באמצעות כותרות HTTP שהדפדפן שולח לצד בקשות לנכסים – ובמיוחד, הכותרת Accept. הכותרת הזו מציינת את הקידודים שהדפדפן יכול להבין, באמצעות אותם סוגי מדיה שבהם נשתמש כדי לאכלס את המאפיין type של רכיב <source> של רכיב <picture>.

לדוגמה, אם מוסיפים את הפרמטר f_auto לרשימת הטרנספורמציות של התמונות בכתובת ה-URL של הנכס, Cloudinary מורה באופן מפורש ל-Cloudinary לספק את הקידוד היעיל ביותר שהדפדפן יכול להבין:

<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">

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

התוצאה הסופית היא תהליך שפוטר אתכם לא רק מיצירת קבצים בקידוד לסירוגין ובכוונון ידני של הגדרות הדחיסה (או תחזוקה של מערכת שמבצעת את המשימות האלה בשבילכם), וגם חוסך את הצורך להשתמש ב-<picture> ובמאפיין type כדי להעביר את הקבצים האלה למשתמשים ביעילות. לכן, שימוש בתחביר srcset ובתחביר sizes בלבד עדיין יכול לספק למשתמשים תמונות המקודדות כך – לדוגמה – AVIF, עם חזרה ל-WebP (או JPEG-2000, ב-Safari בלבד), תוך חזרה לקידוד ההגיוני ביותר מדור קודם.

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