في معظم المواقع، الصور هي أثقل عنصر في الصفحة، وغالبًا أكبر من HTML وCSS وJavaScript مجتمعة. إن شعرت بأن الصفحة بطيئة، فالصور أول مكان تنظر فيه، والإصلاحات عادةً سريعة.
ثلاث تقنيات تؤدي كل العمل تقريبًا: غيّر مقاس الصورة إلى الحجم الذي تُعرض به فعلاً، اضغطها، وقدّمها بصيغة حديثة. تطبيقها معًا يقلّص وزن الصور روتينيًا بنسبة 70٪ أو أكثر.
غيّر المقاس إلى الحجم الذي تعرضه فعلاً
هذا هو الخطأ الأكثر شيوعًا وإهدارًا. صورة خارجة توًّا من الكاميرا قد يكون عرضها 6000 بكسل، لكن مقالك يعرضها في عمود عرضه 800 بكسل. يُنزّل المتصفح الستة آلاف بكسل كاملة ثم يرمي معظمها عندما يُصغّر الصورة لتناسب.
تقديم صورة بعرض 6000 بكسل في حيّز عرضه 800 بكسل قد يعني تنزيل بيانات تفوق الحاجة بخمسة إلى عشرة أضعاف. الحل بسيط: غيّر مقاس الملف إلى العرض الذي سيشغله تقريبًا، مع هامش صغير للشاشات عالية الكثافة.
قاعدة عملية:
- صورة بطل بعرض كامل: 1600–2000 بكسل عرضًا تكفي وتزيد.
- صورة داخل المقال: 1000–1400 بكسل.
- صورة مصغرة: 300–500 بكسل.
استخدم أداة تغيير مقاس الصور لتصغير كل صورة قبل أن تصل إلى صفحتك أصلاً. تُبقي نسبة الأبعاد مقفلة كي لا يتمدد شيء.
اضغط لإزالة الهدر
بعد ضبط الأبعاد، يزيل الضغط تفاصيل لا تراها العين. للصور الفوتوغرافية، جودة بحدود 75–85٪ هي النقطة المثالية: يهبط حجم الملف بشدة بينما تبدو الصورة نفسها. للرسومات المسطحة ولقطات الشاشة المحفوظة بصيغة PNG، يمكن لتقليل عدد الألوان (التكميم إلى 256 لونًا) أن يقلّص الملف إلى جزء ضئيل من حجمه الأصلي.
تتولى أداة ضغط الصور كليهما. تعيد ترميز JPEG وWebP حسب الجودة، وتُكمّم صور PNG، وتضمن ألّا تنتج ملفًا أكبر من الذي بدأت به. إن كان لديك معرض كامل، شغّلها دفعة واحدة ونزّل ملف ZIP.
انتقل إلى صيغة حديثة
اختيار الصيغة وحده قد يخفض الملف إلى النصف. إليك كيف تتقارن الخيارات الشائعة للصور الفوتوغرافية.
| الصيغة | الحجم النموذجي مقابل JPEG | الأفضل لـ |
|---|---|---|
| JPEG | الأساس | البديل العالمي؛ الصور |
| WebP | أصغر بـ ~25–35٪ | الصور والرسومات؛ دعم واسع للمتصفحات |
| AVIF | أصغر بـ ~50٪ | الصور حيث يهم أصغر حجم ممكن |
| PNG | أكبر بكثير للصور | الشعارات والأيقونات والرسومات المسطحة والشفافية |
WebP هو الخيار الافتراضي الآمن في 2026 — كل متصفح حالي يقرؤه ويتفوق على JPEG بارتياح. يصل AVIF إلى حجم أصغر أكثر لكنه يستغرق وقتًا أطول في الترميز ودعمه أضيق قليلاً. تتيح لك أداة تحويل الصور استهداف AVIF وتتراجع بهدوء إلى WebP عندما لا يكون AVIF مناسبًا، فتحصل على أفضل نتيجة متاحة دون تخمين.
تحذير واحد: لا تستخدم PNG للصور الفوتوغرافية. يتألق PNG مع الشعارات والأيقونات وكل ما يحتاج شفافية، لكنه للصورة قد يكون أكبر بأضعاف من WebP بالجودة نفسها.
اجمعها معًا
خط عمل موثوق لأي صورة متجهة إلى الويب:
- غيّر المقاس إلى عرض العرض (مع هامش لشاشات الريتينا).
- حوّل إلى WebP، أو AVIF إن أردت أصغر ملف ممكن.
- اضغط بجودة 75–85٪ لإزالة آخر ما تبقى من الهدر.
افعل ذلك فتتحول صورة كاميرا حجمها 5 ميغابايت إلى ملف WebP حجمه 120 كيلوبايت يبدو مطابقًا في عمود مقال. اضرب ذلك عبر صفحة كاملة فيصبح الفرق في وقت التحميل هائلاً.
كل شيء يعمل داخل متصفحك باستخدام Canvas وWebAssembly، فلا يُرفع أي شيء وتظل الأدوات تعمل دون اتصال بعد زيارتك الأولى. هذا يعني أن بإمكانك تحضير مجلد صور لموقعك دون تسليمها إلى أي خادم.
ما وراء الملفات
عادتان إضافيتان تساعدان، ولا تكلفان شيئًا:
- حمّل الصور أسفل الطية تحميلاً كسولاً بـ
loading="lazy"كي لا يجلبها المتصفح إلا عندما يقترب القارئ منها بالتمرير. - حدّد سمات العرض والارتفاع كي لا يقفز التخطيط أثناء تحميل الصور، وهذا يحسّن أيضًا درجة Core Web Vitals.
تريد أن تعرف بالضبط أي الصور تُثقل صفحة ما؟ يغطّي دليل تحسين الصور لمحركات البحث عملية التدقيق، وفحص سرعة الصفحة سيسرد أثقل الأصول كي تعرف من أين تبدأ.