יכול להיות שאתם כבר מכירים את המושג המרכזי של רשת להעברת תוכן (CDN): רשת של רשתות מבוזרות אבל מחוברות שרתים שמעבירים נכסים למשתמשים במהירות וביעילות. כשמעלים קובץ לספק CDN, נוצר עותק משוכפל בצמתים האחרים של רשת ה-CDN ברחבי העולם. כשמשתמש מבקש קובץ, הנתונים יישלחו על ידי הצומת לפי מיקום גיאוגרפי שהכי קרוב למשתמש הזה, וכך מקצר את זמן האחזור. האופי המבוזר של רשתות CDN מספק גם יתירות במקרים של הפסקות זמניות ברשת או כשל בחומרה ואיזון עומסים כדי לצמצם עליות חדות בתעבורת נתונים.
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_, short
את 'איכות', ולאחר מכן קיצור המספרי של רמת הדחיסה:
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
במקרים נדירים תצטרכו לכלול את המידע הזה באופן ידני. עם זאת, הודות למערך תכונות מדהימות קיימים ברוב רשתות ה-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 באופן מפורש
לספק את הקידוד היעיל ביותר שהדפדפן מסוגל להבין:
<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 של תמונות מקובלות מציעים תוכניות חינמיות מבוססות-תכונות לשימוש אישי. כדי ליצור נכסי תמונות נדרשים רוחב פס ושטח אחסון להעלאות, לעיבוד ב- השרת יבצע טרנספורמציה לתמונות, ומקום נוסף לתוצאות הטרנספורמציה במטמון של המשתמש - כך ששימוש מתקדם ואפליקציות עם תנועה רבה עשויים להצריך תוכנית בתשלום.