الحجم المناسب للصور: تجنب عرض مقاسات ضخمة

قم بقياس أقصى عرض يتم فيه عرض الصورة على الإطلاق، وضاعفه للشاشات عالية الكثافة، وأعد تغيير حجم مكتبتك إلى ذلك الرقم. تقديم صورة بنسبة 4000 بكسل في خانة 800 بكسل يعني أن المتصفح ينزل حوالي 25 ضعفًا من بيانات البكسل أكثر مما يمكنه عرضه، ثم يتخلص من الباقي.

على اتصال الهاتف المحمول، يدفع الزائر ثمن ذلك بالكامل، في الوقت والبيانات. عادة ما يكون تغيير حجم الصور بشكل صحيح هو أكبر تخفيض منفرد لوزن الصفحة متاح لموقع ما، ويتطلب ذلك دفعة واحدة بدلاً من إعادة التصميم.

لماذا تكلف الصور ذات الحجم الزائد الكثير

يتناسب حجم الملف مع عدد البكسلات، لذا فإن تقليل العرض والارتفاع إلى النصف يزيل حوالي 75 بالمائة من البيانات. العلاقة تربيعية وليست خطية، ولهذا السبب ينمو الهدر بسرعة.

الصف الأول هو الحالة الشائعة في المواقع التي يرفع فيها المحررون الصور مباشرة من الكاميرا. ينزل المتصفح 4.2 MB، ويصغرها، ويعرض ما يعادل ملفًا بحجم 180 KB.

كيفية قياس حجم العرض الحقيقي

انقر بزر الماوس الأيمن على الصورة في صفحتك المباشرة، واختر فحص (Inspect)، واقرأ الأبعاد المعروضة بدلاً من الأبعاد الأصلية. تبلغ المتصفحات عن كلا الرقمين، والفجوة بينهما هي الهدر.

تحقق من الحالة الأوسع بدلاً من الحالة النموذجية. قد تُعرض الصورة الموجودة داخل عمود المقال بمقاس 700 بكسل على أجهزة سطح المكتب و380 على الهاتف المحمول، لذا فإن 700 هو الرقم المهم. اختبر في أوسع نافذة متصفح يستخدمها زوارك بوقع، نظرًا لأن الشعار بعرض كامل ينمر مع شاشة العرض ويحتاج إلى حساب مختلف.

قاعدة المضاعفة للشاشات عالية الكثافة

اضرب عرض العرض في 2 وتوقف عند هذا الحد، لأن الشاشات التي تتجاوز تلك الكثافة لا تظهر أي تحسن إضافي يلاحظه أحد. يجب تصدير الصورة المعروضة بمقاس 700 بكسل بمقاس 1400.

المضاعفة لثلاثة أضعاف تُقترح في بعض الأحيان ونادراً ما تكون مبررة. الفرق بين كثافة 2 و 3 أضعاف لا يمكن اكتشافه على مسافة المشاهدة العادية، بينما ينمو الملف بأكثر من النصف. الضغط بشكل أكبر عند كثافة ضعف واحد ينتج نتيجة أفضل من الضغط الخفيف عند 3 أضعاف، لأن البكسلات الإضافية تخفي الضغط.

عروض العرض الشائعة لتغيير الحجم من أجلها

• صورة جسم المقال: تُعرض حوالي 700 px، قم بالتصدير عند 1400 px.
• البانر الرئيسي بعرض كامل: يُعرض حتى 1920 px، قم بالتصدير عند 1920 px واضغط بشكل أكبر.
• ميزة بنصف العرض: تُعرض حوالي 600 px، قم بالتصدير عند 1200 px.
• صورة مصغرة لشبكة المنتجات: تُعرض حوالي 300 px، قم بالتصدير عند 600 px.
• صورة الكاتب أو الملف الشخصي: تُعرض حوالي 80 px، قم بالتصدير عند 160 px.
• الشعار في الرأس: يُعرض حوالي 180 px، قم بالتصدير عند 360 px أو استخدم الرسوم المتجهية (vector).

لماذا تعد الصور كاملة العرض هي الاستثناء

البانر بعرض كامل ليس له حجم عرض ثابت، لذا قم بتحديد حده الأقصى عند 1920 بكسل واضغطه بشكل أكبر بدلاً من المضاعفة. مضاعفة صورة بعرض كامل إلى 3840 بكسل ينتج عنه ملف لا يمكن لأي صفحة تبريره.

عادةً ما يتم عرض البانرات من مسافة وتحمل تفاصيل دقيقة أقل من صورة المنتج، مما يعني أن الضغط القوي يكون أقل ملاحظة عليها. البانر بمقاس 1920 بكسل بجودة 70 في صيغة WebP يقل عادةً عن 200 KB ويظهر بشكل صحيح على كل شاشة، بينما لا تقدم النسخة بمقاس 3840 بكسل أي فائدة مرئية وبأربعة أضعاف الوزن.

كيفية إصلاح مكتبة كاملة

لتغيير حجم موقع حالي بشكل صحيح، اتبع هذه الخطوات الـ 6.

1. قم بإدراج خانات الصور في تصميمك، والتي تتكون عادةً من 4 إلى 6 أحجام متميزة بدلاً من العشرات.
2. قِس عرض العرض لكل خانة باستخدام أداة فحص المتصفح على صفحة مباشرة.
3. ضاعف كل عرض للحصول على حجم التصدير الخاص بك.
4. فرز المكتبة في مجلدات حسب الخانة، نظرًا لأن الدفعة تطبق حجمًا واحدًا على كل ملف فيها.
5. أعد تغيير حجم كل مجلد إلى العرض المستهدف، ثم اضغط وحول في نفس الممر.
6. استبدل الملفات مع الحفاظ على نفس الأسماء حتى تستمر الصفحات الحالية في العمل.

الفرز في مجلدات هو الخطوة التي تحول هذا إلى عمل دفعة واحدة. تستخدم معظم المواقع أحجام صور متميزة أقل بكثير مما تفترض، والتجميع حسب الخانة يلغي الحاجة إلى التعامل مع الملفات بشكل فردي.

الصور التكيفية وسِمة srcset

استخدم srcset لتقديم عدة أحجام ودع المتصفح يختار الحجم المناسب لكل جهاز. يقوم الهاتف المحمول بعد ذلك بتنزيل ملف بمقاس 400 بكسل بينما ينزل سطح المكتب ملفًا بمقاس 1400 بكسل من نفس الترميز.

أنشئ 3 عروض لكل صورة، عادةً 400 و 800 و 1600 بكسل، وقم بإدراجها مع عروض البكسل الخاصة بها حتى يتمكن المتصفح من الاختيار. تنتج معظم أنظمة المحتوى هذا تلقائيًا عند الرفع، لذا تحقق مما تفعله منصتك بالفعل. حيثما تفعل ذلك، فإن رفع أصل بحجم صحيح لا يزال يحسن كل متغير تم إنشاؤه.

قم بتغيير الحجم قبل الضغط، دائمًا

تغيير الحجم أولاً يعني أن الضغط لديه عمل أقل ليعمله، بحيث يمكن أن تظل الجودة عالية بينما يظل الملف صغيرًا. الضغط أولاً وتغيير الحجم بعد ذلك يتخلص من التفاصيل التي تتخلص منها مرة أخرى.

يؤثر الترتيب أيضًا على كيفية ظهور النتيجة. تحتوي الصورة المضغوطة بالحجم الكامل على عيوب تظهر بشكل أسرع عند تصغير الصورة، نظرًا لأن العيوب تتناسب معها. ينتج عن تغيير الحجم أولاً مصدر أكثر نظافة للمرمز ونتيجة أفضل بشكل ملحوظ بنفس حجم الملف.

تأثير هذا على سرعة الصفحة

يؤدي تغيير حجم الصور بشكل صحيح عادةً إلى إزالة 60 إلى 90 بالمائة من وزن الصور على موقع لم يقم بذلك من قبل. التحسين أكبر من أي تغيير في الصيغة وعادة ما يكون أكبر من جميع التحسينات الأخرى مجتمعة.

يتركز التأثير على زوار الهاتف المحمول، حيث تكون الاتصالات أبطأ والبيانات تكلف مالاً. يتحسن سرعة رسم أكبر عنصر محتوى (Largest Contentful Paint) بشكل مباشر، حيث يتم تحديد هذا القياس عادةً بواسطة صورة واحدة كبيرة. يؤدي التخلص من تدقيق تغيير حجم الصور بشكل صحيح في Lighthouse في كثير من الأحيان إلى إزالة تحذيرين أو 3 تحذيرات ذات صلة في نفس الوقت.

لا تقم أبدًا بتكبير صورة لتناسب المكان

التكبير يضيف بكسلات لم تلتقطها الكاميرا أبدًا، فالنتيجة تكون غير حادة وينمو الملف بدون فائدة. التكبير إلى الأسفل (التصغير) آمن دائمًا، بينما التكبير إلى الأعلى هو العملية الوحيدة التي تظهر بشكل سيئ بشكل مؤكد.

عندما تكون الصورة المصدر أصغر من الخانة التي يجب أن تملأها، فإن الخيارات الصادقة هي استخدامها بحجمها الطبيعي، أو قص التخطيط حولها، أو استبدال الصورة. تكبير صورة 600 بكسل إلى 1600 بكسل ينتج عنه ملف ضبابي بـ 4 أضعاف وزن الأصل، وهو ما يفشل في كل من الجودة والسرعة في نفس الوقت.

فحص الصفحة بحثًا عن الصور ذات الحجم الزائد

افتح أدوات المطور، وانتقل إلى تبويب الشبكة (Network)، وقم بالتصفية حسب الصور وأعد تحميل الصفحة. تع his القائمة كل صورة مع حجمها المنقول، مرتبة حسب الأكبر أولاً.

أي صورة منفردة تزيد عن 500 KB تستحق التحقيق، وأي صفحة يزيد إجمالي الصور فيها عن 2 MB لديها مشكلة. مرر الماوس فوق صورة في لوحة العناصر (Elements) لرؤية أحجامها الأصلية والمعروضة جنباً إلى جنب. الفجوة الكبيرة بين الرقمين هي تعريف الصورة ذات الحجم غير الصحيح، وتكون مرئية في ثوانٍ.

تغيير حجم مكتبة في دفعة واحدة

حدد العرض المستهدف مرة واحدة وطبقه على كل ملف في مجلد، بدلاً من تغيير حجم الصور بشكل فردي. يتم تغيير حجم مكتبة تضم عدة مئات من الصور في دقائق عندما يتم تجميع العمل.

قم بإسقاط ما يصل إلى 500 ملف في وقت واحد، أو اسحب أرشيف ZIP مباشرة إلى الداخل، وحدد العرض والصيغة وهدف الضغط للمجموعة بأكملها. يعمل كل شيء داخل متصفحك على معالجك الخاص، لذا فإن مواقع العملاء وأصول الإعداد والمعارض غير المنشورة لا تصل أبدًا إلى خادم. لا يتم رفع أي شيء، مما يعني أن تغيير حجم المكتبة بالكامل يتم دون عبور ملف واحد للشبكة.