تنسيقات الصور: GIF

على الرغم من أنّ تنسيق GIF (تنسيق تبادل الرسومات) ليس مفيدًا للغاية على الويب الحديث، إلا أنّه يوفّر مقدمة قوية للمفاهيم الأساسية لترميز الصور.

يمكن اعتبار ملف GIF بمثابة برنامج تضمين لبيانات الصورة. وهو يحتوي على إطار عرض، من أنواعه، يسمى "الشاشة المنطقية"، يتم رسم إطارات فردية لبيانات الصور عليها - يشبه إلى حد ما الطبقات في مستند Photoshop. هذه هي الطريقة التي يدعم بها ملف GIF الرسوم المتحركة التي تشبه دفتر الصور المتحركة: يتم رسم إطار واحد على الشاشة المنطقية، ثم استبداله بآخر ثم إطار آخر. بالطبع، هذا التمييز ليس مهمًا عندما نتعامل مع ملف GIF ثابت، يتكون من إطار واحد مرسوم على الشاشة المنطقية.

يستخدم ملف GIF طريقة لضغط البيانات بدون فقدان جودة، وهي إحدى صيغ خوارزمية Lempel–Ziv-Welch، إذا كنت شغوفًا بذلك. لا بد من توضيح التفاصيل الأكثر دقة حول كيفية عمل هذه الخوارزمية أكثر من اللازم، ولكن على مستوى عالٍ، فهي تعمل إلى حد ما مثل "Uglating JavaScript"، حيث يتم حفظ السلاسل المتكررة من الحروف في جميع أنحاء الملف في نوع من القاموس الداخلي، بحيث يمكن الإشارة إليها بدلاً من تكرارها في كل مرة تظهر فيها.

عرض مرئي لمرجع ملف GIF باستخدام شبكة من أربعة في أربعة.

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

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

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

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

مثال على ملف GIF ثابت

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

ثلاثة مربعات زرقاء أفقية متبوعة بمربع أحمر واحد

في هذه المرة، أضف مزيدًا من التفاصيل إلى تلك الصورة الأصلية: بضع وحدات بكسل أخرى، أحدها ظل أزرق أغمق قليلاً:

مربعات أفقية من الأزرق إلى الأحمر في تصميم مكوّن من أربعة أجزاء، مع مربع أزرق مظلل بلون أغمق من الآخر.

غياب أي ضغط - إذا جاز التعبير - يمكنك وصف هذه الشبكة على النحو التالي:

الصف الأول، العمود الأول هو #0000FF. الصف الأول، العمود الثاني هو #0000FF. الصف الأول، العمود الثالث هو #0000FF. الصف الأول، العمود الرابع هو #FF0000. الصف الثاني، العمود الأول هو #0000FF. الصف الثاني، العمود الثاني هو #000085. الصف الثاني، العمود الثالث هو #0000FF. الصف الثاني، العمود الرابع هو #FF0000.

من خلال استخدام طريقة مشابهة لضغط البيانات وفهرسة الألوان بدون فقدان بيانات GIF، يمكنك وصفها على النحو التالي:

أ: #0000FF، ب: #FF0000، ج: #000085. الصف الأول، الأعمدة من واحد إلى ثلاثة هي A. الصف الأول، العمود الرابع هو B. الصف الثاني، العمود الأول هو A. الصف الثاني، العمود الثاني هو C. الصف الثاني، العمود الثالث هو A. الصف الثاني، العمود الرابع هو B.

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

مربّعات أفقية من الأزرق إلى الأحمر، مع بكسل واحد داكن بحجم 2×2.

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

أ: #0000FF، ب: #FF0000. الصف الأول، الأعمدة من واحد إلى ثلاثة هي A. الصف الأول، العمود الرابع هو B. الصف الثاني، الأعمدة من واحد إلى ثلاثة هي A. الصف الثاني، العمود الرابع هو B.

النتيجة النهائية المؤسفة لوحدات البايت المحفوظة هذه هي فقدانك للبكسل المثالي.

مربعات أفقية بشكل موحّد باللونين الأزرق إلى الأحمر

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

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

عند ترميزها كملف GIF، تصبح التدرجات الدقيقة مثل الظلال مرقّطة، مع إبراز وحدات البكسل الفردية عن محيطها:

أزهار وردية على خلفية خضراء.

من الناحية العملية، عند الجمع بين الضغط بدون فقدان البيانات وتحديد كمية الألوان، لن يكون ملف GIF مفيدًا للغاية في مجال تطوير الويب الحديث. لا يكفي الضغط بدون فقدان البيانات لتقليل حجم الملفات، وتعني اللوحة المصغَّرة انخفاضًا واضحًا في الجودة.

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