لماذا تحسين الصور يحسن الموقع الإلكتروني
غالبًا ما تمثل الصور جزءًا كبيرًا من البيانات التي يتم تنزيلها بواسطة الصفحة. الملف الكبير يؤخر ظهور المحتوى، يستهلك المزيد من بيانات الهاتف المحمول، وقد يضعف تجربة الزائر. التحسين يجمع بين ثلاثة قرارات: الأبعاد، التنسيق، ومستوى الضغط.
لا يوجد حد مثالي لجميع الصور. يجب أن تكون الصورة المصغرة أخف بكثير من صورة كاملة الشاشة. الهدف هو توفير عدد كافٍ من البكسلات والجودة للمساحة الفعلية، دون إجبار المتصفح على تنزيل معلومات لن يستخدمها.
التدفق خطوة بخطوة الموصى به
- حدد الحد الأقصى للعرض الذي ستظهر فيه الصورة في التصميم.
- قص الإطار قبل الضغط حتى لا تحتفظ بالمناطق التي ستُحذف.
- اختر التنسيق حسب المحتوى والحاجة إلى الشفافية.
- افتح الملف في مضغوط الصور وتختبر جودة متوسطة إلى عالية.
- قارن الوزن وافحص النصوص والحواف والوجوه والتدرجات.
- نشر النتيجة وفحص الصفحة على الهاتف والجهاز المكتبي.
الأبعاد: تجنب رفع بيكسلات أكثر من اللازم
إذا كانت بطاقة تعرض صورة بعرض 600 بكسل، فإن تحميل صورة بعرض 5000 بكسل عادة ما يكون مضيعة. سيقوم المتصفح بتصغيرها بصريًا، لكنه قبل ذلك سيضطر إلى تنزيل الملف بالكامل. حضّر نسخة بحجم قريب من الحد الأقصى المطلوب وفق التصميم.
لشاشات الكثافة العالية قد يكون من المفيد توفير نسخة أكبر بحوالي مرتين، لكن المثالي هو أن يستخدم الموقع صورًا مستجيبة مع SRCSET y أحجام. بهذه الطريقة يقوم كل جهاز بتنزيل نسخة مناسبة بدلا من نفس الملف العملاق.
أي تنسيق تختار
- JPG: توافق جيد وحجم معقول للصور الفوتوغرافية بدون شفافية.
- WebP: مفيد للصور ورسومات الويب؛ يمكنه الحفاظ على الشفافية وتقديم ملفات مدمجة.
- PNG: مناسب للشفافية، لقطات مع نص واضح ورسومات بسيطة؛ قد يكون حجمها كبيرًا في الصور الفوتوغرافية.
- SVG: مثالي للشعارات وأيقونات المتجهات عندما يكون الملف آمنا وتم إنشاء التصميم كمتجه.
تحويل التنسيق لا يضمن ملفًا أصغر. قارن دائمًا النتيجة واحتفظ بالتنسيق الأصلي عندما يكون الخيار الأكثر كفاءة. راجع مقارنة بين JPG، PNG و WebP إذا لم تكن تعرف أيهما تختار.
كيفية اختيار جودة الضغط
ابدأ بضبط يفضل المظهر ثم خفّض تدريجياً. تتحمل الصور الضغط بشكل أفضل من لقطات الواجهة، والرسوم البيانية والنص الصغير. إذا ظهرت هالات أو كتل أو حواف مشوشة، زد الجودة أو جرّب تنسيقاً آخر.
قَيّم الملف داخل الصفحة، وليس فقط في عرض مكبر. قد لا تبدو هنالك فرق صغير تظهر عند 300% في الحجم العادي؛ بينما حرف غير مقروء على بطاقة هو مشكلة فعلية.
الضغط لا يغني عن تنفيذ جيد
بالإضافة إلى تحسين الملف، احجز المساحة باستخدام السمات العرض y الطول لمنع تخطي المحتوى. استخدم تحميلا كسلا على الصور التي تقع خارج الكتلة المرئية الأولى، لكن لا تؤخر الصورة الرئيسية إذا كان ذلك ضروريا لفهم الصفحة.
من المفيد أيضًا تحديد ذاكرة تخزين مؤقت طويلة للملفات ذات الأسماء المخرّجة لتجنب تحميل نفس الصورة بأحجام متعددة عبر CSS. هذه القرارات تتطلب تغييرات في الموقع، لكنها تكمل التوفير المحقق أثناء الضغط.
الأخطاء الشائعة
الضغط قبل تحديد الحجم
بعد ذلك، تغيير الحجم يجبرك على معالجة الملف مرتين وقد يتراكم الخسارة. حدد أولا الإطار والأبعاد المحددة؛ ضغطوا في النهاية.
تحويل لقطات الشاشة إلى JPG بجودة منخفضة
الحروف والخطوط الدقيقة قد تسبب بقعًا. جرب PNG أو WebP بجودة أعلى وقارن الوزن.
استخدم صورة صغيرة كرأس
التوسيع لا يسترجع التفاصيل. ابدأ من مصدر كبير بما فيه الكفاية وانشئ نسخًا أصغر من تلك النسخة.
الأسئلة الشائعة
كم يجب أن يكون حجم صورة الويب؟
يعتمد ذلك على حجمه وأهميته وتعقيده. استخدم كمعيار أدنى وزن يحافظ على جودة مقبولة في حجمه النهائي، بدلا من متابعة رقم شامل.
هل يجب أن أحول جميع الصور إلى WebP؟
ليس بالضرورة. WebP مفيد، لكن [PNG البسيط أو ملف محسن مسبقا قد لا يتحسن. حول العينة، قس وحافظ على النسخ الأصلية.
هل ضغط الصور يحسن الترتيب بمفرده؟
يساعد في التجربة والأداء، لكن الترتيب يعتمد أيضًا على محتوى مفيد، الزحف، الروابط، نية البحث والعديد من الإشارات الأخرى. الضغط جزء من موقع ويب مُعد جيدًا.
جهز صورة أفتح
اضبط الجودة أو حدد حجم الهدف، قارن النتيجة وحمّل الإصدار الذي يناسب صفحتك.
ضغط الصورة للويب