تعليمات وسائط متعددة - استخدام الصور على الويب

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

متى تستخدم الصور

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

عند النظر في إضافة الصور إلى المستند، يُعتبر عاملاً مهماً آخر، وهو تأثير التأخير في البحث الذي يحدث أثناء نقل المستند عبر الشبكة، خاصة عبر مودم. يمكن لمستند عادي أن يحتوي على ما يصل إلى 10-15 كيلوبايت، بينما يمكن أن تصل حجم الصورة إلى مئات الكيلوبايت. كما أن وقت تنزيل المستند الكلي ليس مجرد مجموع جميع أجزائه، بل يجب أيضًا النظر في تأخير حمل الشبكة.

بناءً على سرعة الاتصال (أي عرض النطاق الترددي،عرض النطاق الترددي،عادةً ما يتم التعبير عنها باستخدام bps أو b/s) وتحسين سرعة الاتصال، وعند محاولة تنزيل مستند يحتوي على صورة بحجم 100 KB، قد يتطلب الأمر في منتصف الليل أو الساعة الواحدة صباحًا، عندما يكون معظم الناس ينامون، استخدام مودم بسعة 57.6 Kbps لاستغراق حوالي 15 ثانية للانتهاء من التنزيل، وقد يتطلب أيضًا في منتصف النهار استخدام مودم بسعة 9600 bps لاستغراق أكثر من 10 دقائق للتنزيل. هل حصلت على هذه الصورة؟

بالطبع، استخدام الصور والأجهزة المتعددة الأوجه سيحث مزودي خدمات الإنترنت على السعي إلى طرق أسرع وأفضل وأكثر قوة لتقديم محتوى الويب. قريبًا، سينتهي استخدام مودمات 56 Kbps مثل سيارات الحصان والخيول في التاريخ (مثل مودمات 9600 bps)، وسيعتمد على تقنيات جديدة مثل المودمات الكابلاتية وADSL. في الواقع، ستتجاوز معظم الاتصالات سرعة 1Mbps قريبًا.

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

متى تستخدم النص

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

أندر المستندات التي يتم تحويلها من صيغة أخرى إلى صفحات الويب تحتوي على صور مدمجة، بينما تكون المراجع والمحتوى الجاد والآخر عادة متاحة كنص نظيف.

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

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

زيادة سرعة تحميل الصور

إلى جانب اختيار المحتويات بحذر لاحتواءها في المستند، هناك العديد من الطرق لتحسين مشاكل الحمل والاستجابة التي تسببها الصور:

الحفاظ على البساطة

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

إعادة استخدام الصور

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

تقسيم المستندات الكبيرة

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

عزل الصور الكبيرة عند الحاجة

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

تحديد حجم الصورة

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

JPEG أم GIF؟

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

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

علامة <img>

تسمح علامة <img> بإدراج أو تضمين الصور في تدفق الوثيقة الحالي. للحصول على معلومات أكثر عن هذه العلامة، يُرجى الرجوع إلى: