كيفية ضغط الصور لموقع أسرع
الصور الكبيرة هي السبب الأول لبطء تحميل صفحات الويب. ما الذي يؤثر فعلاً على سرعة الصفحة، وما هو مضيعة للوقت.
تشير تدقيقات سرعة الصفحة باستمرار إلى نفس السبب: الصور. صورة واحدة غير مضغوطة بحجم 4 ميجابايت يمكن أن تفوق وزن HTML وCSS وJavaScript لصفحة كاملة مجتمعة عدة مرات — ومعظم صور مواقع الويب أكبر بكثير من المساحة التي تُعرض فيها فعلياً.
أكبر مكسب: مطابقة حجم العرض
صورة مرفوعة مباشرة من كاميرا هاتف تكون عادة بعرض 3000-4000 بكسل. إذا عُرضت في الصفحة بعرض 800 بكسل، فإن المتصفح يُحمّل بيانات بكسل أكثر بـ4 إلى 6 مرات مما سيعرضه أبداً — هدر خالص. تغيير الحجم إلى ما يقارب حجم العرض الفعلي، قبل الضغط، هو الخطوة الأعلى تأثيراً:
ثم اضغط
بعد تغيير الحجم إلى بُعد معقول، اضغط فوق ذلك لتقليل حجم الملف:
هدف تقريبي: معظم صور الويب تبدو جيدة بأقل بكثير من 200 كيلوبايت بأحجام عرض معقولة؛ صور البانر/الغلاف التي تملأ عرض الشاشة كاملاً يمكن أن تصل معقولاً إلى 300-500 كيلوبايت. الصور المصغرة والأيقونات يجب أن تكون جزءاً بسيطاً من ذلك.
الصيغة مهمة أيضاً
-
JPG للصور الفوتوغرافية — أفضل توازن بين الحجم والجودة للمحتوى الفوتوغرافي
-
PNG فقط لما يحتاجه فعلاً: الشعارات، الأيقونات، لقطات الشاشة، أي شيء بشفافية أو ألوان مسطحة وحواف حادة
-
WebP إذا كانت استضافتك/نظام إدارة المحتوى يدعمه — عادة أخف بـ25-35% من JPG بجودة معادلة، بدعم متصفح شبه شامل الآن
-
تحويل WebP إلى JPG — مفيد في الاتجاه المعاكس، إذا كانت صورة WebP يجب أن تذهب لمكان يقبل JPG فقط
ما لا يساعد فعلاً كثيراً
ضغط HTML/CSS/JS مهم أيضاً لسرعة الصفحة، لكن في صفحة نموذجية غنية بالصور، تمثل الصور عادة 70%+ من الوزن الإجمالي للصفحة — تحسين كل شيء ما عدا الصور وتوقع صفحة سريعة نادراً ما ينجح. بالمثل، شبكة توصيل المحتوى (CDN) تسرّع تسليم صورة لكن لا تصغّرها — صورة غير محسّنة بحجم 4 ميجابايت مقدمة من CDN سريع تبقى صورة 4 ميجابايت.
سير عمل بسيط
- غيّر الحجم إلى أبعاد العرض الفعلية تقريباً
- اضغط إلى حجم مستهدف معقول لذلك الاستخدام (صورة مصغرة، صورة نص، بانر غلاف)
- استخدم JPG للصور الفوتوغرافية، PNG فقط عند الحاجة للشفافية/الحواف الحادة، WebP إذا كان مدعوماً
كل هذا يعمل داخل متصفحك — لا حاجة لأي رفع لتغيير الحجم أو الضغط.