اذهب إلى المحتوى

البحث في الموقع

المحتوى عن 'image optimization'.

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

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

نوع المحتوى


التصنيفات

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

التصنيفات

  • مقالات برمجة عامة
  • مقالات برمجة متقدمة
  • PHP
    • Laravel
    • ووردبريس
  • جافاسكربت
    • لغة TypeScript
    • Node.js
    • React
    • Vue.js
    • Angular
    • jQuery
    • Cordova
  • HTML
  • CSS
    • Sass
    • إطار عمل Bootstrap
  • SQL
  • لغة C#‎
    • ‎.NET
    • منصة Xamarin
  • لغة C++‎
  • لغة C
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • لغة Rust
  • برمجة أندرويد
  • لغة R
  • الذكاء الاصطناعي
  • صناعة الألعاب
  • سير العمل
    • Git
  • الأنظمة والأنظمة المدمجة

التصنيفات

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

التصنيفات

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

التصنيفات

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

التصنيفات

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

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
    • بريستاشوب
    • أوبن كارت
    • دروبال
  • الترجمة بمساعدة الحاسوب
    • omegaT
    • memoQ
    • Trados
    • Memsource
  • برامج تخطيط موارد المؤسسات ERP
    • تطبيقات أودو odoo
  • أنظمة تشغيل الحواسيب والهواتف
    • ويندوز
    • لينكس
  • مقالات عامة

التصنيفات

  • آخر التحديثات

أسئلة وأجوبة

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

التصنيفات

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

ابحث في

ابحث عن


تاريخ الإنشاء

  • بداية

    نهاية


آخر تحديث

  • بداية

    نهاية


رشح النتائج حسب

تاريخ الانضمام

  • بداية

    نهاية


المجموعة


النبذة الشخصية

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

  1. تطرّقنا في المقال السّابق إلى أهميّة تحسين الصّور على موقعك، بل والحاجة إلى القيام بذلك. قبل أن نتطرق إلى الخيارات المتوافرة لتجهيز الصور للنشر على الإنترنت، لنتحدث قليلا عن بعض الخطوات التحضيرية البسيطة ذات الأثر الكبير والقادرة على إضافة قيمة فيما يخص التحسينات اللاحقة. تغيير حجم الصورة مسبقا عرفت الكاميرات الرقمية العصرية تقدما كبيرا إلى حد المبالغة في ما يخص بعض الأمور، حيث أن الصور الملتقطة باستعمال هاتف 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.
  2. يعتبر تحسين الصور (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.
×
×
  • أضف...