متى تستخدم تنسيقات JPG و GIF و PNG و SVG لصور الويب الخاصة بك

هناك عدد من تنسيقات الصور التي يمكن استخدامها على صفحات الويب. بعض الأمثلة الشائعة هي GIF و JPG و PNG . يتم أيضًا استخدام ملفات SVG على مواقع الويب حاليًا ، مما يمنح مصممي الويب خيارًا آخر للصور عبر الإنترنت.

صور GIF

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

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

باختصار ، يمكنك استخدام ملفات GIF فقط للصور البسيطة التي تحتوي على عدد قليل من الألوان ، ولكن يمكنك أيضًا استخدام PNGs لذلك أيضًا (مزيد من ذلك في وقت قصير).

صور JPG

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

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

تستخدم أفضل صور JPG للصور والصور التي تحتوي على الكثير والكثير من الألوان الطبيعية.

صور PNG

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

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

نحن نستخدم PNG لأي ملف يتطلب شفافية. كما نستخدم PNG-8 لأي ملف يمكن استخدامه كملف GIF ، وذلك باستخدام تنسيق PNG هذا بدلاً من ذلك.

صور SVG

SVG لتقف على Scalable Vector Graphic. بخلاف التنسيقات التي تستند إلى البيانات النقطية الموجودة في JPG و GIF و PNG ، تستخدم هذه الملفات المتجهات لإنشاء ملفات صغيرة جدًا يمكن عرضها بأي حجم دون فقدان جودة زيادة حجم الملف. يتم إنشاؤها للحصول على الرسوم التوضيحية مثل الرموز وحتى الشعارات.

تحضير الصور لتسليم الويب

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

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

المقالة الأصلية لجنيفر كرينين. حرره جيريمي جيرار.