يتضمن موقع الويب الخاص بك الكثير من الصور، بما في ذلك صور المنتجات والمجموعات والأيقونات، تمامًا مثل المواقع الأخرى، ومعظمها بتنسيقات صور PNG أو JPEG. ولكنك وجدت أنه كلما تم تحميل المزيد من الصور PNG أو JPEG، كلما كان تحميل موقع الويب الخاص بك أبطأ. إذا كان الأمر كذلك، فقد حان الوقت للتفكير في تحسين الصورة لبعض أنواع الصور مثل الرموز بتنسيق SVG.
بالمقارنة مع PNG وJPEG، تتمتع ملفات SVG بمزايا زيادة سرعة التحميل مع الحفاظ على الدقة العالية للصور. دعنا نتعرف على أفضل الأشياء المتعلقة بملفات SVG ولماذا يجب عليك استخدامها لزيادة أداء موقع الويب الخاص بك من خلال هذه المقالة.
على هذه الصفحة
ما هو ملف SVG
على عكس ملفات الصور الشائعة الأخرى مثل PNG أو JPEG، فإن SVG (Scalable Vector Graphics) هو تنسيق صور قائم على المتجهات ويمكن تصغيره أو تكبيره دون فقدان الجودة. لفهم ملفات SVG، ربما سنقارن خصائصها بالتنسيق المستخدم على نطاق واسع PNG.
| SVG | بي إن جي | |
|---|---|---|
| نوع الملف | على أساس المتجهات | المستندة إلى النقطية (أو المستندة إلى البكسل) |
| حجم الملف | أصغر بكثير من PNG | كبيرة وبدقة عالية |
| كيف تعمل | استخدم لغة برمجة XML للتواصل مع متصفح الويب أو التطبيقات لعرض الصورة | قم بإجراء عملية التصفية والتشفير والضغط بدون فقدان لعرض الصورة المضغوطة بشكل مماثل للصورة المصدر |
| أفضل استخدام ل | تصميم الموقع، الشعار، أيقونة | الصور والتحرير والشعار |
لماذا تحتاج إلى استخدام ملفات SVG
يتمتع تنسيق SVG بالعديد من المزايا الرائعة التي تجعله الخيار الأفضل لتصميم مواقع الويب والتطبيقات.
قابلية التوسع غير المحدودة
نظرًا لاستخدام المتجهات، تكون صور SVG مستقلة عن الدقة وقابلة للتطوير في أي بُعد دون أن تتأثر بالجودة. واستنادًا إلى الخوارزمية الرياضية لإنشاء الصورة، سيقوم متصفح الويب بقراءتها وعرضها على الشاشة. مجرد رمز صغير ويمكن أن يتكيف مع العديد من المشاهدين مثل نوافذ العرض والأجهزة والتصميمات سريعة الاستجابة وما إلى ذلك، تنسيق SVG يسهل ظهور صورك معروضة بالكامل على الشاشة دون فقدان الجودة.
تجعل هذه الميزة SVG أفضل من أنواع الملفات المستندة إلى البيانات النقطية مثل PNG أو JPEG. أما بالنسبة للصور النقطية، يتم تخزين معلومات الصورة في شبكة من وحدات البكسل. لذلك، عندما نقوم بتكبير الصورة، يجب أن يتوسع كل بكسل إلى ما هو أبعد من حجمه الأصلي ويؤدي ذلك إلى انخفاض الجودة.
التخصيص السهل
تمنح ملفات SVG قدرًا كبيرًا من التحكم لمصممي الويب لإجراء تعديلات مثل الأشكال المتجهة والنصوص والألوان باستخدام بعض برامج التصميم الشائعة مثل Adobe Illustrator أو CorelDraw وما إلى ذلك. ويتم تحرير ملف الصورة في دقائق معدودة فقط.
حجم صغير
كما ذكرنا سابقًا، يعد ملف SVG أخف بكثير من الصورة النقطية، وأكثر من ذلك، لا يتعين عليك المفاضلة بين الحجم الصغير وجودة الصورة. كلما كانت الصور أصغر، كلما كان تحميل موقع الويب الخاص بك أسرع. لذلك، يمكن لملفات SVG تحسين سرعة تحميل موقع الويب الخاص بك بشكل عام.
صديقة لكبار المسئولين الاقتصاديين
نظرًا لأن تنسيق SVG يتم تعريفه بناءً على النص، فيمكن لمحرك البحث قراءة الصور والزحف إليها وفهرستها بسرعة وسهولة أكبر. لذلك، يمكنك تحسين ترتيب صفحتك وتحسين محرك البحث. تتفوق ملفات SVG على ملفات PNG أو JPEG في هذا الصدد لأن محركات البحث تتعرف فقط على الصور النقطية وفقًا لبياناتها الوصفية مثل العنوان أو الكلمات الرئيسية أو علامة ALT.
الآن، يرغب معظم موفري موضوعات مواقع الويب في تحديد أولويات عوامل مثل التحميل السريع والصور عالية الدقة والتصنيف العالي على محركات البحث. على وجه الخصوص، ستقوم بعض سمات Shopify مثل Be Yours، بتعيين بعض الأقسام أو الكتل التي يتم قبول ملفات SVG فقط فيها. لذا يوصى باختيار ملفات SVG بدلاً من ملفات PNG أو JPEG في هذه الحالة.
استخدام SVG في موضوع Be Yours
يمكن إنشاء ملف SVG بنفسك باستخدام بعض تطبيقات تصميم الرسوم الشائعة مثل Adobe Photoshop أو Adobe Illustrator وفقًا للتعليمات الواردة في هذه المقالة .
إذا كان إنشاء ملفات SVG بنفسك أمرًا معقدًا نوعًا ما، فلدينا موفر أيقونات SVG، Remixicon.com ، لجعل حياتك أسهل. يحتوي موقع Remixicon.com على مكتبة ضخمة من أيقونات SVG لاختياراتك ويمكنك بسهولة الحصول على أي رمز كما تريد بنقرتين فقط:
- على Remixicon.com، اكتب كلمة أساسية للبحث عن الرمز الذي تريده.
- انقر على الأيقونة من القائمة واختر زر نسخ SVG .
قم بالوصول إلى القسم/الجزء الخاص بموضوعك حيث تريد إضافة أيقونة SVG ولصق رمز صورة SVG في الحقل المحتوي ذي الصلة.
على سبيل المثال، في سمة Be Yours، لديك قسم الضمان الذي يسمح لك بإضافة SVG مخصص في الحقل أيقونة SVG المخصصة .
- انقر فوق "حفظ" لتأكيد التغيير.
شكرا لوقت القراءة الخاص بك. نأمل أن تجد هذه المقالة مفيدة. تابعنا اليوم على Facebook و Twitter ومدونة الموقع الإلكتروني للحصول على آخر التحديثات!
