אופטימיזציה אוטומטית של קבצי מדיה עבור 1C-Bitrix

דף קטלוג טוען 40 תמונות מוצר בהיקף כולל של 8 MB. Google PageSpeed מסמן שגיאות: "Serve images in next-gen formats" ו-"Properly size images." Bitrix שומר את הקבצים המקוריים ב-/upload/ ויוצר גרסאות מוקטנות באמצעות CFile::ResizeImageGet() — אך הפורמט נשאר JPEG/PNG, ללא המרה אוטומטית ל-WebP. התוצאה היא טעינה איטית ואובדן דירוגים במנועי חיפוש. תמונות לא מותאמות מוסיפות 50–100 KB של תעבורה כל אחת. בדף עם 40 מוצרים, מדובר ב-2–4 MB רק עבור תמונות. מנועי חיפוש מתחשבים במהירות, במיוחד במובייל: אתר איטי מאבד עד 20% מההמרות. אופטימיזציה מקיפה — דחיסה ללא אובדן איכות, WebP, טעינה עצלה — מפחיתה את משקל הדף פי 2–3 ומשפרת דירוגים.

אנו מגדירים אופטימיזציה רב-שלבית מלאה: שינוי גודל, דחיסה, WebP, טעינה עצלה והעברה דרך CDN. עם ניסיון של למעלה מ-7 שנים בפיתוח Bitrix, אנו מבטיחים תוצאות. אופטימיזציה של תמונות בוצעה בלמעלה מ-50 פרויקטים, עם שיפור של 20+ נקודות ב-PageSpeed. חיסכון אופייני נע בין $500 ל-$2000 בחודש בעלויות רוחב פס. קבלו הערכה לפרויקט שלכם — צרו קשר לבדיקת מהירות חינמית.

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

כל תמונה לא מותאמת מוסיפה 50–100 KB של תעבורה. בדף קטלוג עם 40 פריטים, מדובר ב-2–4 MB רק עבור תמונות. מנועי חיפוש מתחשבים במהירות הטעינה, במיוחד במובייל. אתר איטי מאבד עד 20% מההמרות. אופטימיזציה מקיפה — דחיסה ללא אובדן איכות, WebP, טעינה עצלה — מפחיתה את משקל הדף פי 2–3 ומשפרת דירוגים. בהשוואה ל-JPEG, WebP משיג דחיסה טובה יותר ב-25–35%, מה שהופך אותו ליעיל פי 1.3–1.5. טעינה עצלה מפחיתה את זמן טעינת הדף בעד 40% בהשוואה לטעינת כל התמונות בבת אחת.

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

1. בדיקת מצב נוכחי: מדידת PageSpeed, ניתוח מבנה הקבצים ב-/upload/, הערכת נפח ופורמטים.
2. דחיסה בעת העלאה: הטמעת handler מסוג OnAfterFileSave עם ImageOptimizer::compress(). הגבלת צד ל-2000px, איכות 85% JPEG / 9 PNG, הסרת EXIF.
3. המרת WebP: הגדרת handler מסוג OnAfterGetResizeImagePath ליצירת עותקי WebP. הגדרת Nginx להגשת WebP בהתבסס על Accept.
4. טעינה עצלה ו-srcset: שינוי תבניות רכיבי הקטלוג — הוספת loading="lazy", srcset לרזולוציות רספונסיביות.
5. עיבוד המוני של קבצים קיימים: הפעלת agent שמעבד 100 קבצים בכל שלב.
6. בדיקות וניטור: מדידת PageSpeed חוזרת, אימות הגשת WebP, בדיקת תאימות מטמון.

רמה 1: שינוי גודל ודחיסה בעת העלאה

ברירת המחדל של CFile::ResizeImageGet() יוצרת גרסאות מוקטנות בבקשה הראשונה ומאחסנת אותן במטמון ב-/upload/resize_cache/. הבעיה העיקרית היא שהמקוריים נשמרים ללא דחיסה, ומנהלים מעלים תמונות של 5–10 MB מהטלפונים שלהם. אנו מוסיפים handler לאירוע OnAfterFileSave שדוחס את הקובץ מיד לאחר ההעלאה.

\Bitrix\Main\EventManager::getInstance()->addEventHandler( 'main', 'OnAfterFileSave', function (\Bitrix\Main\Event $event) { $file = $event->getParameter('FILE'); if (!in_array($file['CONTENT_TYPE'], ['image/jpeg', 'image/png', 'image/gif'])) { return; } $path = $_SERVER['DOCUMENT_ROOT'] . $file['SRC']; if (!file_exists($path)) { return; } \Local\Media\ImageOptimizer::compress($path, $file['CONTENT_TYPE']); } ); 

המחלקה \Bitrix\Main\EventManager::getInstance()->addEventHandler( 'main', 'OnAfterFileSave', function (\Bitrix\Main\Event $event) { $file = $event->getParameter('FILE'); if (!in_array($file['CONTENT_TYPE'], ['image/jpeg', 'image/png', 'image/gif'])) { return; } $path = $_SERVER['DOCUMENT_ROOT'] . $file['SRC']; if (!file_exists($path)) { return; } \Local\Media\ImageOptimizer::compress($path, $file['CONTENT_TYPE']); } ); משתמשת ב-Imagick אם זמין, אחרת ב-GD. היא מסירה EXIF, מגבילה את הצד המקסימלי ל-2000px, ומגדירה איכות של 85% ל-JPEG או רמת דחיסה 9 ל-PNG. לאחר הדחיסה, הקובץ המקורי תופס בממוצע כ-30% מגודלו המקורי. לעיבוד קבצים שכבר הועלו, אנו מריצים agent המוני שעובר על 100 קבצים בכל שלב.

כיצד להגדיר המרת WebP ב-Bitrix?

WebP מספק הפחתת גודל של 25–35% בהשוואה ל-JPEG באיכות דומה. תמיכת דפדפנים היא 97%+ (כל הדפדפנים המודרניים). אסטרטגיה: יצירת גרסת WebP לצד המקור באמצעות אירוע ImageOptimizer, ולאחר מכן הגדרת Nginx להגשת WebP לדפדפנים שתומכים בפורמט.

\Bitrix\Main\EventManager::getInstance()->addEventHandler( 'main', 'OnAfterGetResizeImagePath', function (\Bitrix\Main\Event $event) { $result = $event->getParameter('RESULT'); $src = $result['src'] ?? ''; if (!$src || !preg_match('/\.(jpg|jpeg|png)$/i', $src)) { return; } $localPath = $_SERVER['DOCUMENT_ROOT'] . $src; $webpPath = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $localPath); if (!file_exists($webpPath) && file_exists($localPath)) { \Local\Media\WebpConverter::convert($localPath, $webpPath); } } ); 

map $http_accept $webp_suffix { default ""; "~*webp" ".webp"; } server { location ~* ^(/upload/resize_cache/.+)\.(jpg|jpeg|png)$ { set $img_path $1.$2; set $webp_path $1.webp; if ($webp_suffix = ".webp") { add_header Vary Accept; try_files $webp_path $img_path =404; } try_files $img_path =404; expires 30d; add_header Cache-Control "public, immutable"; } } 

מדוע טעינה עצלה קריטית ל-SEO?

טעינה עצלה דוחה טעינת תמונות מחוץ למסך, ומפחיתה את הזמן עד לאינטראקטיביות. בתבנית רכיב הקטלוג, אנו מוסיפים OnAfterGetResizeImagePath ו-\Bitrix\Main\EventManager::getInstance()->addEventHandler( 'main', 'OnAfterGetResizeImagePath', function (\Bitrix\Main\Event $event) { $result = $event->getParameter('RESULT'); $src = $result['src'] ?? ''; if (!$src || !preg_match('/\.(jpg|jpeg|png)$/i', $src)) { return; } $localPath = $_SERVER['DOCUMENT_ROOT'] . $src; $webpPath = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $localPath); if (!file_exists($webpPath) && file_exists($localPath)) { \Local\Media\WebpConverter::convert($localPath, $webpPath); } } ); לרזולוציות רספונסיביות.

<?php $img = \CFile::ResizeImageGet($element['PREVIEW_PICTURE'], ['width' => 300, 'height' => 300]); $img2 = \CFile::ResizeImageGet($element['PREVIEW_PICTURE'], ['width' => 600, 'height' => 600]); ?> <img src="<?= htmlspecialchars($img['src']) ?>" srcset="<?= htmlspecialchars($img['src']) ?> 300w, <?= htmlspecialchars($img2['src']) ?> 600w" sizes="(max-width: 768px) 300px, 600px" loading="lazy" width="300" height="300" alt="Автоматическая оптимизация медиафайлов 1С-Битрикс" > 

השוואת פורמטי תמונה

המרה אוטומטית ל-WebP מציעה את האיזון הטוב ביותר בין תאימות לחיסכון בגודל. אנו משתמשים באיכות 82% (ללא אובדן ויזואלי). הגדרת מטמון תמונות נכונה מבטיחה שגרסאות מותאמות יוגשו במהירות. לאופטימיזציית העלאות המוניות, ה-agent שלנו מעבד קבצים בקבוצות. אופטימיזציית agent של Bitrix מפחיתה עומס על השרת במהלך פעולות המוניות.

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

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

מה כולל הגדרת אופטימיזציית קבצי מדיה

• דחיסה בעת העלאה: handler מסוג map $http_accept $webp_suffix { default ""; "~*webp" ".webp"; } server { location ~* ^(/upload/resize_cache/.+)\.(jpg|jpeg|png)$ { set $img_path $1.$2; set $webp_path $1.webp; if ($webp_suffix = ".webp") { add_header Vary Accept; try_files $webp_path $img_path =404; } try_files $img_path =404; expires 30d; add_header Cache-Control "public, immutable"; } } , הסרת EXIF, שינוי גודל ל-2000px, איכות JPEG 85% / רמת דחיסת PNG 9.
• המרת WebP: אירוע loading="lazy" + תצורת Nginx להגשת WebP.
• טעינה עצלה ו-srcset: שינוי תבניות רכיבי הקטלוג.
• אופטימיזציה המונית של קבצים קיימים: agent עם שלב של 100 קבצים.
• בדיקות: מדידת PageSpeed, אימות הגשת WebP, בדיקת תאימות מטמון.
• תיעוד: תיאור כל השינויים, הגדרות לתמיכה.

כמה זמן אורך ההתקנה?

• חבילה בסיסית (דחיסה + WebP + טעינה עצלה) — 1–2 ימי עסקים.
• אופטימיזציה המונית של קבצים קיימים — 4–8 שעות נוספות.
• אינטגרציה עם CDN או פורמטים נוספים (AVIF) — נדון בנפרד.

אנו מבטיחים סיום במועדים מוסכמים. הזמינו את ההתקנה — נבחן את הפרויקט שלכם בחינם ונציע את הפתרון האופטימלי. צרו קשר לייעוץ וקבלו חיסכון של עד 60% בתעבורה.