الفرق بين SVG – PNG – JPG – GIF

الصور التي نوعها PNG

في البداية كلمة PNG هي إختصار لجملة Portable Network Graphic.

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

بشكل عام, صور المستخدمين, المنتجات المعروضة, شعارات المواقع و غيرها من الصور التي نعرضها في المواقع يكون نوعها على الأغلب PNG.

ميزة أخرى مهمة جداً يوفرها النوع PNG هي إمكانية جعل خلفية الصورة شفافة (Transparent).

النوع PNG يوجد منه نوعين أيضاً:

• PNG-8 و يقصد به أن كل بيكسل في الصورة يتألف من 8bit.
• PNG-24 و يقصد به أن كل بيكسل في الصورة يتألف من 24bit.

الذي عليك معرفته من هذا الأمر أنه, كلما كان عدد الـ bit للبيكسل أكبر كلما كانت الصورة قادرة على عرض درجات ألوان أكثر. و لكن كلما كان عدد الـ bit للبكسل أكبر كلما كان حجم الصورة أكبر.

فمثلاً إن كان حجم الصورة التي نوعها PNG-8 هو 4KB فحجم نفس الصورة إذا كان نوعها PNG-24 سيكون تقريباً 6KB.

كمثال عملي, شعار موقعنا نوعه PNG و لاحظ أن لون خلفيته شفاف.

الصور التي نوعها JPG

في البداية النوع JPG هو نفسه JPEG و كلاهما إختصار لجملة Joint Photographic Experts Group.

هذا النوع من الصور يستخدم في العادة في التصوير الفوتوجرافي و تصوير الأوراق أيضاً لأن هذا النوع لا يهمه فقدان جودة الصورة عند تكبيرها أو تصغيرها بل يهمه حفظها بنفس الجودة التي تم فيها حفظ الصورة في الأساس.

مما يتميز به هذا النوع هو إمكانية حفظ معلومات أخرى في الصورة مثل متى تم إلتقاطها بالتحديد و الموقع الذي تم فيه إلتقاط الصورة. لهذا نجد أن الصور التي تلتقطها بواسطة الكاميرا العادية أو كاميرا الهاتف غالباً ما يتم حفظها بصيغة JPG.

بالنسبة لحجم التخزين الذي يحتاجه كل بيكسل في الصورة فهو التالي:

• إذا كانت الصورة ملونة فهذا يعني أنها تستخدم مزيج من ألوان RGB و هنا سيتم تخصيص 24bit لكل بيكسل في الصورة.
• إذا كانت الصورة رمادية الألوان (Grayscale) أو كما نقول تتألف فقط من اللونين الأبيض و الأسود, فهنا يتم تخصيص 8bit فقط لكل بيكسل في الصورة.

الصور التي نوعها GIF

في البداية كلمة GIF هي إختصار لجملة Graphics Interchange Format.

هذا النوع مخصص للصور المتحركة التي تجدها تتحرك بشكل تلقائي عندما تشاهدها.

كل بيكسل في الصورة يتم تخزينه في 8bit فقط مما يعني أنه لا يمكنه تخزين درجات عالية من الألوان.

و الجميل في هذا النوع أيضاً, أنه في حال كان حجم الشاشة أصغر من حجم الصورة الفعلي, فيمكن تقليص حجم الصورة و عرضها بنفس الجودة التي تم حفظها فيها.

هل الصورة المتحركة هي صورة واحدة أم مجموعة صور؟

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

كمثال عملي, هذه صورة متحركة من دورة JavaFX حيث أننا كنا نضع صور متحركة في كل مثال في الدورة مما يجعل الشرح في غاية الوضوح.

ملاحظة: هذه الصورة بالأساس كانت عبارة عن فيديو مدته ثانية واحدة و لكنا قمنا بحفظها بصيغة GIF حتى تظهر كصورة متحركة. و هذه الصورة عبارة عن 15 صورة على الأقل يتم عرضها بشكل متوالي.

الصور التي نوعها SVG

في البداية كلمة SVG هي إختصار لجملة Scalable Vector Graphic.

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

مهما كان الشكل الذي يخطر في بالك معقداً مثل صورة عادية, نص فيه تأثير جميل, صورة عادية و لكن تريد عرض جزء منها إلخ.. تأكد أنه يمكن رسم فعل ذلك بواسطة أسلوب SVG.

هذا النوع يمكن إستخدامه بشكل خاص, في رسم جداول إحصائية تفاعلية, شخصيات كرتونية, أيقونات, شعار الموقع و أي شكل تريده.

كمثال عملي, الجداول الإحصائية التي يتم عرضها في المواقع و التطبيقات يتم رسمها كصور SVG بالأساس لأن الجداول قيمها ليست ثابتة. و فعلياً عندما نرى قيم الجدول تغيرت, فهذا يعني أنه تم تحديث كود الصورة.

مميزات النوع SVG

• لا يوجد أي حدود لما يمكن رسمه بواسطته.
• يمكنك جعل الصورة أو الأيقونة أو الشكل الذي ترسمه تفاعلياً.
• لن تقلق بتاتاً من حجم الصورة التي يمكنك رسمها في الصفحة لأنها مهما كانت كبيرة فالكود الخاص بها صغير جداً مقارنة بصورة عادية كانت ستعطيك نفس الشكل الذي تم رسمه.
• حجم شاشة المستخدم سواء كانت كبيرة أو صغيرة لن يشكل أي مشكلة على دقة الصورة لأن كل نقطة في الصورة يتم تمثيلها بـ Vector و ليس ببكسل واحد كباقي الأنواع.
• يمكن تعديل تصميمه بواسطة CSS مثل أي عنصر HTML موجود في صفحة الويب.
• يمكن التعامل معه بواسطة Javascript مثل أي عنصر HTML موجود في صفحة الويب

كيف أرسم صور نوعها SVG؟

الصور التي نوعها SVG في العادة لا يقوم الشخص بكتابة الكود الخاص بها بنفسه, بل يستخدم أحد البرامج التي يمكنه رسم الشكل من خلالها ثم إصدار نسخة من هذا الشكل نوعها SVG.

بعض البرامج المشهورة في الرسم و التي يمكنك تصدير الرسومات منها كملف نوعه SVG:

• Inkscape
• Sketch
• Adobe Illustrator