المحتوى عن 'تحسين الصور'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • التجارة الإلكترونية
  • الإدارة والقيادة
  • مقالات ريادة أعمال عامة

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
  • HTML
    • HTML5
  • CSS
  • SQL
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • Sass
    • إطار عمل Bootstrap
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة Swift
  • لغة R
  • لغة TypeScript
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات برمجة عامة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • نصائح وإرشادات
  • مقالات تصميم عامة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات DevOps عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • التسويق بالرسائل النصية القصيرة
  • استسراع النمو
  • المبيعات
  • تجارب ونصائح

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عمل حر عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 4 نتائج

  1. المرة الأولى التي صنعت فيها صورة متجاوبة (responsive)، كانت بسيطة مثل ترميز هذه الأسطر الأربعة. img { max-width: 100%; height auto; /* default */ } رغم أن ذلك كان مناسبًا لي كمطور، إلا أنه لم يكن الأفضل للمستخدمين. ماذا يحدث إذا كانت الصورة في الخاصية src ثقيلة؟ على الأجهزة المتطورة (مثل الجهاز الذي يحتوي على ذاكرة وصول عشوائي بسعة 16 جيجابايت)، قد تحدث مشكلة بسيطة في الأداء أو لا تحدث، ولكن ماذا عن الأجهزة متدنية الأداء؟ إنها قضية أخرى. الرسم التوضيحي أعلاه غير مفصل بما فيه الكفاية. أنا من نيجيريا، وإذا كان منتجك يعمل في إفريقيا فعليك ألا تنظر إلى ذلك الرسم، انظر إلى هذا الرسم البياني بدلًا من ذلك. في الوقت الحاضر، iPhone الأقل سعرًا يُباع في المتوسط بسعر 300 دولار أمريكي، ولا يستطيع المواطن الأفريقي العادي تحمل تكاليفه على الرغم من أن iPhone يمثل عتبة لقياس الأجهزة السريعة. هذا هو كل تحليل الأعمال الذي تحتاجه لفهم أن نطاق CSS لا يقلل من الصور المتجاوبة. على حال، هل تعرف حقًا ما هي الصور؟ الفروق الدقيقة في الصور تُعدُّ الصور جاذبة للمستخدمين ولكنها تمثل تحديًا صعبًا للمطورين حيث يجب عليهم مراعاة النقاط التالية: الشكل حجم القرص تجسيد البعد (عرض المخطط والارتفاع في المتصفح) الأبعاد الأصلية (العرض والارتفاع الأصلي) نسبة العرض إلى الارتفاع لذا، كيف نختار المعاملات الصحيحة ونطبقها بمهارة لتقديم تجربة مثالية لجمهور المستخدمين؟ تعتمد الإجابة بدورها، على إجابات هذه الأسئلة: هل الصور التي تم إنشاؤها ديناميكيًا بواسطة المستخدم أم بشكل ثابت بواسطة فريق تصميم؟ إذا تم تغيير عرض الصورة وارتفاعها بشكل غير متناسب، فهل سيؤثر ذلك على جودة الصورة؟ هل يتم عرض جميع الصور عند تقديمها بنفس العرض والارتفاع؟ هل يجب أن يكون لديهم نسبة عرض إلى ارتفاع محددة أو نسبة مختلفة تمامًا؟ ما الذي يجب مراعاته عند تقديم الصور بطُرق عرض مختلفة؟ دون إجاباتك على هذه الأسئلة فهي لن تساعدك فقط في فهم صورك ومصادرها ومتطلباتها الفنية وما إلى ذلك، ولكن ستمكنك أيضًا من اتخاذ الخيارات الصحيحة في توفيرها وعرضها على المستخدم النهائي. الاستراتيجيات المشروطة لتوصيل الصور وعرضها على المستخدم تطور تسليم الصور من إضافة بسيطة لعناوين URL إلى خاصية src الخاصة بالصور إلى سيناريوهات معقدة. قبل الخوض فيها، دعنا نتحدث عن الخيارات المتعددة لتقديم الصور بحيث يمكنك ابتكار إستراتيجية حول كيفية تسليم الصور خاصتك وتصييرها وعرضها على المستخدم النهائي. أولاً، حدِّد مصادر الصور، إذ يمكن بهذه الطريقة تقليل عدد حالات الغموض واللبس ويمكنك معالجة الصور بأكبر قدر ممكن من الكفاءة. بشكل عام، الصور إما أن تكون: ديناميكية: يتم تحميل الصور الديناميكية من قبل المستخدمين، بعد أن تم إنشاؤها بواسطة أحداث أخرى في النظام. ثابتة: يتم إنشاء هذه الصور من قبل مصور، أو مصمم، أو أنت (المطور) لموقع الويب. دعنا نتعرف إلى إستراتيجية كلًا هذين النوعين من الصور. استراتيجية الصور الديناميكية الصور الثابتة سهلة الاستخدام إلى حد ما؛ من ناحية أخرى، الصور الديناميكية معقدة وعرضةً للمشاكل. ما الذي يمكن فعله للتخفيف من حدة طبيعتها الديناميكية وجعلها أكثر قابلية للتنبؤ بها مثل الصور الثابتة؟ هناك شيئان هما: التحقق من الصحة (validation) والاقتصاص الذكي للصور (intelligent cropping). التحقق من الصحة ضع بعض القواعد للمستخدمين حول ما هو مقبول وما هو غير مقبول. في الوقت الحاضر يمكننا التحقق من صحة جميع خصائص الصورة، هذه الخصائص تتلخص بالنقاط التالية: الصيغة حجم القرص الأبعاد نسبة العرض إلى الارتفاع ملاحظة: يتم تحديد حجم الصورة أثناء التصيير (rendering)، وبالتالي لا يتم التحقق من صحة الصور من جانبنا. بعد التحقق من الصحة، ستظهر مجموعة يمكن التنبؤ بها من الصور التي يسهل استخدامها. الاقتصاص الذكي للصور تتمثل الاستراتيجية الأخرى للتعامل مع الصور الديناميكية في اقتصاصها بذكاء لتجنب حذف محتوى مهم وإعادة التركيز على المحتوى الأساسي. هذا صعب ومع ذلك يمكنك الاستفادة من الذكاء الاصطناعي الذي توفره أدوات مفتوحة المصدر أو شركات SaaS التي تتخصص في إدارة الصور. بمجرد أن يتم الانتهاء من تنفيذ هذه الإستراتيجية للصور الديناميكية، أنشئ جدول قواعد به جميع خيارات التخطيط للصور. أدناه مثال يجدر بك النظر في تحليلاته لتحديد أهم الأجهزة وأحجام الإطار المعروض (viewport). الحد الأدنى (شبه الأمثل) الآن، ضع جانبًا تعقيدات الاستجابة وانظر للمثال التالي - شيفرة HTML بسيطة مع CSS ذا أقصى عرض. تعرض الشيفرة التالية بعض الصور: <main> <figure> <img src="https://res.cloudinary.com/...w700/ps4-slim.jpg" alt="PS4 Slim"> </figure> <figure> <img src="https://res.cloudinary.com/...w700/x-box-one-s.jpg" alt="X Box One S"> </figure> <!-- More images --> <figure> <img src="https://res.cloudinary.com/...w700/tv.jpg" alt="Tv"> </figure> </main> ملاحظة: علامة الحذف (…) التي تمثل استراتيجية الاقتصاص في عنوان URL الخاص بالصورة أو المجلد. يوجد الكثير من التفاصيل التي يجب تضمينها، لكن الاقتصاص للتركيز هو ما يهم الآن. للحصول على الإصدار الكامل، انظر مثال CodePen أدناه. هذه هي أقصر شيفرة CSS موجودة على الإنترنت تجعل الصور سريعة الاستجابة: /* الحاوية الأب */ main { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } img { max-width: 100%; } إذا لم يكن للصور عرض وارتفاع متساويان، بدلِّ object-fit مكان max-width واضبط القيمة إلى cover. يشرح منشور مدونة Jo Franchetti عن التنسيقات الشائعة المتجاوبة مع تخطيط CSS كيف أن قيمة grid-template-columns تجعل التخطيط بأكمله متجاوبًا. ما سبق ليس ما نبحث عنه، لأن: حجم الصورة ووزنها متماثلان في كل من الأجهزة المتطورة وغير المتطورة. قد نرغب في أن نكون أكثر صرامة مع عرض الصورة بدلًا من تعيينها على 250 ويتغير حجمها فيما بعد. حسنًا، يغطي هذا القسم «الحد الأدنى»، لذلك هذا كل شيء. اختلافات التخطيط أسوأ شيء يمكن أن يحدث لتخطيط الصور هو سوء تدبير وإدارة التوقعات. نظرًا لأن الصور قد يكون لها أبعاد مختلفة (العرض والارتفاع)، يجب أن نحدِّد كيفية تقديم وعرض هذه الصور. هل يجب علينا اقتصاص جميع الصور بذكاء لتصبح ذات أبعاد منتظمة؟ هل يجب أن نحتفظ بنسبة العرض إلى الارتفاع لجهة العرض ونغير النسبة لشيء آخر؟ الخيار لنا. في حالة وجود صور في شبكة، مثل تلك الموجودة في المثال أعلاه مع نسب أبعاد مختلفة، يمكننا تطبيق تقنية الاتجاه الفني (art direction) لتصيير وعرض الصور، إذ يمكن أن يساعد في تحقيق شيء مثل هذا: انظر المثال أدناه: <main> <figure> <picture> <source media="(min-width: 900px)" srcset="https://res.cloudinary.com/.../c_fill,g_auto,h_1400,w_700/camera-lens.jpg"> <img src="https://res.cloudinary.com/.../c_fill,g_auto,h_700,w_700/camera-lens.jpg" alt="Camera lens"> </picture> </figure> <figure> <picture> <source media="(min-width: 700px)" srcset="https://res.cloudinary.com/.../c_fill,g_auto,h_1000,w_1000/ps4-pro.jpg"></source> </picture> <img src="https://res.cloudinary.com/.../c_fill,g_auto,h_700,w_700/ps4-pro.jpg" alt="PS4 Pro"> </figure> </main> بدلاً من تقديم صورة واحدة بعرض 700 بكسل، نعرضها بشكل 700 بكسل × 700 بكسل فقط في حال إذا تجاوز عرض منفذ العرض 700 بكسل. إذا كان حجم العرض أكبر، فسيحدث التالي: يتم تصيير صور عدسة الكاميرا كصورة عرضية تبلغ 700 بكسل وعرضها 1000 بكسل في الارتفاع (700 بكسل × 1000 بكسل). يتم عرض صور PS4 Pro بدقة 1000 بكسل × 1000 بكسل. الاتجاه الفني (Art direction) قد نحذف المحتوى الأساسي عن غير قصد عن طريق اقتصاص الصور لجعلها أكثر استجابة. كما ذُكر سابقًا، يمكن أن تساعد أدوات الذكاء الصنعي AI مفتوحة المصدر على الاقتصاص بذكاء وإعادة التركيز على الكائنات الأساسية للصور، بالإضافة إلى ذلك يعد منشور Nadav Soferman عن الاقتصاص الذكي بمثابة دليل إرشادي مفيد. شبكة دقيقة وممتدة (Strict grid and spanning) المثال الأول على الصور سريعة الاستجابة في هذا المقال هو مثال رائع. عند عرض 300 بكسل كحد أدنى، تتدفق عناصر الشبكة تلقائيًا إلى مكانها وفقًا لعرض الإطار المعروض من النافذة (viewport). من ناحية أخرى، قد نرغب في تطبيق قاعدة أكثر صرامة على عناصر الشبكة بناءً على مواصفات التصميم. تكون استعلامات الوسائط في هذه الحالة مفيدة. بدلاً من ذلك، يمكننا الاستفادة من قدرة الشبكة الممتدة grid-span لإنشاء عناصر شبكية ذات طول وعرض مختلف. @media(min-width: 700px) { main { display: grid; grid-template-columns: repeat(2, 1fr); } } @media(min-width: 900px) { main { display: grid; grid-template-columns: repeat(3, 1fr) } figure:nth-child(3) { grid-row: span 2; } figure:nth-child(4) { grid-column: span 2; grid-row: span 2; } } بالنسبة لصورة تبلغ مساحتها 1000 بكسل × 1000 بكسل على منفذ عرض واسع، يمكننا توسيعها لالتقاط خليتين من الشبكات في كل من الصف والعمود. يمكن أن تأخذ الصورة التي تتغير إلى اتجاه عمودي (700 بكسل × 1000 بكسل) على حجم أوسع من الإطار المعروض خليتين على التوالي. التحسين التصاعدي (Progressive optimization) التحسين غير المدروس ليس ذو فائدة كما لو أنه لم يحصل أي تحسين. لا تركز على التحسين دون تحديد القياسات المناسبة، ولا تقوم به إذا لم يتم دعمه بالبيانات اللازمة. ومع ذلك، يوجد مجال واسع للتحسين في الأمثلة المذكورة أعلاه. لقد بدأنا بالحد الأدنى، وأظهرنا لك بعض الحيل الرائعة، السؤال التالي الذي يجب طرحه هو: «إذا كانت الصفحة تحتوي على 20-100 صورة، فما مدى جودة تجربة المستخدم؟» فيما يلي الإجابة، يجب أن نضمن أنه في حالة وجود العديد من الصور للعرض أن يكون حجمها يناسب الجهاز الذي يعرضها. لتحقيق ذلك، نحتاج إلى تحديد عناوين URL لعدة صور بدلًا من صورة واحدة. سيختار المتصفح الصورة الأنسب لعرض الجهاز منها (الصورة ذات العرض الأمثل) وفقًا للمعايير. وتسمى هذه التقنية تبديل الدقة (resolution switching) في الصور سريعة الاستجابة. انظر مثال هذه الشيفرة: <img srcset="https://res.cloudinary.com/.../h_300,w_300/v1548054527/ps4.jpg 300w, https://res.cloudinary.com/.../h_700,w_700/v1548054527/ps4.jpg 700w, https://res.cloudinary.com/.../h_1000,w_1000/v1548054527/ps4.jpg 1000w" sizes="(max-width: 700px) 100vw, (max-width: 900px) 50vw, 33vw" src="https://res.cloudinary.com/.../h_700,w_700/v1548054527/ps4.jpg 700w" alt="PS4 Slim"> تشرح تغريدة هاري روبرتس بشكل حدسي ما يحدث: عندما جربت تقنية تبديل الدقة لأول مرة، شعرت بالارتباك وغردت ب: رفعت القبعة إلى جيسون جريجسبي للتوضيح الذي أدلى به. بفضل تقنية تبديل الدقة، إذا تم تغيير عرض نافذة المتصفح، فإنه يقوم بتنزيل الصورة الصحيحة المناسبة لحجم الإطار المعروض آنذاك من النافذة؛ وبالتالي، تُستخدَم الصور الصغيرة للهواتف الصغيرة (مناسبة لوحدة المعالجة المركزية وذاكرة الوصول العشوائي) والصور الأكبر لعرض نافذة أكبر. يوضح الجدول أعلاه أن المتصفح يقوم بتنزيل نفس الصورة (المستطيل الأزرق) بأحجام مختلفة للقرص (المستطيل الأحمر). يعد تطبيق Respp Image Breakpoints Generator من Cloudinary المجاني والمفتوح المصدر مفيدًا للغاية في تكييف صور موقع الويب مع أحجام شاشات متعددة. ومع ذلك في كثير من الحالات، سيكون إعدادات srcset و sizes وحدها كافية. الخلاصة تهدف هذه المقالة إلى توفير إرشادات بسيطة وفعالة لإعداد صور وتخطيطات سريعة الاستجابة في ضوء العديد من الخيارات المتاحة وأحيانًا المربكة. تعرّف على CSS Grid والاتجاه الفني (Art Direction) وتبديل الدقة (Resolution Switching) وستكون مبدعًا في وقت قصير في مجال الصور المتجاوب. استمر بالتعلم! ترجمة -وبتصرف- للمقال Planning for Responsive Images لصاحبه Chris Nwamba
  2. في الجزء السابق من سلسلة SEO للمدونين ألقينا نظرة على طرق تحسين المدونة ككل وتهيئتها لمحركات البحث، كما تعرّفنا على بعض مفاهيم SEO مثل الكلمات المفتاحية Keywords والربط Linking. في هذا الجزء سنستعرض وسائل يمكنك من خلالها تحسين كل مقال على حدة وتهيئته لمحركات البحث بالإضافة إلى الصور التي يحتويها المقال. وكذلك سنتعرّف على كيفية اختيار العنوان المناسب للمقال والذي سيؤدي إلى زيادة التدفق إلى مدونتك. تحسين المقالات لكي تحسّن كل مقال على حدة، يجب أن تختار سلسلة string محددة للكلمات المفتاحية. إنّ سلسلة الكلمات المفتاحية المثالية ليست مُخصّصة جدا بحيث من النّادر أن يبحث عنها أي مستخدم، وكذلك ليست شائعة جدا بحيث تكون هناك منافسة كبيرة لها. لنفترض أنّني أرغب في مشاركة وصفة لعمل الخبز على مدونتي. لن أستخدم مصطلح بحث كـ "bread" (خبز) لأنّه شمولي جدا، لكن بدلا من ذلك سأختار مصطلحا أقل شيوعا، مثل "multigrain bread recip" (وصفة عمل الخبز باستخدام حبوب متعددة)، أو "sourdough bread recipe" (وصفة عمل الخبز المخمّر). عندما تكون محتارا في اختيار سلسلة الكلمة المفتاحية المناسبة، استخدم أداة Google Keyword. بعد أن تختار العبارة المكونة من الكلمات المفتاحية، هناك بعض المواضع في مقالك يجب أن تتأكد من تضمين هذه الكلمات المفتاحية فيها لتحسّن المقال إلى أفضل درجة. في عنوان المدونة في الرابط المباشر URL لمقالك الذي قمت بنشره في العناوين الفرعية لمدونتك (من الأفضل أن تكون في وسم <H1> أو <H2>، حيث أنّها تحصل على الأهمية الأكبر من قبل جوجل) في الفقرة الأولى لمقالك استخدمها عدد من المرات في متن مقالك (اسعَ إلى تحقيق كثافة كلمات مفتاحية لا تزيد عن 6%) في قسم الوسوم الآن، يجب أن أذكّرك بكتابة المقال مع أخذ جمهورك في الاعتبار. من الممكن أن تكون قادرا على تحقيق جميع النقاط المذكورة أعلاه في كل المقالات، لكن يجب أن تفكّر في جمهورك أولا، وفي تحسين SEO ثانيا. فإذا كان هدفك تحسين SEO مقالاتك فقط، سيجعلها خالية من الطابع الإنساني، وستبدو وكأنّها كُتبت آليا، ولا جدوى من فعل ذلك، أليس كذلك؟ يمكنك أن تجلب كل التدفّق الذي تستطيع إلى مدونتك، لكن إذا لم يكن المحتوى الذي تنشره بجودة عالية، لن يرجع الناس إلى المدونة، وسيصبح معدل الارتداد bounce rate عاليا، مما يؤثر على ترتيب المدونة في محركات البحث على المدى البعيد. تحسين الصور تُعتبر الصور بالغة الأهمية في مقالات المدونات، إذ أنّها، أولا وقبل كل شيء، تضيف اهتماما بصريا وتساعد على جذب الأنظار والفصل بين النصوص. ثانيا، تجعل الصور مدونتك قابلة للنشر على Pinterest، الأمر الذي يمكن أن يكون مصدرا كبيرا للتدفّق إلى المدونة عبر هذه الشبكة الاجتماعية. بالإضافة إلى ذلك، عندما تقوم بإدراج صورة في مقالك، ستفتح مصدرا جديدا للتدفق من محركات البحث: Google Images. فإذا قام أحدهم بالدخول إلى صفحة جوجل للبحث عن شيء ما، قد يقوم باختيار خيار "images" (صور)، وإذا كانت صورك محسّنة بصورة صحيحة، قد تظهر في نتائج ذلك البحث، مما يقود الناس في النهاية إلى مدونتك. كيفية تهيئة الصور لمحركات البحث تأكد دائما من إدراج صورة في المقال. من أدوات إنشاء الصور التي أفضلها هي PicMonkey و Canva. أما مصدري المفضل للعثور على صور مجانية فهو Compfight. وبالطبع استخدم أحيانا الصور التي ألتقطها بنفسي لتكميل مقالاتي، وخصوصا على مدونتي الخاصة بالطبخ. تحقق من حجم الصورة قبل أن تقوم برفعها. تستغرق الصور كبيرة الحجم وقتا أطول في التحميل، وبالتالي تؤثر على سرعة تحميل الموقع/المدونة، والذي بدوره يؤثر على ترتيب rank الصفحة. إذا كنت تلتقط الصور بواسطة كاميرا رقمية، استخدم فوتوشوب أو PicMonkey لتقليل حجمها. عادة ما أقوم بتقليص الصور التي أستخدمها إلى عرض 650 بكسل لأنّه يناسب عرض مدونتي تماما، ومن ثم أقوم بإعادة تعديل الصورة لتتناسب مع فيس بوك. وبالنتيجة أحصل عادة على صور بحجم بضع مئات من الكيلوبايتات والتي تتحمل بسرعة. قم بإضافة عنوان و/أو علامة مائية للصورة، وحسب رغبتك. في كثير من الأحيان أقوم بكتابة اسم الوصفة على الصورة (في مقالات مدونة الطبخ)، وأضيف علامة مائية لموقعي على الزاوية. ربّما لن يؤثر ذلك على SEO بحد ذاته، لكنه قد يساعد على جلب التدفق إلى مدونتك، ويمنع الناس من سرقة صورك. تأكد من ملء الفراغات بعد رفع الصورة. تأكد من تغيير حقل العنوان Title من الاسم الافتراضي للصورة (مثل: screencapture ،DSC ،Photo، إلخ) إلى اسم دلالي يصف ماهيّة الصورة، أو ما تتمحور حوله. وهذا الأمر مهم لأن المستخدم عندما يبحث عن صورة لن يبحث عن "photo" أو "DSC"، وإنّما سيبحث عن شيء أكثر تحديدا، كـ "SEO optimized images in blog post" (صور مهيأة لمحركات البحث في مقالات المدونة)، مثلا. تأكد من نسخ نفس النص من حقل Title (العنوان) ولصقه في حقل Alt Text (النص البديل) وحقل Description (الوصف). النص البديل هو للأشخاص الذين يعانون من مشاكل مع النظّر (كالمكفوفين)، والوصف هو ما يراه الناس في مربّع النص الأصفر الذي يظهر عندما يمررون الفأرة فوق الصورة. تأكد أيضا من إضافة تسمية توضيحية للصورة، فهي مهمة أيضا لأنّ احتمالية قراءتها من قبل الناس كبيرة. كيفية اختيار عنوان رائع وجذاب للمقال من الغني عن التّذكير أنّ اختيار عنوان للمقال أمر مهم للغاية. فالعنوان، وغالبا الأسطر القليلة الأولى من مقالك تساعد على جذب انتباه القارئ وتدفعه إلى متابعة القراءة، فهو بمثابة الطعم للقارئ. مع ذلك، يمكن أن يؤثر العنوان الجيد أيضا على SEO المقال. فإذا كان العنوان مثيرًا للاهتمام/غريبًا/مضحكًا/وتوضيحيًا، سيكون مميزا ويبرز بين جميع نتائج البحث، مما يحث الناس على النقر على مقالك بدلا من مقالات المدونات الأخرى. إليك بعض النصائح حول اختيار عنوان جيّد: ليكن العنوان محددا وليس عموميا. عمّا يتحدث المقال؟ اذكر ذلك بإيجاز. لا تنس كلماتك المفتاحية. عندما يساورك الشك حول الكلمات المفتاحية المناسبة استخدم الأداة المذكورة أعلاه (Google Keyword) لمعرفة الكلمات المفتاحية ذات العائد الأكبر (10 آلاف عملية بحث في الشهر كحد أدنى) وفي نفس الوقت لها تقييم rating متوسط أو منخفض. تأكد من وجود الكلمة المفتاحية في عنوان المقال، ومن الأفضل أن تكون في بدايته. أجب عن الأسئلة وقدم حلولا للمشاكل. إن لم تكن متأكدا حول الموضوع الذي تكتب عنه، ابدأ بالأسئلة المتكررة الخاصة بك. ما هي الأسئلة التي يسألها عملاؤك أو زبائنك بشكل منتظم؟ ابدأ بكتابة مقال يجيب عن كل من تلك الأسئلة. بإمكانك أن تبدأ مقالك بـ "كيفية ..." (... How to). اكتب مقالا بهيئة قائمة. هذا النمط من المقالات له شعبية كبيرة على الإنترنت، فالجميع يحب "5 أسباب لـ ..." أو "7 طرق لـ ...". قدّم قيمة. قبل كل شيء، تأكّد من أنّ مقالك يوفر معلومات قيّمة. سيزور الناس مدونتك، يتصفحونها، ويعودون لقراءة المزيد عليها إذا شعروا بأنّها تستحق ذلك. ترجمة -وبتصرّف- للمقال SEO4Bloggers 6: How to SEO-Optimize Your Blog Posts و SEO4Bloggers 7: SEO Optimizing Images و SEO for Bloggers 8: Choosing A Kick-Ass Blog Post Title لصاحبته: Rebecca Coleman.
  3. تطرّقنا في المقال السّابق إلى أهميّة تحسين الصّور على موقعك، بل والحاجة إلى القيام بذلك. قبل أن نتطرق إلى الخيارات المتوافرة لتجهيز الصور للنشر على الإنترنت، لنتحدث قليلا عن بعض الخطوات التحضيرية البسيطة ذات الأثر الكبير والقادرة على إضافة قيمة فيما يخص التحسينات اللاحقة. تغيير حجم الصورة مسبقا عرفت الكاميرات الرقمية العصرية تقدما كبيرا إلى حد المبالغة في ما يخص بعض الأمور، حيث أن الصور الملتقطة باستعمال هاتف iPhone مثلًا تعتبر كبيرة جدا مقارنة مع ما تحتاجه لووردبريس. تبعا لإعدادات الكاميرا التي تستخدمها يمكن لحجم الصور أن يصل إلى 4912*7360 بكسل بحجم ملف يصل إلى 30 ميغابايت، لذا يعتبر تغيير حجم الصور من أجل الاستخدام على الإنترنت الخطوة الأولى الأساسية في وضع الأمور في نصابها. سوف تحتاج بطبيعة الحال إلى أداة للقيام بذلك، تتوافر العديد من الخيارات التي يمكنك استخدامها. إن لم تكن مستعدا لإنفاق بعض المال فيمكن لكل من Paint بالنسبة لويندوز و Preview بالنسبة للماك القيام بتغيير حجم الصور بشكل ممتاز بكل بساطة وسرعة. إن كنت تبتغي التّحكم بشكل أفضل في الصّور دون أن تدفع مقابل تطبيقات تجارية، فأنصحك باستخدام Gimp الذي يوفر حلا مجانيا للاستخدام على الحواسيب، فهو مُتَعدد المنصات (cross-platform) ومفتوح المصدر. تتوافر أيضا بعض الخيارات للاستخدام عبر الإنترنت فقط مثل Pixlr و Fotoflexer. في فئة الحلول المدفوعة، يقدم كل من Pixelmator للماك و IrfanView للويندوز وظائف شاملة ممتازة بأثمنة في المتناول. يبقى فوتوشوب هو الخيار البديهي، في هذا السياق يأتي إعلان Adobe عن Creative Cloud packages بين حزمة برامجه ليضع أفضل أداة تعديل الصور في متناول القدرة الشرائية لعامة الناس. بغض النظر عن الأداة التي ستستخدمها، عليك بتذكر النقاط التالية دائما أثناء تغيير حجم الصور: العمل على نسخة من الصورة (عوض العمل على الصورة الأصلية ذات الجودة العالية) ما يوفر لك إمكانية التجريب وتغيير رأيك. عليك بالتأكد من الحفاظ على معدل الطول إلى العرض (aspect ratio) الأصلي دون التسبب في أي تشويه (distortion) أثناء تغيير الحجم. تقطيع الحواشي (Cropping Cuts) إلى جانب تغيير حجم الصور الإجمالي، يعتبر تقطيع الحواشي أيضا من بين أهم الخطوات التحضيرية التي يجب عليك القيام بها. يهدف التخلص من هذه الزوائد إلى: الإنقاص من حجم الملف كنتيجة بديهية. جعل الصور أكثر قوة وتعبيرا بصريا. مثال توضيحي لقطع الحواف بشكل جيد إعداد الصور لدعم شاشات Retina قبل المرور إلى ضغط (compressing) الصور، لنتطرق باختصار إلى موضوع تحسين الصور بغرض دعم الأجهزة ذات شاشات من نوع Retina. أضحت شاشات العرض من نوع Retina وبشكل متزايد النموذج المعياري لكل الأجهزة من مختلف الأحجام، كما أن نسبة حركة الزوار الخاصة بها ستعرف ارتفاعا في السنوات القليلة المقبلة. إن لم تكن تريد لمجهودك في تغيير حجم الصور وتقطيع حواشيها أن يضيع سدى وتظهر صورك منقطة ومتقطعة عند العرض على الأجهزة الحديثة عليك بأخذ هذا بعين الاعتبار. تقدم مدونة Jetpack مثالا توضيحيا للفرق بين الصورة إن تم تحسينها وإن لم يتم ذلك: صورة توضيحية للفرق بين بين الصور الداعمة لشاشات retina وتلك غير الداعمة في التطبيق، يتجلى إعداد الصور لدعم شاشات Retina من خلال إنشاء نسختين من الصور: الأولى بالقياسات التي تحتاجها والثانية بضعف تلك القياسات، على سبيل المثال بالنسبة لصورة بصيغة JPEG بحجم 350*350 بكسل يجب أن تنشأ نسخة أخرى منها بحجم 700*700 بكسل. يمكنك التحكم في عرض هذه النسخ من الصور على ووردبريس من خلال استخدام سكربت Retina.js أو بالاعتماد على أحد الملحقين التاليين: WP Retina 2x أو Simple WP Retina واللذان يعتبران أفضل الملحقات للقيام بهذه المهمة. ضغط الصور تعرفنا إلى حد الآن على كيفية تحظير الصور من خلال تغيير قياساتها، قطع حواشيها فضلا عن ملائمتها للعرض على العديد من الأجهزة المختلفة. لننتقل إلى أهم مرحلة في عملية التحسين ألا وهي ضغط الصور. تتجلى عملية الضغط بكل بساطة في الحذف (عبر خوارزميات خاصة) للمعلومات المتواجدة في الصور والتي لا يمكن للعين البشرية التقاطها، يعتبر الضغط خطوة أساسية في التحسين حيث يسمح بخفض حجم ملفات الصور بشكل كبير. من بين الأنواع الثلاثة للصور النقطية التي أشرنا إليها سابقا، تعتبر صيغة JPEGs أفضل الخيارات لعملية الضغط كونها تستخدم مبدأ الضغط الفقود (lossy compression) على عكس صيغ PNGs وGIFs ما يعني احتمالية أكبر للحصول على انخفاض مهم في حجم الملفات. تتجلى نقطة الضعف في ضرورة الفحص الدقيق للنتائج بعد الضغط للتأكد من خلو الصور المضغوطة من التشوهات الصورية (visual artefacts) كما في الصورة أسفله. مثال للتشوهات الصورية التي قد يسببها الضغط أثناء عملية الضغط يجب عليك أن تستهدف أصغر حجم ملفات ممكن بأفضل جودة صورة ممكنة. تجدر الإشارة إلى أن ضغط الصور بصيغ PNGs و GIFs يقلل من حجم ملفاتها أيضا، يتجلى الفرق الوحيد في أن إنقاص حجم الملفات يكون أقل. توضح الصورة التالية المأخوذة من موقع TinyPNG أن المردودية المحصلة من ضغط هذه الصيغ تبقى كبيرة رغم ذلك. الفرق في حجم الملفات الناتج عن ضغط صورة من TinyPNG أدوات ضغط الصور توجد العديد من الخيارات المتوافرة لضغط الصور، إذا كنت تستخدم أحد برامج تعديل الصور التي لا تحتاج اتصال إنترنت التي أشرنا إليها سابقا، يمكنك بكل بساطة التحكم في خصائص الحفظ ( Save-as) المدمجة. هنالك أيضا تطبيقات لا تتطلب اتصال إنترنت مقدمة من كبريات المنصات مخصصة كليا لضغط الصور، أفضل الخيارات في هذا الصدد هي: ImageOptim للاستخدام على الماك أو Trimage للاستخدام على كل من الماك أو الويندوز. مردودية مرتفعة في خفض حجم الملفات باستخدام Kraken.io للاستخدام على الإنترنت يتربع على عرش العديد من الحلول المتوافرة كل من المتنافسين المتصدرين: TinyPNG و Kraken. ملحق WP Smush منذ بدئنا في مشروع WP Smush سنة 2013 عملنا على استثمار الكثير من الجهد والوقت في جعلها أكثر أدوات ووردبريس لتحسين الصور كمالا من ناحية الخصائص المتوافرة. قمنا مؤخرا بوضع WP Smush Pro تحث الاختبار وقارنّا النتائج مع أدوات مدفوعة أخرى لتحسين الصور كانت الخلاصة تصدر كل من Kraken، EWWW وWP Smush. إن كنت تبحث عن ملحق كامل الخصائص يقوم بكل العمل المضني من أجلك وعلى ووردبريس فإننا ننصحك بشدة بتجربة ملحق WP Smush. تحسين الصور من أجل السيو SEO قمنا إلى حد الآن بالتركيز على خاصيات عرض الصور إلا أن التحسين من أجل السيو لا يقل أهمية عن ذلك فيما يخص النجاح الإجمالي لموقعك، لنلق نظرة سريعة على الأساسيات: Filenames (أسماء الملفات): استخدم اسما وصفيا يتضمن الكلمات المفتاحية عوض الأسماء المولدة أوتوماتيكيا والتي لا تحمل معنى، استخدم مثلا: "green-child-bicycle.jpg" عوض "BX8A132E.JPEG". Alt tags (وسوم ALT): أنشئ وسوم ALT موجزة لكل صورة بغرض تحسين الصور ولقابلية وصول أفضل، على سبيل المثال: "alt="Side view of a child’s green bicycle". تحسينات خارج نطاق موقعك لن تقوم كل تحسينات الصور المتاحة بإحداث الكثير من الفرق إن كان موقعك يعاني من عراقيل في الأداء في نواح أخرى، يتطلب التطرق إلى هذا الموضوع الكثير من الوقت، عليك بالبدء بما يلي: أدوات اختبار السرعة: عليك بقياس أداء موقعك باستخدام الأدوات الاعتيادية لاختبار سرعة المواقع. إعداد الخادوم/الاستضافة: قم بتقييم أداء مزود الاستضافة الخاص بك للتأكد من أن الخادوم محسن من أجل مواقع ووردبريس. يمكنك الاستفادة أيضا من فوائد استخدام شبكات توصيل المحتوى (ِContent Delivery Networks) مثل Cloudflare أو Photon الخاص بووردبريس لتتأكد من إيصال صورك بأسرع ما يمكن. وضع برنامج زمني لتحسين الصور بعد إتقان ما تطرقنا له في ما سبق، عليك عليك بإعداد قائمة مهام خاصة بالأمر تعود إليها بشكل متواصل لجعل تحسين الصور عملية روتينية موثّقة ومُدمجة ضمن آلية النّشر لديك، حيث تتمكن أنت أو أي شخص من طاقمك من القيام بها. استخدم العملية المكونة من 6 خطوات التالية مع مراعاة إدخال التغييرات التي تراها مناسبة حسب موقعك: تأكد من تحديد صيغة الصور الصحيحة من أجل تحقيق ما تريده. اعمل على قص حواشي الصور وتغيير حجمها للحصول على تأثير قوي وعلى أصغر حجم ممكن للصورة. توفير صور للعرض على الشاشات العادية وشاشات retina على حد سواء. الاستفادة من ضغط الصور والتحقق بصريا من خلو الصور من أي تشوهات، يمكنك البدء كخطوة أولى باستخدام أداة WP Smush. استثمر بعض الوقت لتحسين كل الصور من أجل السيو للاستفادة من بعض النتائج السهلة فيما يخص حركة مرور الزوار. خذ بعين الاعتبار استخدام CDN من أجل نتائج أفضل. خلاصة نتمنى أن يكون هذا المقال قد ساعدك بتقديم نظرة إجمالية حول موضوع تحسين الصور سواء على موقعك، يجدر بك تضمين تحسين الصّور في آلية النّشر لديك، وذلك لتحسين تصنيفك على محركات البحث، ضمان مداومة الزائر على الاطلاع على محتوى موقعك فضلا عن الرفع من حركة مرور مستخدمي الهواتف المحمولة. لقد اقتصرنا فيما سبق على التقنيات المجربة والتي أتبت فاعليتها، إلا أن الخيارات المتوافرة تتغير بشكل يومي، شاركنا في التعليقات أسفله أي نصائح أو طرق خاصة بك قد تكون مفيدة لمستخدمي ووردبريس الآخرين. ترجمة -وبتصرف- للمقال: The Complete Guide to Mastering Image Optimization for WordPress لصاحبه: TOM EWER.
  4. يعتبر تحسين الصور (Image Optimization) من بين أكثر الخطوات بساطة وتأثيرا والتي يمكنك اتباعها من أجل تحويل موقعك من جيد إلى رائع. إلا أن القيام بذلك بشكل خاطئ سيؤدي حتما إلا نتائج عكسية كإثارة سخط زوارك، التأثير سلبا على عائداتك المادية فضلا عن خفض تصنيف السيو SEO الخاص بك. من حسن الحظ أن توفر العديد من الأدوات المتقدمة يجعل من القيام بهذا الجزء المهم من عملية التحسين العام للمواقع بشكل صحيح أمرا من السهولة بمكان. سنعمل في هذا المقال على التعمق في هذا الموضوع من خلال تغطية كل ما ستحتاجه لضمان دفع أداء موقعك إلى أقصى حدوده فيما يتعلق بكيفية تقديم المحتوى الجرافيكي. لنبدأ من خلال تعريف المصطلحات والتطرق لمختلف صيغ الصور التي تدخل في سياق الموضوع. نظرة حول صيغ الصور المستخدمة على الإنترنت كما يعرف كل من أمضى بعض الوقت مستخدما خاصية Save-as على برنامج فوتوشوب، هنالك كم هائل من صيغ الصور في العالم الرقمي، لكن عندما يتعلق الأمر بوضع هذه الصور على الإنترنت فإننا نتعامل مع عدد محدود نسبيا من الخيارات. تنقسم هذه الصيغ إلى نوعين أساسيين: Vector graphics (الرسومات المُتَّجِهة): الصور التي يتم تمثيلها بالاعتماد على المعادلات الرياضية من خلال استخدام الأشكال الهندسية مثل النقط، الخطوط والمنحنيات. Raster graphics (الرسومات النقطية): الصور المكونة من خلال شبكة بكسل مستطيلة الشكل. توضيح للاختلاف بين الرسومات المتجهة (على يمينك) والنقطية (على يسارك) في سياق تحسين الصور سنولي اهتماما أكبر للصور النقطية، إلّا أننا سنلقي نظرة سريعة على موضوع الصور المُتّجهة قبل أن ذلك. الصور المتجهة (Vector Images) يتم تمثيل الصور المُتّجهة حسابيا وبالاعتماد على معادلات رياضية ما يعطيها العديد من الإيجابيات دون إدخال أي تحسينات: عدم ترابط جودة الصورة ودقتها: يمكن تكبير وتصغير الصور المُتّجهة إلى أي حجم دون التسبب في تشويهها أو في ضياع التفاصيل حيث يتم عرضها بالجودة الكاملة في أي دقة كيفما كانت. سهولة التعديل: تقدم الصور المُتّجهة نفسها على طبق من ذهب لإمكانية التعديل والتغيير دون تخريبها. حجم ملف صغير: تتكون الصور المُتّجهة من سلسلة أوامر برمجية ما يعني صغر حجم ملفاتها. لطالما جعلت النقاط التي أسلفنا الذكر من الرسوميات المُتّجهة خيارا ممتازا في مجال تصميم الرسوميات (designing graphic) سواء الرسوم التوضيحية، الخلفيات أو أيقونات الشعارات. من ناحية تحسين الصور يمكن اعتبار أن الصور المُتّجهة تأتي جاهزة بشكل مثالي دون الحاجة إلى أي تعديلات أو تحسينات، يبقى المشكل في استخدامها مقتصرا على ضمان توافقيتها مع المتصفحات ودعم هذه الأخيرة لاستخدامها ما أدى إلى شيوع ممارسة غير سلسة بعض الشيء تتجلى في إنشاء المصممين لأعمالهم على حزم تصميم داعمة للرسوميات المتجهة مثل: Adobe Illustrator أو Inkscape ثم الاضطرار إلى تصدير (export) أحجام مختلفة فضلا عن صيغ غير مُتَّجِهة من أجل استعمالها على الإنترنت. تصميم تطبيق الرسوميات المتجهة Sketch المقدم من Bohemian Coding يمكن لتَبَني صيغة صور الويب SVGs Scalable Vector Graphics (الرسومات المتجهة متغيرة الحجم) على الصعيد العالمي أن يجعل من الأمور أكثر سهولة في هذا الصدد، إلا أنه من المؤسف أننا لم نصل بعد إلى هذا المستوى فيما يتعلق بدعمها. بأخذ هذا بعين الاعتبار وبالنظر إلى سنوات من التقدم التدريجي التصاعدي، يمكن أن نقول أن دعم توافقية هذه الصيغة أصبح قريبًا، من المرتقب أيضا أن نشهد أخيرا وفي السنوات القليلة القادمة انتشار واسعا لاستخدام الرسوميات المتجهة على أرض الواقع. حتى ذلك اليوم، من الوارد أنك ستحتاج إلى تصدير (export) ملفات الصيغ المتجهة إلى صيغ نقطية من أجل عرضها على الإنترنت، سنولي اهتمامنا فيما يلي إلى هذا النوع الأخير من الصيغ. الصور نقطية (Raster Images) تحظى الصور النقطية بالدعم الكامل من المتصفحات فضلا عن الحاجة لإجراء تعديلات كثيرة ومتقدمة تماما عكس نظيرتها المتجهة. هنالك في المجمل ثلاث صيغ ملفات ستصادفها أغلب الوقت إضافة إلى واحدة أخرى حديثة العهد بادية في الأفق يجدر أخذها بعين الاعتبار. لنقم بتغطية هذه الصيغ بالتتابع. GIFs تعتبر صيغة GIFs) Graphics Interchange Format) أقدم الصيغ في عالم الصور الرقمية، حيث تم ابتكارها سنة 1987، تتميز بصغر حجم ملفها، محدودية لوحة الألوان الخاصة بها: 256 لونا فضلا عن دعمها للشفافية ما جعلها العماد الأساس للعمل الرقمي خلال بدايات الإنترنت، والحل الذي يتم اعتماده بخصوص الصور التي تتضمن نصا ما أو ألونا مسطحة (flat color). تعتبر الصور التي تتضمن النصوص و/أو الألوان المسطحة استعمالا كلاسيكيا لصيغة GIFs رغم تحقيق هذه الصيغة عودة لا بأس بها خلال موجة جنون استخدام صور GIFs الحركية مؤخرا إلا أنها تفقد المزيد من مستخدميها بشكل متواصل لفائدة صيغة PNGs. JPEGs تعتبر صور JPEGs الصيغة العالمية لعرض الصور منذ الأيام الأولى للإنترنت، يتم استعمالها حاليا في ما يزيد عن %70 من المواقع الإلكترونية على الصعيد العالمي. تتميز هذه الصور بمبدأ الضغط الفَقُود (lossy compression) ما يجعل منها مرشحا ممتازا لعمليات التحسين المتقدمة فضلا عن ملائمتها المثالية للصور التي تحتوي على مجال واسع من الألوان والتدرجات (gradients)، يعتبر عدم دعم هذه الصيغة للشفافية (transparency) نقطة ضعفها الوحيدة. حفظ كل من تدرج الألوان المتقن فضلا عن مجال اللون الديناميكي بشكل جيد باستخدام JPEGs PNGs تم ابتكار الرسومات من صيغة PNGs (رسومات الشبكة المحمولة Portable Network Graphics) كحل لمشاكل الترخيص المحتملة عند استخدام GIFs، توفر صيغة PNGs خاصية الضغط غير الفَقُود (lossless compression)، دعم الشفافية (transparency) فضلا عن جودة صورة عالية. تعتبر صيغة 8 بت (8-bit format) بديلا مثاليا لصيغة GIFs كما أنها تتميز عن هذه الأخيرة بصغر حجم ملفها، في حين أن صنفي 24 بت و32 بت (24-bit and 32-bit) يوفران بديلا ممتازا لصيغة JPEGs، يبقى المشكل الوحيد هو كبر حجم الملف الناتج في هذه الحالة. يجعل الدعم الكامل للشفافية من صيغة PNGs خيارا جيدا للعديد من الاستعمالات. WebP في حين تتميز صيغ الصور النقطية الثلاث التي تمت مناقشتها سابقا بإمكانية نشرها على معظم المتصفحات الشهيرة نلاحظ غياب أي ابتكار حقيقي في هذا المجال منذ مدة من الزمن. من المحتمل أن يتغير ذلك مع مشروع WebP الخاص بجوجل (Google’s WebP project)، والذي يتمحور حول طرح صيغة صور جديدة والتي تمكن من تخفيض حجم الملف بنسبة تصل إلى %25، رغم أن متصفح Chrome يدعم هذه الصيغة بشكل تلقائي يبقى الدعم على مستوى عالمي أمرا غير متوافر. نصل مما سبق إلى خلاصة مفادها أن الصور المتجهة مثالية للغاية للعديد من الاستعمالات، لكن في سياق الاستعمال اليومي في إنشاء المحتوى ستستعمل مزيجا من صيغ GIFs، PNGs و JPEGs على الأقل في المستقبل القريب. لنتطرق إلى الأسباب التي تجعل من تحسين الصور بهذه الصيغ أمرا غاية في الأهمية. ضرورة التحسينات أدى توافر سرعة إنترنت عالية في العديد من الدول إلى عدم الاهتمام بتحسين الصور في بعض الأوساط. عادة ما يتم طرح هذا النوع من الأسئلة: ما الفرق الذي ستحدثه بضع كيلوبايت إضافية في وقت يستطيع معظم المستخدمين مشاهدة الأحداث الرياضية بشكل مباشر على أجهزتهم المحمولة؟ ألم نتجاوز بعد مرحلة القلق حول هذا النوع من البديهيات التافهة؟ لسوء الحظ فإن الإجابة ستكون بالنفي القاطع، تعتبر السرعة أمرا أساسيا خصوصا في الهواتف المحمولة. حقائق جديدة حول الهواتف المحمولة يتوجه الإنترنت بشكل متواصل نحو هيمنة استخدام الهواتف المحمولة. ينتج عن ذلك أمران أساسيان يجب أن تأخذهما بعين الاعتبار فيما يخص تحسين الصور: لم تعد الصور تعتبر كإضافات تزيين محببة للرؤية تستخدم لملء الفراغ في الأجهزة ذات الشاشات الكبيرة، يجب أن يتم التعامل معها على أن لها دورا محددا تلعبه في ظل الأجهزة ذات شاشات صغيرة جدا. رغم أن سرعات التحميل على الهواتف المحمولة في تصاعد مستمر إلا أنها لا زالت تقبع خلف تلك الخاصة بالحواسيب كما أن استخدامها لا يزال مُكلفًا، لكل بكسل أهمية قصوى. بالنظر إجمالا إلى هذا السياق، لنلق نظرة على ثلاث أسباب تجعل من تحسين الصور ضرورة وليس أمرا إضافيا فقط: يريد المستخدمون صفحات سريعة استنادا إلى أبحاث موقع HTTP Archive، تعد الصور من بين الأسباب الرئيسية في جعل معدل حجم الصفحات يصل إلى 1.25MB شأنها في ذلك شأن استخدام JavaScript بشكل مفرط، ما يعتبر بعيدا كل البعد عن المعدلات الرائجة أيام تحدي الخمس كيلوبت (the 5K Challenge). تؤدي ضخامة حجم الصفحات المتزايدة إلى نتائج سلبية، حيث أن %73 من مستعملي الإنترنت على الهواتف المحمولة اشتكوا من مواجهتهم مشاكل مع المدة الزمنية المستغرقة لتحميل الصفحات على أجهزتهم. في نفس الوقت، يتوقع نصف مستخدمي الويب أن يتم تحميل موقع ما في غضون ثانيتين، إلا أن هذا المعدل عند استعمال جهاز محمول يكون حوالي 7 ثوان، ما يعني بكل بساطة عدم موافاة تطلعات المستخدمين. باختصار، قد يؤدي ملء موقعك بصور غير ضرورية إلى سخط زوارك حتى قبل حصولهم على فرصة للتعرف على المحتوى الذي تقدمه. تؤدي كمية الصور الكبيرة إلى التأثير سلبا على التصنيف على محركات البحث تأكيدا لشكوك العديدين سابقا في سنة 2010، صرحت جوجل بأن السرعة تعتبر عاملا رسميا في تصنيف المواقع. يجب أن يتم تحميل صفحة موقعك في غضون ثانية أو أقل، لا تعتبر 200 كيلوبت التي تضيفها صورة القائمة الرأسية في موقعك إزعاجا وعدم احترام لمستخدمي الهواتف المحمولة فحسب بل قد تؤدي إلى عدم إيجادهم لموقعك على مُحرّكات البحث. تؤثر الصفحات البطيئة على عائداتك المادية قم بتجميع النقطتين السابقتين لتحصل على الوصفة السحرية للعديد من الثغرات لتسرب وضياع مداخيلك. تشير أبحاث Strangeloop إلى أن تأخيرا بسيطا بمقدار ثانية واحدة في تحميل الصفحة قد يؤدي إلى خفض معدل التحويل بنسبة %7. هل ترى أنك في وضعية تسمح لك بالتخلي عن قيمة الأرباح هذه فقط من خلال عدم تحسين منتوجك؟ ترجمة -وبتصرف- للمقال: The Complete Guide to Mastering Image Optimization for WordPress لصاحبه: TOM EWER. حقوق الصورة البارزة: Designed by Freepik.