بسم الله الرحمن الرحيم

وبه نستعين

التصميم الجرافيكي / أهم تنسيقات الويب (GIF - JPEG - PNG - HTML)

The Most Important Web Formats (GIF - JPEG - PNG - HTML)

 

تحسين رسومات/ جرافيك الويب

Optimizing Web Graphics

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

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

لتطوير ممارسات عمل أكثر كفاءة، يجب مراعاة أن كل شيء يحدث على الشاشة. فالدقة العالية اللازمة لطباعة بجودة المجلات ستكون عديمة الفائدة هنا، حيث سيتم عرض كل شيء بدقة 96 بكسل (96ppi) لكل بوصة على الشاشة. حتى في هذه الحالة، يجب التضحية بكمية إضافية من معلومات الصورة لإنشاء أحجام ملفات صغيرة بما يكفي لعرضها على الويب. وبالتالي ستؤدي أساليب ضغط البيانات المكثفة إلى مزيد من الضرر بجودة الصورة، ولكن هذا أمرٌ يجب على مصممي الويب تقبّله.

عادةً ما يتم إنتاج الصور الجاهزة للنشر على الويب باستخدام برنامج Photoshop (باستخدام ImageReady)، أو Fireworks، أو تطبيقات تحرير الصور منخفضة التكلفة نسبيًا مثل Paint Shop Pro (لنظام Windows فقط). توفر جميعها شكلاً من أشكال المعاينة للمساعدة في إيجاد التوازن الأمثل بين الضغط العالي مع جودة منخفضة والضغط المنخفض مع حجم ملف كبير.

تنسيقات ملفات الصور

Image File Formats

كان تنسيق GIF (تنسيق تبادل الرسومات Graphic Interchange Format) أول تنسيق ملف تدعمه متصفحات الويب. ولا يزال تنسيق الرسومات الأكثر استخدامًا على الويب اليوم، ويعود ذلك جزئيًا إلى استخدامه لعرض عدد كبير من العناصر الرسومية الجرافيكية اليومية مثل القواعد والأزرار وألوان الخلفية.

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

أما صور وملفات JPEG وهي اختصار لمصطلح (مجموعة خبراء التصوير المشترك Joint Photographic Experts Group)، فإنها تحتوي على معلومات ألوان 24 بت (24-bit)، مما يسمح بتخزين ما يصل إلى 16.7 مليون لون. تستخدم هذه الملفات أسلوب ضغط "فقدان lossy"، حيث يتم تجاهل بعض معلومات الصورة بدلاً من تخزينها ببساطة بكفاءة أكبر.

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

أما تنسيق PNG وهو اختصار (لرسومات الشبكة المحمولة Portable Network Graphics)، فإنه يسمح بضغط بدون فقدان مع فهرسة 8 بت وألوان حقيقية 24 بت، ولكن هذا التنسيق لم يتم اعتماده على نطاق واسع أبدًا.

الشفرة السرية HTML

HTML - The Secret Code HTML

المقصود بالشيفرة هي إطار عمل الإنترنت الذي تعتمد عليه الواجهة المرئية. والتي توجد خلف كل صفحة ويب، وتُعطي تعليمات للمتصفح حول مكان وضع الصور، وعرض النصوص، وإدارة الوسائط المتنوعة. إنها اللبنة الأساسية التي بُني عليها تطوير الويب. ولا تزال وظيفتها الرئيسية، وهي "الروابط التشعبية hyperlinking" – والتي تسمح لنا بالقدرة على التنقل بين الصفحات والعناوين على الإنترنت وذلك من خلال النقر على كلمة أو صورة – وهي إحدى أقوى الأدوات على الويب اليوم.

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

وسوم HTML

HTML Tags

يتكون عنصر HTML من وسم بداية start tag، ومحتوى content، ووسم نهاية end tag. على سبيل المثال، تبدأ الفقرة بـ <p> (وسم البداية)، وتحتوي على محتوى (أيًا كان نص الفقرة)، وتنتهي بـ </p> (وسم النهاية). لاحظ الشرطة المائلة التي تميز وسم النهاية. يجب أن يكون محتوى HTML دائمًا داخل عنصر <html></html>، بينما يجب أن يكون أي شيء ترغب في عرضه في المتصفح كنص، بدلًا من تفسيره كتعليمات HTML، داخل عنصر <body></body>.

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

معرفة HTML

HTML Knowledge

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

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

لغة HTML هي لغة في تطور مستمر. تُصدر معايير جديدة بانتظام لمعالجة مختلف القضايا التي تثيرها مجموعات الصناعة والتكنولوجيا. يمكن إضافة عناصر من اللغة أو وضع عليها علامة "مُهمَلة deprecated". ويعني هذا النوع الأخير أنه مُستحق الإزالة من المواصفات، ولذلك يجب تجنبه. على سبيل المثال، معظم لغات HTML الموجهة للعرض التقديمي قد تم إيقافها، ويُنصح الآن باستخدام CSS (أوراق الأنماط المتتالية cascading style sheets) بدلاً منها، وما جاء بعدها من لغات برمجية متطورة.

أمثلة عن تنسيقات ملفات الصور وشفرة HTML

Example of Image File Formats & HTML

مثال (1)

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

مثال (2)

يتيح لك برنامج Adobe Photoshop عرض عدة حالات ضغط تدريجي لصورة واحدة قبل تحديد الإعدادات المستخدمة للتصدير. بالإضافة إلى حجم الملف الناتج، يُقدّر وقت التنزيل المحتمل على اتصال مودم modem بسرعة معينة. يمكن تخصيص التفاصيل الدقيقة المعروضة في خيارات لوحة الألوان.

مثال (3)

يُعد تنسيق GIF تنسيقًا ممتازًا للنصوص النقطية bitmapped text، لأنه يسمح بتقليل حجم الملف عن طريق الحد من إجمالي عدد الألوان المستخدمة، وفي معظم الحالات، ستكون هناك حاجة إلى عدد قليل جدًا من الألوان. في هذا المثال، تم تحويل نص أسود على خلفية بيضاء باستخدام لوحة ألوان من ثماني درجات رمادية، تشمل الأسود الكامل للأحرف والأبيض النقي للخلفية، بالإضافة إلى درجات متوسطة كافية لتنعيم الحواف edge ​​smoothing. وبعدها تم تصغير الصورة من 100 كيلو بايت إلى 2.5 كيلو بايت.

مثال (4)

إن القدرة على معاينة صفحة HTML وفك تشفيرها مهارة مفيدة للغاية. لم يعد "الترميز اليدوي Hand coding" مهارة أساسية للمصمم الذي يستخدم برنامج تصميم صفحات WYSIWYG، ولكن عند إنشاء الشفرة البرمجية بواسطة تطبيقات مثل Dreamweaver، قد تحتوي أحيانًا على ثغرات مثل العلامات tags غير المستخدمة التي قد تُعطل الصفحة. إن فهم العلامات tags والقدرة على تحريرها سيوفر الوقت والجهد ويُمكّن من الحصول على نتائج احترافية. 

 

أرجو أن تنال التدوينة إعجابكم وإلى لقاء قريب بإذن الله

 

المراجع والمصادر

الدليل الكامل للتصميم الجرافيكي الرقمي.

The Complete Guide to Digital Graphic Design

 

لمزيد من التواصل تابعونا على وسائل التواصل الاجتماعي

حساب "مدونة ألوان" على فيسبوك.

حساب "مدونة ألوان" على انستجرام.

حساب "مدونة ألوان" على تويتر.