אפשר להשתמש ב-Thumbor כדי לשנות את הגודל, הדחיסה והטרנספורמציה של תמונות על פי דרישה.
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 של תמונות לביצוע אופטימיזציה של תמונות. בנוסף, ההנחה היא שכבר בנית אתרים בסיסיים בעבר.
פורמט כתובת URL של תמונה ממוזערת
כפי שצוין במאמר שימוש ב-CDN של תמונות לביצוע אופטימיזציה של תמונות, כל רשת CDN של תמונות משתמשת בפורמט מעט שונה של כתובות URL לתמונות. איור 1 מייצג את הפורמט של Thumbor.
מקור
כמו כל המקורות, המקור של כתובת URL של סימון 'אהבתי' מורכב משלושה חלקים: סכמה (שהיא כמעט תמיד http
או https
), מארח ויציאה. בדוגמה הזו, המארח מזוהה באמצעות כתובת IP, אבל אם משתמשים בשרת DNS, הוא עשוי להיראות כך: thumbor-server.my-site.com
. כברירת מחדל, Thumbor משתמש ביציאה 8888
כדי להציג תמונות.
מפתח אבטחה
החלק unsafe
בכתובת ה-URL מציין שבחרת להשתמש ב-Thumbor ללא מפתח אבטחה. מפתח אבטחה מונע ממשתמש לבצע שינויים לא מורשים בכתובות ה-URL של התמונות שלך. שינוי כתובת ה-URL של התמונה יגרום לכך שמשתמש יוכל להשתמש בשרת (ובחשבון האירוח שלך) כדי לשנות את גודל התמונות שלו, או כדי לגרום לעומס יתר על השרת שלך, באופן זדוני יותר. המדריך הזה לא מסביר איך להגדיר את התכונה של מפתח אבטחה ל-Thumbor.
גודל
חלק זה בכתובת ה-URL מציין את הגודל הרצוי של תמונת הפלט. אפשר להשמיט את זה אם לא רוצים לשנות את גודל התמונה. Thumbor ישתמש בגישות שונות כמו חיתוך או קנה מידה כדי להשיג את הגודל הרצוי, בהתאם לפרמטרים האחרים של כתובת האתר. בקטע הבא בפוסט הזה נסביר יותר בפירוט איך לשנות גודל של תמונות.
ננסה עכשיו:
לחץ על כתובת האתר הבאה כדי להציג את התמונה בגודלה המקורי בכרטיסייה חדשה: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg
משנים את גודל התמונה ל-100x100 פיקסלים: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg
מסננים
מסננים משנים תמונה. החלק של המסננים בקטע של כתובת ה-URL מתחיל ב-filters:
ולאחר מכן מופיעה רשימת מסננים המופרדים בנקודתיים. אפשר להשמיט את הסינון אם לא משתמשים במסננים. התחביר של מסננים נפרדים דומה לקריאה לפונקציה (לדוגמה grayscale()
) שמכילה אפס ארגומנטים או יותר.
ננסה עכשיו:
החלת מסנן יחיד: אפקט טשטוש גאוסיאני ברדיוס של 25 פיקסלים: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg
החלת מסננים מרובים. המירו לגווני אפור וסובבו את התמונה ב-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 (גרועה מאוד): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg
דחוס את התמונה באמצעות הגדרות הדחיסה המוגדרות כברירת מחדל של Thumbor: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg
שינוי הגודל מתבצע
כדי לשנות את גודל התמונה תוך שמירה על הפרופורציות המקוריות שלה, צריך להשתמש בפורמט $WIDTHx0
או 0x$HEIGHT
בחלק size
של מחרוזת כתובת ה-URL.
ננסה עכשיו:
יש לשנות את גודל התמונה לרוחב של 200 פיקסלים תוך שמירה על הפרופורציות המקוריות: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg
יש לשנות את גודל התמונה ל-500 פיקסלים תוך שמירה על הפרופורציה המקורית: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg
אפשר גם להשתמש במסנן פרופורציה כדי לשנות את גודל התמונות כך שיתאימו לאחוז מתמונת המקור. אם מציינים גודל בשילוב עם מסנן היחס, התמונה תשתנה ולאחר מכן המערכת תחיל את מסנן היחס.
ננסה עכשיו:
משנים את גודל התמונה ל-50% מגודל התמונה המקורית: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg
שנה את גודל התמונה לרוחב של 1,000 פיקסלים, ולאחר מכן שנה את גודל התמונה ל-10% מהגודל הנוכחי שלה: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg
השיטות האלה הן רק כמה דוגמאות לאפשרויות החיתוך ושינוי הגודל הרבות של Thumbor. במאמר שימוש תוכלו לקרוא על אפשרויות נוספות.
פורמטים של קבצים
מסנן הפורמט ממיר תמונות לjpeg
, webp
, gif
או png
. חשוב לזכור שאם מבצעים אופטימיזציה לביצועים, מומלץ להשתמש ב-JPEG או WebP, כי קובצי PNG ו-GIF הם בדרך כלל גדולים יותר, ולא צריך לדחוס אותם.
ננסה עכשיו:
- המרת התמונה ל-WebP. אם פותחים את החלונית רשת של כלי הפיתוח, כותרת התגובה של Content-Type במסמך מראה שהשרת החזיר תמונת WebP: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg
השלבים הבאים
נסה מסננים וטרנספורמציות אחרים בתמונה hero.jpg
.
אם אתם עוקבים אחרי ההתקנה של Thumbor משלכם, כדאי לעיין בנספח שבהמשך שמסביר איך ולמה להשתמש בקובץ thumbor.conf
.
נספח: thumbor.conf
ניתן לקבוע כברירת מחדל הרבה מאפשרויות התצורה שנדונו בפוסט הזה, כמו גם רבות אחרות, על ידי הגדרת קובץ תצורה של thumbor.conf
ושימוש בו. ההגדרות בקובץ thumbor.conf
יחולו על כל התמונות, אלא אם הפרמטרים של מחרוזת כתובת ה-URL יבטלו אותן.
מריצים את הפקודה
thumbor-config
כדי ליצור קובץthumbor.conf
חדש.thumbor-config > ./thumbor.conf
פותחים את קובץ
thumbor.conf
החדש. הפקודהthumbor-config
יצרה קובץ שמכיל הסבר על כל אפשרויות ההגדרה של Thumbor.ניתן לקבוע את ההגדרות על ידי ביטול הוספת התגובות לשורות ושינוי ערכי ברירת המחדל. כדאי לקבוע את ההגדרות הבאות:
QUALITY
AUTO_WEBP
MAX_WIDTH
וגםMAX_HEIGHT
ALLOW_ANIMATED_GIFS
כדי להשתמש בהגדרות של
thumbor.conf
, אפשר להריץ את Thumbor עם הדגל--conf
.thumbor --conf /path/to/thumbor.conf