עם זאת, אספקת תמונות דרך WebP אינה קלה. זה תלוי בשרת האינטרנט של השרת שלך, ה-CDN הנבחר, ערכת הנושא, תוספים למטמון וכו'.
מדריך זה יעזור לך להעביר תמונות WebP לוורדפרס בשלוש דרכים.
מה זה WebP?
פורמט תמונה חדש לאינטרנט
מאת גוגל
WebP הוא פורמט תמונה (כמו png ו-jpg) שפותח על ידי גוגל. תמונות WebP (.webp) נוטות להיות קטנות בהרבה, מה שמאיץ אתרי אינטרנט ומשתמש בפחות רוחב פס.
בהתאם לתמונה, ניתן להקטין את הגודל מ-25% ל-70%.
ל-JPEG, PNG, GIF וכו' יש יתרונות וחסרונות. הטבלה שלהלן תיתן לך רעיון:
| JPG | GIF | PNG | SVG | |
| וֶקטוֹר | ❌ | ❌ | ❌ | ✅ |
| רסטר | ✅ | ✅ | ✅ | ❌ |
| שְׁקִיפוּת | ❌ | ✅ | ✅ | ✅ |
| אנימציה | ❌ | ✅ | ✅ | ✅ |
| אָבֵד | ✅ | ❌ | ❌ | ❌ |
ל- WebP יש כמעט את כל התכונות שהוזכרו לעיל! אז למה אנחנו לא יכולים להשתמש ב-WebP בכל מקום?
למה לא להשתמש ב- WebP בכל מקום?
כפי שאתה יכול לראות, רק 80% מהמכשירים תומכים רק ב-WebP. לא רק דפדפנים מדור קודם, Safari/iOS Safari עדיין לא תומך ב-WebP.
מדוע כל כך קשה לשרת את WebP?
כפי ששמת לב, אנו מספקים תמונות בהתאם לדפדפן. אם הדפדפן אינו תומך ב-WebP, עלינו לספק להם את התמונה המקורית (jpg/png/gif).
ישנן שתי דרכים עיקריות לשרת WebP:
שימוש בתגית התמונה
אנחנו יכולים להשתמשתְמוּנָהתג כדי לומר לדפדפן שיש לנו פורמט WebP. אם הדפדפן תומך בכך, התמונה הרגילה/החלפה תיטען.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>לפי תשובה אחרת
בתשובה אחרת, כרגיל, יש לך קובץ אחד. בְּדִיוּק:
<img src="img.jpg" />כתובת אתר אחת של תמונה תומכת במשלוח של קובצי jpg ו-webp. זה מה שהשרת עושה.
למרות שמדובר בסיומת קובץ .jpg, אם הדפדפן תומך ב-WebP, התגובה תהיה WebP. נקרא גם "תגובה מגוונת".
תג תמונה לעומת תגובה מגוונת
לכל אחד יש את היתרונות והחסרונות שלו. להלן טבלת השוואה:
| תג תמונה | תגובה מגוונת | |
|---|---|---|
| עובד עם תמונות רקע | ❌ | ✅ |
| ידידותי ל-CDN | ✅ | ✅ (רק כמה) |
| יש להגדיר את השרת | ❌ | ✅ (nginx) |
| עובד עם טעינה עצלה | ✅ | ✅ |
כיצד להגיש תמונות ב-WebP בוורדפרס?
שיטה מס' 1 - השתמש ב-CDN רק עם המרה של fly WebP
זה כנראה הפתרון הפשוט ביותר. חלק מספקי CDN תומכים כיום בהמרת תמונה ל-WebP יחד עם אופטימיזציה של תמונה.
הנה כמה:
- BunnyCDN
- Cloudflare עם פולנית (תוכנית פרו)
- מעונן
- ShortPixel Adaptive Images (משתמש ב-StackPath CDN)
- WP Compress
אתה יכול גם לחסוך מקום בדיסק בשיטה זו מכיוון שאינך צריך לאחסן גם תמונות WebP רגילות וגם תמונות מומרות.
BunnyCDN
BunnyCDN מגיע עם Bunny Optimizer, שיכול לדחוס תמונות ולהמיר אותן ל-WebP תוך כדי תנועה.
שיטה מס' 2 - שימוש בתגובה מגוונת + CDN
כפי שתואר לעיל, ל"תגובת מגוון" תהיה כתובת URL של תמונה אחת שיכולה לשרת גם תמונות של WebP וגם תמונות שאינן של WebP בהתאם לדפדפן המבוקש.
אנחנו גם צריכים לבחור את ה-CDN הנכון שתומך בכותרות בקשת WebP כמפתח מטמון. אחרת, ברגע שתמונת ה-WebP תישמר במטמון בשרת, היא תועבר לדפדפנים שאינם תומכים ב-WebP.
התאמה אישית של תגובה מגוונת בוורדפרס
הדרך הקלה ביותר להגדיר תגובה עשירה עבור WebP בוורדפרס היא להשתמש בתוסף WebP Express. פשוט התקן את התוסף ולחץ על "שמור הגדרות וכפה חוקי .htaccess חדשים".
WebP Express יגדיר את ממיר ה-WebP ויחליף את הכללים כך שכאשר יקבל בקשה, הוא ימיר את התמונות ל-WebP תוך כדי תנועה, ואם הדפדפן אינו תומך ב-WebP, תמונת ברירת המחדל תסופק.
אם אתה ב-Nginx
WebP Express מוסיף את כללי השכתוב הנחוצים '.htaccess', אך עובד רק על שרת Apache, LiteSpeed או OpenLiteSpeed. אם אתה משתמש ב-Nginx אתה צריך לערוךnginx.configוהוסיפו את הקוד הבא:
# חוקי WebP Express# --------------------מיקום ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Variy Accept;expires 365d;if ($http_accept !~* "webp"){break;}try_files/wp-content/webp-express/webp-images/doc-root/$uri.webp$uri.webp/wp-content /plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content;}# נתב בקשות עבור webps לא קיימים למיקום הממיר ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ------------------ (כללי WebP Express מסתיימים כאן)הקוד לעיל מוסיף את כותרות התגובה הנדרשות (גם ניהול המטמון משתנה) ומנסה לספק WebP אם הוא קיים, אחרת מפנה אותו לממיר (בהתבסס על תמיכה בדפדפן)
ספקי CDN התומכים ב-Diverse Response
אם ספק ה-CDN שלך אינו תומך ב-WebP כמפתח מטמון, קבצי WebP יימסרו לדפדפנים שאינם תומכים ב-WebP. באופן דומה, יש סיכוי שתמונות שאינן Webp יימסרו לדפדפנים נתמכים.
BunnyCDN , KeyCDN , Google CDN וספקי CDN רבים אחרים תומכים ב-WebP כמפתח מטמון. ודא שאתה מפעיל אותם בהגדרות.
VBunnyCDN :
VKeyCDN :
האם אתה משתמש בתוכנית החינמית של Cloudflare?
לרוע המזל, התוכנית החינמית של Cloudflare אינה תומכת ב-WebP כמפתח מטמון. או השתמש ב-CDN כמו BunnCDN או שדרג לתוכנית המקצועית שלהם.
הגדר תגובה מגוונת + CDN עם ספקי אירוח פופולריים
ודא ש-WebP Express מותקן.
- Kinsta או WP Engine - צור קשר עם צוות התמיכה שלהם כדי להוסיף את תצורת ה-Nginx לעיל ולכלול את מפתח ה-Caching WebP ב-CDN שלהם (KeyCDN).
- Cloudways - פשוט התקן את WebP Express ושמור את ההגדרות באמצעות .htacess. מכיוון ש-Cloudways משתמשת בגישת Apache + Nginx היברידית, זה עובד מחוץ לקופסה.
- SiteGound - צור קשר עם התמיכה כדי להוסיף את תצורת Nginx. השתמש ב-CDN נתמך כמפורט לעיל.
- שרת LiteSpeed / OpenLiteSpeed / Apache - פשוט התקן את WebP Express ושמור הגדרות עם '.htacess'. השתמש גם ב-CDN נתמך כמפורט לעיל.
- VPS מותאם אישית עם Nginx (LEMP Stack) - הגדר
nginx.confוהשתמש ב-CDN נתמך כמפורט לעיל.
שיטה מס' 3 - שימוש בתגית תמונה
אם שתי השיטות הנ"ל אינן עובדות עבורך, תוכל להשתמש בתג התמונה. הוא אינו דורש תצורת שרת (עריכת nginx.conf) ותומך בכל ספקי ה-CDN.
שימוש בשיטה זו ישנה את ה-HTML עבור משלוח WebP. זה לא יעבוד עם תמונות רקע, אינו תואם עם ערכות נושא מסוימות, תוספים למטמון, תוספים בטעינה עצלנית וכו'.
אם אתה משתמש בשיטה זו, כל תגי ה-img יומרו כך:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>אם הדפדפן תומך ב-WebP, הקובץ המתאים יימסר; אחרת, נמסרת תמונה רגילה.
התאמה אישית של תג התמונה עבור WebP בוורדפרס
הדרך הקלה ביותר להגדיר תג תמונה היא באמצעות WebP Express.
הגדר את מצב הפעולה ל"ידידותי ל-CDN" והפעל "Alter HTML".
סיכום
הלוואי ויבוא היום שבו כל הדפדפנים יתמכו ב-WebP!
אם אתה יכול להוציא כמה דולרים בחודש, אז הדרך הקלה והיעילה ביותר היא להשתמש ב-CDN כמו BunnyCDN, שימיר תמונות ל-WebP תוך כדי תנועה. אחרת, היצמד לשיטה מס' 2 שהזכרתי למעלה.
