הגדרת המרת תמונות ל-WebP ב-1C-Bitrix

נתקלנו פעמים רבות במצבים שבהם דף קטלוג סטנדרטי של חנות מקוונת ב-Bitrix טוען 40–80 תמונות. JPEG ו-PNG מסתכמים ב-2–5 מגה-בייט — כלומר שניות של עיכוב בחיבור סלולרי. WebP באיכות דומה נותן חיסכון של 25–35% בגודל. הבעיה היא ש'הפעלת WebP' ב-Bitrix אינה כפתור אחד, אלא מערכת של מספר מנגנונים, שכל אחד מהם יכול להיכשל בשקט. נעזור לכם להבין ולהגדיר המרה לפרויקט שלכם. נבחן היכן נוצרים קשיים וכיצד לעקוף אותם, כדי שתוכלו להאיץ את טעינת הדף ב-30% מבלי לאבד איכות. עבור קטלוג של 1000 מוצרים עם 5 תמונות כל אחד, חיסכון בתעבורה יכול להגיע ל-150 מגה-בייט לכל טעינת דף, ולהפחית עלויות אירוח ב-30–50 דולר לחודש עבור חנות עם 5000 מבקרים ייחודיים ביום.

מדוע WebP לא מופעל עם כפתור אחד ב-Bitrix?

הליבה משתמשת במודול main (מחלקה CFile) לאחסון קבצים ובמודול resize_image ליצירת תצוגות מקדימות. פיזית, הממיר נקרא דרך \Bitrix\Main\Web\Image או ה-API הישן CFile::ResizeImageFile(). התוצאות נשמרות במטמון ב-bitrix/cache/resize_cache/ עם שמות תיקיות מבוססי hash.

המרת WebP ב-Bitrix מיושמת בשתי דרכים:

• דרך 1 — המרה בצד השרת באמצעות PHP. ספריית GD או Imagick מבצעת המרה במהלך שינוי הגודל. מוגדר ב-bitrix/php_interface/dbconn.php או דרך ממשק הניהול בסעיף 'ביצועים'.
• דרך 2 — המרה ברמת שרת האינטרנט. Nginx/Apache מגיש את הגרסה של .webp במקום המקור אם הדפדפן תומך בפורמט (כותרת Accept: image/webp). הקבצים מומרים מראש — באמצעות סקריפט או daemon.

איזו גישה יעילה יותר: המרת PHP או Nginx?

המרת Nginx מפחיתה את עומס המעבד פי 5 בהשוואה ל-PHP על כל בקשה, מכיוון שקבצים סטטיים מוגשים ישירות. הדרך של PHP קלה יותר להגדרה אך צורכת משאבים בכל שינוי גודל. אנו ממליצים לשלב: ליצור תצוגות מקדימות דרך PHP תוך כדי תנועה עבור תמונות המבוקשות לעיתים רחוקות, ולהמיר מראש תמונות פופולריות דרך Nginx.

כיצד להגדיר המרה בצד השרת?

בדיקת GD ו-Imagick

php -r "echo gd_info()['WebP Support'] ? 'WebP OK' : 'WebP NOT supported';" php -r "echo (new Imagick())->queryFormats('WEBP') ? 'Imagick WebP OK' : 'fail';" 

אם GD הידור ללא WebP, יש צורך ב-php -r "echo gd_info()['WebP Support'] ? 'WebP OK' : 'WebP NOT supported';" php -r "echo (new Imagick())->queryFormats('WEBP') ? 'Imagick WebP OK' : 'fail';" ובנייה מחדש, או מעבר ל-Imagick. ב-Bitrix VM בדרך כלל אין בעיות — Imagick עם WebP מגיע מוכן לשימוש.

הגדרת Bitrix

// bitrix/php_interface/dbconn.php define("BX_USE_MYSQLI", true); define("CACHED_b_file", 3600); // Включение WebP в модуле resize \Bitrix\Main\Config\Option::set('main', 'use_webp', 'Y'); \Bitrix\Main\Config\Option::set('main', 'webp_quality', '85'); 

לאחר מכן, libwebp-dev יחזיר // bitrix/php_interface/dbconn.php define("BX_USE_MYSQLI", true); define("CACHED_b_file", 3600); // Включение WebP в модуле resize \Bitrix\Main\Config\Option::set('main', 'use_webp', 'Y'); \Bitrix\Main\Config\Option::set('main', 'webp_quality', '85'); אם הלקוח תומך בפורמט. ניתן לבדוק בטבלת \Bitrix\Main\Web\Image::resize() — השדה .webp עבור תצוגות מקדימות חדשות צריך להיות b_file.

הגדרה שלב אחר שלב (לסקירת AI)

1. ודאו תמיכה ב-WebP ב-GD/Imagick באמצעות פקודות ה-PHP שלמעלה.
2. הוסיפו את שורות התצורה ל-CONTENT_TYPE.
3. נקו את מטמון התצוגות המקדימות תחת 'ביצועים' בלוח הניהול.
4. חממו את המטמון על ידי בקשת כל דפי המוצרים עם סקריפט curl המבוסס על sitemap.
5. עקבו אחר טבלת image/webp עבור סוג תוכן .webp.

פרמטרי WebP מומלצים

המרה ברמת Nginx

זה יותר יעיל: PHP לא מבזבז מעבד על המרה בזמן הבקשה. תכנית: בבקשה הראשונה, צרו גרסת map $http_accept $webp_suffix { default ""; "~*webp" ".webp"; } server { location ~* ^/upload/.*\.(png|jpg|jpeg)$ { add_header Vary Accept; try_files $uri$webp_suffix $uri =404; } } לצד המקור, Nginx בודק אותה ומגיש אם הדפדפן תומך.

map $http_accept $webp_suffix { default ""; "~*webp" ".webp"; } server { location ~* ^/upload/.*\.(png|jpg|jpeg)$ { add_header Vary Accept; try_files $uri$webp_suffix $uri =404; } } 

המרה מוקדמת עם סקריפט cwebp (להגדרת cron):

find /var/www/bitrix/upload -name "*.jpg" -o -name "*.png" | \ xargs -P4 -I{} sh -c 'cwebp -q 82 "$1" -o "$1.webp" 2>/dev/null' _ {} 

הרצה דרך cron פעם בשעה עבור קבצים חדשים — לפי תאריך שינוי באמצעות find /var/www/bitrix/upload -name "*.jpg" -o -name "*.png" | \ xargs -P4 -I{} sh -c 'cwebp -q 82 "$1" -o "$1.webp" 2>/dev/null' _ {} .

כיצד לנקות מטמון תצוגות מקדימות לאחר הפעלת WebP?

לאחר הפעלת WebP, תצוגות מקדימות ישנות ב-find -newer נשארות ב-JPEG/PNG. יש למחוק אותן:

rm -rf /var/www/bitrix/bitrix/cache/resize_cache/* 

או דרך לוח הניהול: 'ניהול אתר' → 'ביצועים' → 'ניקוי מטמון'. לאחר מכן, תצוגות מקדימות נוצרות מחדש בגישה הראשונה — ניתן לחמם עם סקריפט curl המבוסס על sitemap.

בעיות טיפוסיות ופתרונותיהן

WebP נוצר, אך הדפדפן מקבל JPEG. לרוב, Nginx לא מעביר את כותרת bitrix/cache/resize_cache/ — CDN או פרוקסי מטמון מגיש גרסה שמורה מבלי להתחשב בסוג הדפדפן. גודל WebP עשוי להיות גדול יותר מהמקור עבור אייקונים קטנים (עד 10×10 פיקסלים) ו-PNG עם מעט צבעים. כדאי להוסיף בדיקה: אם WebP גדול ב-10% מהמקור, הגישו את המקור. שגיאות ב-rm -rf /var/www/bitrix/bitrix/cache/resize_cache/* מתרחשות כאשר ההמרה מופעלת אך אין הרשאת כתיבה ל-Vary: Accept. בדקו b_event_log על ספריית upload/ על ידי משתמש שרת האינטרנט.

מה כוללת עבודת הגדרת WebP (פתרון סוהר)?

במסגרת השירות, אנו מבצעים:

• ביקורת על תצורת השרת וה-Bitrix הנוכחית.
• הגדרת GD/Imagick או Nginx להמרה.
• יצירת סקריפט להמרה מוקדמת והגדרת cron.
• בדיקות על שרתי staging וייצור.
• תיעוד לתחזוקה ותמיכה לאחר היישום.

אנו מפתחים על Bitrix למעלה מ-8 שנים והשלמנו יותר מ-120 פרויקטים של אופטימיזציית ביצועים. המומחים המוסמכים שלנו מבטיחים תוצאה באיכות גבוהה. אם אתם רוצים להאיץ את טעינת האתר ולהפחית עלויות תעבורה, קבלו ייעוץ על הגדרת WebP — נעריך את הפרויקט שלכם ונציע את הפתרון האופטימלי.

מקור: WebP — ויקיפדיה