كيف تجعل الصور تُحمَّل أسرع على الموقع
خمسة تغييرات تقلل وزن الصور في أي موقع، مرتبة حسب تأثيرها.
في معظم المواقع، تشكّل الصور الجزء الأكبر مما ينزّله الزائر. صورة واحدة غير محسّنة من هاتف قد يزيد حجمها على بقية الصفحة مجتمعة. تحسين الصور هو عادةً أكبر تحسين للسرعة وأقلها تكلفة، والصفحات الأسرع تحتل ترتيبًا أفضل في البحث، وتُبقي الزوار مدة أطول، وتحقق مبيعات أكثر.
1. ارفع الصور بالمقاس الذي تُعرض به
الصورة القادمة مباشرة من الهاتف يبلغ عرضها 4000 بكسل أو أكثر. نادرًا ما يزيد عرض عمود المحتوى في موقع على 1200 بكسل، والبطاقة أو الصورة المصغرة أقل من ذلك بكثير. كل بكسل زائد يُنزَّل ثم يتخلص منه المتصفح. غيّر المقاس قبل الرفع: نحو 2000 بكسل عرضًا للافتات التي تمتد على كامل العرض (لتبقى حادة على الشاشات عالية الكثافة)، و1200 إلى 1600 لصور المحتوى، و600 إلى 800 للبطاقات. تعالج أداة تغيير مقاس الصور مجلدًا كاملًا دفعة واحدة.
2. اضغط الصور
بعد ضبط الأبعاد الصحيحة، يتكفل الضغط بالباقي. الصورة المحفوظة بجودة 80 تبدو مطابقة تمامًا لصورة بجودة 100 على صفحة الويب، وغالبًا ما يكون حجمها الثلث. تعالج أداة ضغط الصور دفعات كاملة وتعرض مقدار التوفير لكل ملف.
3. استخدم WebP
تدعم كل المتصفحات الحالية صيغة WebP، وهي عادةً أصغر من JPG بنسبة 25 إلى 35 بالمئة بالجودة المرئية نفسها، كما تدعم الشفافية فتصلح بديلًا لكثير من ملفات PNG أيضًا. حوّل صورك باستخدام تحويل JPG إلى WebP أو تحويل PNG إلى WebP. صيغة AVIF أصغر من ذلك، لكن ترميزها أبطأ ودعمها في أنظمة الرفع أقل انتشارًا، لذا تبقى WebP الخيار العملي الافتراضي.
4. اختر الصيغة المناسبة للمحتوى
| المحتوى | أفضل صيغة |
|---|---|
| الصور الفوتوغرافية | WebP، أو JPG حيث لا تُقبل WebP |
| الشعارات والأيقونات | SVG إن توفرت، وإلا فاستخدم PNG أو WebP |
| لقطات الشاشة التي تحتوي على نص | PNG أو WebP بدون فقدان |
| الرسوم المتحركة البسيطة | فيديو قصير بدلًا من GIF |
5. ساعد المتصفح على تحميلها بذكاء
- التحميل الكسول. يجب ألا تُحمَّل الصور الواقعة أسفل الشاشة الأولى إلا عندما يقترب الزائر منها أثناء التمرير. تقوم معظم المنصات بذلك تلقائيًا؛ وفي HTML العادي أضف loading="lazy" إلى وسوم img غير الظاهرة في البداية.
- الأبعاد. حدد لكل صورة عرضًا وارتفاعًا حتى لا تقفز عناصر الصفحة أثناء وصول الصور. إزاحة التخطيط من مؤشرات Core Web Vitals لدى Google.
- الصورة الرئيسية أولًا. الصورة الكبيرة أعلى الصفحة، وهي عادةً العنصر الذي يُحتسب Largest Contentful Paint، يجب ألا تُحمَّل بكسل أبدًا. ينبغي أن تُحمَّل في أبكر وقت ممكن.
ما مقدار الفرق
قد يبلغ وزن صفحة نموذجية تحتوي على عشر صور مأخوذة مباشرة من الهاتف 30 MB. بعد تغيير مقاسها إلى عرض معقول وضغطها، تصبح الصفحة نفسها عادةً نحو 2 MB. وبعد تحويلها إلى WebP، تقترب من 1.4 MB. على اتصال الهاتف المحمول، هذا هو الفرق بين صفحة تظهر في ثانية وصفحة يتركها كثير من الزوار.
التحقق من النتائج
تعرض أداة PageSpeed Insights من Google ولوحة Lighthouse في أدوات المطورين في Chrome الصور ذات المقاس الزائد، والصور التي يجب أن تكون WebP، وعنصر Largest Contentful Paint. شغّلهما قبل التحسين وبعده، وابدأ بالصفحات التي تحصل على أكبر عدد من الزيارات.