תרחישי שימוש באופטימיזציה של תמונות

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

סדר הטרנספורמציות

הפעולות במחרוזת של פרמטר השאילתה imop מופעלות ברצף משמאל לימין, למעט הפעולות metadata או scale שמופעלות ראשונות והפעולה canvas שמופעלת אחרונה. מכיוון שכל פעולה משפיעה ישירות על הפלט החזותי של הפעולה הקודמת, רצף הפרמטרים משפיע על האיכות החזותית הסופית ועל שמירת הפרטים של תמונת הנגזרת.

נניח שיש תמונת מקור ברוחב של 1,000 פיקסלים ובגובה של 1,000 פיקסלים:

דוגמה: Resize ואחריו Crop

https://www.example.com/image.jpg?imop=Resize,height=200;Crop,left=0.5

  1. שינוי גודל: התמונה מוקטנת קודם מ-1,000 × 1,000 פיקסלים ל-200 × 200 פיקסלים כדי לעמוד בדרישות הפרמטר height=200.

  2. ‫Crop: הפעולה left=0.5 מסירה את החצי השמאלי של התמונה שכבר הוקטנה.

תוצאה: תמונה סופית בגודל 100x200 פיקסלים שמייצגת את 50% התוכן הימני. מכיוון שהתמונה כולה הוקטנה לפני החיתוך, באזור הסופי נשמרים הרבה פחות פרטים.

דוגמה : Crop ואחריה Resize

https://www.example.com/image.jpg?imop=Crop,left=0.5;Resize,height=200

  1. ‫Crop: הפעולה left=0.5 מחלצת קודם את 50% הימניים של תמונת המקור ברזולוציה גבוהה, ויוצרת תמונת ביניים 500 x 1000 px.

  2. שינוי גודל: הפעולה height=200 משנה את הגודל של החלק החתוך לגובה הסופי שלו.

תוצאה: תמונה סופית בגודל 100‎ * 200 px. התמונה המקורית נחתכה קודם ואחר כך שונתה הגודל שלה, ולכן הפלט הסופי כולל הרבה יותר פרטים וחדות.

התנהגות של מתיחה והגדלה

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

כדי לשנות את ההתנהגות הזו ולכפות על נכס לעבור המרה לרזולוציה גבוהה יותר, צריך להצהיר באופן מפורש על הערך stretch.

דרישות האימות לשדרוג

  • כלל כפול לציון מידות: אפשר להשתמש בערך stretch רק אם מציינים במפורש את הפרמטרים width ו-height בפעולה Resize

  • הגבלה על מימד יחיד: אם כוללים את scaling=stretch בהגדרה של מימד יחיד בלבד, כמו width או height, שירות אופטימיזציית התמונות דוחה את הבקשה כולה.

לדוגמה,

בקשה תקינה: ?imop=resize,width=500,height=500,scaling=stretch

בקשה לא חוקית: ?imop=resize,width=500, scaling=stretch

שמירה במטמון וניקוי מטמון

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

התנהגות שמירה במטמון

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

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

התנהגות של ביטול תוקף

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

איך פועל פסילת וריאציות

כששולחים בקשה לביטול תוקף של מטמון באמצעות תבנית נתיב שתואמת לכתובת URL של תמונת בסיס, למשל,/images/my-picture.jpg, ‏ Cloud CDN מזהה ומסיר באופן אוטומטי:

  • תמונת המקור המקורית שנשמרה במטמון.

  • כל הווריאציות הקודמות שנוצרו

אפשר להחיל ביטול תוקף של מטמון Cloud CDN באמצעות:

  • מסוף Google Google Cloud : עוברים אל Network Services (שירותי רשת) > Cloud CDN, בוחרים את מקור התוכן ועוברים לכרטיסייה Cache Invalidation (ביטול תוקף של נתונים במטמון). לחלופין, אפשר לעבור אל Network Services (שירותי רשת) > Load Balancing (איזון עומסים), לבחור את מאזן העומסים ולהשתמש בכרטיסייה Cache Invalidation (ביטול תוקף של מטמון).

  • ‫Google Cloud CLI: משתמשים בפקודה Google Cloud CLI compute url-maps invalidate-cdn-cache.

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

לדוגמה:

כדי לבטל את התוקף של /images/my-picture.jpg ושל כל הווריאציות המותאמות שלו באופן גלובלי:

  • נתיב: מציינים את הנתיב המדויק /images/my-picture.jpg.

  • מארח (אופציונלי): מציינים את המארח אם רוצים לנקות את התמונה רק עבור דומיין ספציפי.

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

פרופיל צבעים וכיוון התמונה ב-EXIF (נורמליזציה)

בסמארטפונים ובמצלמות דיגיטליות מודרניים, תמונות נשמרות לעיתים קרובות עם רשתות פיקסלים לא מסובבות, והם מסתמכים על תג כיוון EXIF מוטמע כדי להנחות את מכשיר הצפייה לסובב את התמונה. לדוגמה, 90 מעלות בכיוון השעון לתצוגה לאורך. באופן דומה, פרופילי צבע מוטמעים של ICC מגדירים איך הצבעים מוצגים במסכים שונים.

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

תהליך הנורמליזציה

  • לפני שמבצעים טרנספורמציות, מנוע ה-Edge קורא תגי כיוון של EXIF ומטא-נתונים של פרופיל צבע ICC, ומחיל אותם פיזית על רשת הפיקסלים. כך אפשר לוודא שהפרמטרים הבאים של crop ו-resize יהיו צפויים.

  • פעולות כמו crop,‏ resize או scale מבוצעות בצורה נכונה ביחס למידות הוויזואליות האמיתיות כדי למנוע שגיאות ויזואליות.

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

המאמרים הבאים