استبدال صور GIF المتحركة بمقاطع فيديو | تسريع مدونة بلوجر

استبدال صور GIF المتحركة بمقاطع فيديو لسرعة تحميل صفحات بلوجر ،طريقة تحويل الصور المتحركه الى ملفات فيديو وتركيبها فى مدونات بلوجر ،او بمعنى آخر كيف اقلل من حجم الصور المتحركه داخل الصفحات فى بلوجر مع الحفاظ على جودتها

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

هل استبدال الصوره المتحركه بمقطع فيديو لنفس الماده افضل فى سرعة تحميل الصفحه؟

بالطبع نعم وكما ذكرنا سابقا ملفات الفيديو لنفس الصوره اقل حجما من الصورة نفسها وبالتالى سرعة تحميلها وفتحها أسرع مما لايؤثر على سرعة موقعك واستهلاك ترافيك عالى خصوصا لمن يملكون استضافات مدوناتهم خارج منصة جوجل.
انا هنا سأعطى مثالين للتوضيح وكيف ان الصوره المتحركه حجمها اكبر من حجمها لو كانت مقطع فيديو
هذه صوره قمت بتحميلها من موقع GIPHY والخاص بعرض الصور المتحركه وانشائها ….لاحظ حجم الصورة

لاحظ حجم الصورة = 480 ك.ب
وشاهد نفس الصورة المتحركه ولكن عندما تم تحويلها لمقطع فيديو بصيغة MP4

لاحظ حجم الملف بالصوره = 119ك.ب
ستلاحظ ان التحويل من الصيغه .gif الى .MP4 يؤدى الى تقليل الحجم بمراحل وهذا ماذكرناه سابقا وفائدته بالنسبه لسرعة التصفح بموقعك للصفحه التى بها مقال يعرض هذا النوع من الصور بمايتطلبه دعم المحتوى وتوضيحه؟
هذه الطريقه تستخدمها المواقع الكبيره مثل Twitter على سبيل المثال وذلك لتقليل موارد استهلاك الباندويث للموقع .

استبدال صور GIF المتحركة بمقاطع فيديو ،كيف يمكننى التحويل من GIF إلى MP4 ؟

بالطبع يوجد كثير من المواقع الرائعه والتى تستطيع الحصول منها على رابط MP4 الخاصه بالصوره المتحركه ونشرها عبر مدونتك عبر اكواد html والتى سنشرحها لاحقا وهذه المواقع هى :-
GIPHY
EZGif
محوّل الملفات — Convertio
طريقة التركيب داخل المقالة لمدونات بلوجر :-
اولا: افتح قالب مدونتك وابحث عن الكود التالى ]]></b:skin> وفوقه مباشرة ضع كود CSS التالى

.animgif {
  width: auto;
  max-width: 100%;
  height: auto;
}

فإذا كنت تستخدم موقع GIPHY كمصدر للصور او رفعت الصور عليه بصيغة gif فإستخدم الكود التالى :-

<video class="animgif" width="480" height="240" poster="https://4.bp.blogspot.com/-trPJlYj5vRM/XMAYLlaLFBI/AAAAAAABKHU/cG4Ti_gIp6oaakmXLrpZt4ctgPoCpasIwCLcBGAs/s1600/hi_000.jpg" autoplay="" loop="" muted="" playsinline="">
  <source src="https://media.giphy.com/media/3gII9yTsrkMMqaAkAi/giphy.mp4" type="video/mp4" />
</video>

والنتيجه ستكون هكذا

وهذه نتيجة أخرى من موقع محوّل الملفات — Convertio

هنا السؤال كيف تم ذلك ؟
– الصوره المتحركه افتحها بأى برنامج لفتح الصور لديك ثم خذ لقطه للصوره بنفس المقاس الذى تظهر به ببرنامج snagit مثلا واحفظ الصوره بجهازك بصيغة jpg.
– قم برفع الصوره على مدونتك او أى موقع لرفع الصور وانسخ رابط الصوره واحفظه وضعه مكان الرابط باللون الأصفر بالكود.
– اذا كنت استخدمت موقع giphy فى رفع الصوره عليه سيظهر لك بعد رفع الصوره خيارات ،اختر منها كما هو موضح بالصوره التاليه على الترتيب فى خانة Media

– ثم ضع الرابط الذى نسخته فى الكود والملون باللون الاخضر.
– بعد ذلك انسخ الكود كاملا وضعه فى المكان الذى تريده بصفحة المقاله بعد تحويل الصفحه الى وضعية HTML.
والنتيجه ستكون كمارأيت بالأعلى .

يمكنك الإطلاع أيضا على : شرح وضع فيديو من الفيس بوك على مدونات بلوجر 2020
اتمنى أن أكون وفقت فى الشرح
مع وافر تحياتى لك