صور لا تُبطئ الموقع

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

ما الذي يجعل الصورة ثقيلة؟

ثلاثة أشياء، بترتيب أثرها.

الأول: عدد البكسلات. صورة من هاتف حديث تحمل نحو اثني عشر مليونًا، مرتبة 4032 عرضًا و3024 ارتفاعًا. بطاقة في شبكة ترسمها بعرض 380 بكسل. والمتصفح ينزّل الاثني عشر مليونًا كلها، ويفكّ ترميزها إلى الذاكرة، ثم يتخلص من معظم النتيجة. وفك الترميز عمل على هاتف الزائر، وعلى جهاز رخيص هو الجزء المؤلم، لأن القيد ذاكرة لا سرعة الشبكة.

الثاني: الصيغة، أي كيف تُخزَّن البكسلات. الصورة الفوتوغرافية فيها ملايين الدرجات المتقاربة، والشعار فيه خمسة ألوان وحافة حادة. تخزين صورة فوتوغرافية في صيغة مبنية للألوان المسطحة يجعلكم تدفعون ثمن الأمانة، وتخزين شعار في صيغة مبنية للصور يجعل حوافه طرية.

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

لماذا تُقبل صورة الهاتف ولا يُقبل ملفها الخام؟

الكاميرا ليست المشكلة. تسجّل أكثر مما تعرضه أي صفحة: بكسلات أكثر من الصندوق، وألوانًا أكثر من الشاشة، وملاحظة عن اتجاه الإمساك. والقراران يخصان الصفحة. الحجم: ما أكبر صندوق ستُرسم فيه هذه الصورة؟ والشكل: الهاتف يصوّر بنسبة 4:3 واللافتة 16:9، فلا بد من قرار: يُقصّ أعلى البناية أم يُضغط؟ الضغط لا يقرر أيًا منهما، ولهذا يمر موقع بـ«تحسين» وهو يشحن صورة كبيرة الشكل خاطئ في الوقت نفسه.

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

أي صورة مضمون وأي صورة زينة؟

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

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

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

كيف تصل الصورة المناسبة إلى الشاشة المناسبة؟

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

والكثافة تفاجئ الناس. الهاتف قد يضع ثلاث بكسلات فيزيائية في كل بكسل تخطيط، فصورة تُرسم بعرض 380 تحتاج نحو ثلاثة أمثالها لتظهر حادة. تقديم 380 بالضبط حساب صحيح وصورة طرية؛ وتقديم 4032 هو الخطأ الآخر. ودليل الصور المتجاوبة يوضح كيف تُكتب هذه المفاضلة.

ماذا يشتري التحميل الكسول وماذا يكسر؟

يشتري الشيء الواضح: صورة بعيدة أسفل الصفحة لا تُنزَّل حتى يقترب القارئ منها، فصفحة كتالوج طويلة تتوقف عن الدفع مقابل صور لم يمرّ عليها أحد.

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

الصورة	ما ينبغي أن تفعله	ما يحدث إن لم تفعله
صورة الواجهة	تُحمَّل فورًا بحجم أمين واحد	شاشة أولى فارغة على هاتف بطيء
منتج في شبكة	صندوق ثابت وعروض متعددة	الشبكة تقفز كلما وصل ملف
قائمة أسعار مصوّرة	تُكتب نصًّا بدل ذلك	غير مقروءة على الهاتف ولا تُبحث
الشريحة الثانية	تُحمَّل مع الأولى	إطار فارغ بعد الضغط

بأي ترتيب تصلحون صفحة بطيئة؟

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

أين يخطئ الناس

• التصغير بسحب الزاوية والتصدير. تبقى اللوحة بحجمها الأصلي، فيُشحن الملف بالوزن نفسه حول صورة أصغر.
• صيغة واحدة لكل شيء. صور فوتوغرافية محفوظة كرسوم مسطحة، وشعارات محفوظة كصور: كل خطأ في اتجاه.
• الضغط بدل التصغير. الملف يصبح أقبح وبالكاد أصغر.
• ملف بعرض 1600 لهاتف بعرض 390، بتبرير أنه يبدو سليمًا على شاشة حاسوب.
• نص بديل مكتوب كقائمة كلمات. يُقرأ بصوت عالٍ لمن لا يرى الصورة؛ صفوا الصورة.

ما لا يغطيه هذا المقال

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

نبني مواقع تُقاس فيها كل صورة على الصندوق الذي تجلس فيه، وتبقى الصفحة ساكنة حتى تصل.