كيفية إنشاء صورة GIF متحركة وإضافتها إلى HTML

آخر تحديث في 22 نوفمبر 2023 by بيتر وود


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

تحميل صورة GIF متحركة

الجزء 1: كيفية إنشاء رسوم متحركة GIF لإضافتها بتنسيق HTML

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

1. استيراد ملفات MP4 وMKV وWEBM وMPEG والعديد من أنواع ملفات الفيديو الأخرى.

2. قم بتخصيص محتوى الرسوم المتحركة GIF ومعاينتها على الفور.

3. اضبط إعدادات HSL الخاصة برسوم GIF المتحركة للحصول على أفضل تجربة مشاهدة.

4. أضف نصًا إلى الرسوم المتحركة GIF للحصول على شرح مساعد.

فوز تحميل ماك تنزيل

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

اختر صورة إلى GIF

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

WidsMob GIF بلايستشن

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

WidsMob GIF سطوع

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

WidsMob GIF OK

خطوة 5 حدد النص الموجود على رسم GIF المتحرك مباشرةً واسحبه لتعديل موضع النص على رسم GIF المتحرك. بالنسبة للرسوم المتحركة بتنسيق GIF بتنسيق HTML، يمكنك ضبط شريط التمرير الجودة in إعدادات GIF للحصول على صورة GIF متحركة عالية الجودة. بعد التحرير اضغط على تصدير GIF زر لتصدير الرسوم المتحركة GIF وإدراجها في HTML.

WidsMob تصدير GIF فوز تحميل ماك تنزيل

الجزء 2: كيفية إضافة صورة GIF متحركة إلى HTML

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

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

خطوة 2 أضف src إلى img لتحديد مسار تخزين ملف الرسوم المتحركة GIF. المسار النسبي هو عنوان الملف المخزن في نفس الدليل مثل HTML. لا تنس كتابة اسم وتنسيق صورة GIF المتحركة. تسمح لك المسارات المطلقة بإضافة صور GIF متحركة تم تحميلها على موقع الويب.

خطوة 3 في سمة img، يمكنك تعيين سمة alt، والتي يمكن أن توفر وصفًا موجزًا ​​لرسوم GIF المتحركة. عندما يفشل تحميل الرسوم المتحركة GIF، سيتم عرض النص للحصول على المساعدة.

خطوة 4 اعتمادًا على إعدادات العرض الخاصة بالويب، قد تحتاج إلى ضبط العرض والارتفاع. يحتوي HTML على وظيفة السمة هذه.

خطوة 5 احفظ ملف HTML مع إضافة الرسوم المتحركة GIF، ويمكنك فتحه في متصفح الويب حتى تتمكن من معاينة الرسوم المتحركة GIF التي يتم تشغيلها على صفحة الويب. يجب تشغيل ملفات GIF المتحركة تلقائيًا في معظم المتصفحات دون الحاجة إلى تعليمات برمجية إضافية.

الجزء 3. الأسئلة الشائعة حول GIF إلى HTML

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

وفي الختام

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

قد تكون مهتمًا