אופטימיזציה של תמונות באמצעות Thumbor

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

Katie Hempenius

Thumbor הוא CDN חינמי לתמונות בקוד פתוח המאפשר לדחוס תמונות, לשנות את הגודל שלהן ולשנות אותן. הפוסט הזה מאפשר לך לנסות את Thumbor ממקור ראשון בלי שיהיה צורך להתקין דבר. הגדרנו שרת Thumbor ל-Sandbox כדי לאפשר לך לנסות ב-http://34.67.235.246:8888. התמונה שאותה אתם עומדים לנסות זמינה בכתובת http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg.

דרישות מוקדמות

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

הערה: אם ברצונך להתקין את Thumbor בשרת שלך ולאחר מכן לעקוב אחר הפוסט הזה, עיין בכיצד להתקין CDN של תמונת Thumbor. בכל פעם שתראה http://34.67.235.246:8888 בפוסט הזה, יהיה עליך להחליף את המקור הזה במקור של מופע ה-Thumbor שלך.

פורמט כתובת URL של תמונה ממוזערת

כפי שצוין במאמר שימוש ב-CDN של תמונות לביצוע אופטימיזציה של תמונות, כל רשת CDN של תמונות משתמשת בפורמט מעט שונה של כתובות URL לתמונות. איור 1 מייצג את הפורמט של Thumbor.

פורמט כתובת URL של סימון 'אהבתי'

מקור

כמו כל המקורות, המקור של כתובת URL של סימון 'אהבתי' מורכב משלושה חלקים: סכמה (שהיא כמעט תמיד http או https), מארח ויציאה. בדוגמה הזו, המארח מזוהה באמצעות כתובת IP, אבל אם משתמשים בשרת DNS, הוא עשוי להיראות כך: thumbor-server.my-site.com. כברירת מחדל, Thumbor משתמש ביציאה 8888 כדי להציג תמונות.

מפתח אבטחה

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

גודל

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

ננסה עכשיו:

1. לחץ על כתובת האתר הבאה כדי להציג את התמונה בגודלה המקורי בכרטיסייה חדשה: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg

   

   תמונה מקורית

2. משנים את גודל התמונה ל-100x100 פיקסלים: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg

התמונה שונתה ל- 100x100 פיקסלים

מסננים

מסננים משנים תמונה. החלק של המסננים בקטע של כתובת ה-URL מתחיל ב-filters: ולאחר מכן מופיעה רשימת מסננים המופרדים בנקודתיים. אפשר להשמיט את הסינון אם לא משתמשים במסננים. התחביר של מסננים נפרדים דומה לקריאה לפונקציה (לדוגמה grayscale()) שמכילה אפס ארגומנטים או יותר.

ננסה עכשיו:

1. החלת מסנן יחיד: אפקט טשטוש גאוסיאני ברדיוס של 25 פיקסלים: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg

   

   תמונה מטושטשת

2. החלת מסננים מרובים. המירו לגווני אפור וסובבו את התמונה ב-90 מעלות: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

תמונה בגווני אפור ומסובבת

טרנספורמציה של תמונות

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

דחיסה

מסנן האיכות דוחס תמונות בפורמט JPEG לרמת איכות התמונה הרצויה (1-100). אם לא תספקו רמת איכות, Thumbor ידחס את התמונה לרמת איכות של 80. זוהי ברירת מחדל טובה: לרמות איכות 80-85 יש בדרך כלל השפעה מועטה על איכות התמונה, אבל הן בדרך כלל מקטינות את גודל התמונה ב-30%-40%.

ננסה עכשיו:

1. דחס את התמונה באיכות 1 (גרועה מאוד): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg

   

   תמונה באיכות נמוכה

2. דחוס את התמונה באמצעות הגדרות הדחיסה המוגדרות כברירת מחדל של Thumbor: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg

תמונה דחוסה

שינוי הגודל מתבצע

כדי לשנות את גודל התמונה תוך שמירה על הפרופורציות המקוריות שלה, צריך להשתמש בפורמט $WIDTHx0 או 0x$HEIGHT בחלק size של מחרוזת כתובת ה-URL.

ננסה עכשיו:

1. יש לשנות את גודל התמונה לרוחב של 200 פיקסלים תוך שמירה על הפרופורציות המקוריות: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg

   

   התמונה שונתה לרוחב של 200 פיקסלים

2. יש לשנות את גודל התמונה ל-500 פיקסלים תוך שמירה על הפרופורציה המקורית: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

התמונה שונתה לגובה של 500 פיקסלים

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

ננסה עכשיו:

1. משנים את גודל התמונה ל-50% מגודל התמונה המקורית: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

   

   גודל התמונה השתנה ל-50% מגודל התמונה המקורית

2. שנה את גודל התמונה לרוחב של 1,000 פיקסלים, ולאחר מכן שנה את גודל התמונה ל-10% מהגודל הנוכחי שלה: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg

התמונה שונתה לרוחב של 100 פיקסלים

השיטות האלה הן רק כמה דוגמאות לאפשרויות החיתוך ושינוי הגודל הרבות של Thumbor. במאמר שימוש תוכלו לקרוא על אפשרויות נוספות.

פורמטים של קבצים

מסנן הפורמט ממיר תמונות לjpeg, webp, gif או png. חשוב לזכור שאם מבצעים אופטימיזציה לביצועים, מומלץ להשתמש ב-JPEG או WebP, כי קובצי PNG ו-GIF הם בדרך כלל גדולים יותר, ולא צריך לדחוס אותם.

ננסה עכשיו:

1. המרת התמונה ל-WebP. אם פותחים את החלונית רשת של כלי הפיתוח, כותרת התגובה של Content-Type במסמך מראה שהשרת החזיר תמונת WebP: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg

כותרת התגובה content-type שמוצגת בכלי הפיתוח

השלבים הבאים

נסה מסננים וטרנספורמציות אחרים בתמונה hero.jpg.

אם אתם עוקבים אחרי ההתקנה של Thumbor משלכם, כדאי לעיין בנספח שבהמשך שמסביר איך ולמה להשתמש בקובץ thumbor.conf.

נספח: thumbor.conf

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

1. מריצים את הפקודה thumbor-config כדי ליצור קובץ thumbor.conf חדש.

   thumbor-config > ./thumbor.conf
   

2. פותחים את קובץ thumbor.conf החדש. הפקודה thumbor-config יצרה קובץ שמכיל הסבר על כל אפשרויות ההגדרה של Thumbor.

3. ניתן לקבוע את ההגדרות על ידי ביטול הוספת התגובות לשורות ושינוי ערכי ברירת המחדל. כדאי לקבוע את ההגדרות הבאות:

   • QUALITY
   • AUTO_WEBP
   • MAX_WIDTH וגם MAX_HEIGHT
   • ALLOW_ANIMATED_GIFS

4. כדי להשתמש בהגדרות של thumbor.conf, אפשר להריץ את Thumbor עם הדגל --conf.

   thumbor --conf /path/to/thumbor.conf