خمسة عناصر لمعالجة الصور المثالية في تصميم الويب
الكاتب：Eve Cole
وقت التحديث：2009-06-20 16:51:39
1. التنسيق: يُفضل تنسيق PNG للصور ذات النماذج البسيطة التي يتم إنشاؤها بواسطة أجهزة الكمبيوتر (مثل الشعارات والأيقونات)، بينما يجب أن تكون الصور ذات الألوان الغنية بتنسيق JPEG. إذا كان هناك عدد قليل من الألوان ولا يوجد تدرجات، فيجب استخدام تنسيق GIF.
GIF هو تنسيق صور الويب الأكثر استخدامًا. يحمل ملف GIF ما يصل إلى 256 لونًا ويعمل مع جميع الصور تقريبًا باستثناء الصور. كما أن لديها القدرة على إنشاء رسوم متحركة بسيطة وصور شفافة.
يعد تنسيق PNG جديدًا نسبيًا وهو أيضًا تنسيق موصى به بواسطة W3C. يمكن أن يحتوي PNG-8 على ما يصل إلى 256 لونًا، مقارنة بـ GIF؛ ويدعم PNG-24 وضع RGB، والذي يمكنه التعبير عن أي لون بجودة أعلى؛ ويضيف PNG-32 قناة ألفا تعتمد على PNG-24، والتي يمكن تعيينها شفافة.
يمكن لـ JPEG حفظ حوالي 16.7 مليون لون وغالبًا ما يُستخدم لحفظ الصور. ولكن بخلاف ذلك، لا يتم استخدام JPEG أبدًا. إذا كانت الصورة تحتوي على أقل من 256 لونًا، أو تحتوي على مساحات كبيرة من الألوان الصلبة، فلن يعمل JPEG بشكل جيد - قد يتم مضاعفة حجم الملف للحصول على صورة عالية الجودة.
عند اختيار تنسيق صورة، يجب عليك التفكير بشكل شامل في نطاق استخدامها، مثل اللون والشفافية والرسوم المتحركة وما إلى ذلك، كما هو مفصل أدناه. يمكن مقارنة المعلمات المختلفة من خلال معالج التصدير الخاص بـ Photoshop أو Fireworks. معيار الاختيار هو أن يكون حجم الملف صغيرًا قدر الإمكان مع الحفاظ على جودة الصورة المقبولة.
2. يجب أن تستخدم الصور التي يتم إنشاؤها بالألوان وضع RGB، وليس وضع CMYK للطباعة. لا تقلق بشأن الألوان الآمنة للمتصفح، نظرًا لأنه لم يعد أحد تقريبًا يستخدم شاشات 8 بت. يجب أن يشير اختيار اللون إلى معايير موحدة، مثل أنظمة الهوية المرئية (VI). يعد عدد الألوان وتأثيرها من العوامل المهمة في تحديد تنسيق الصورة، على سبيل المثال، غالبًا ما تنتج التدرجات اللونية عددًا كبيرًا من الألوان يجب أن تفكر في استخدام تنسيق PNG-24 أو PNG-32 أو JPEG.
3. الحجم: غالبًا ما تكون الصور المنتجة باستخدام أدوات إنشاء المتجهات مناسبة للحفظ بتنسيق PNG، ويجب تحديد حجمها في أداة الرسم المتجه بمجرد تحويلها إلى صورة نقطية، لا يمكن تغيير حجمها بسهولة (خاصة لا ينبغي تكبيرها). ). تجدر الإشارة إلى أن ملفات PNG التي تم إنشاؤها في Fireworks تحتوي على معلومات قابلة للتحرير مثل الطبقات، والخطوط والأشكال والنص الموجودة بها كلها رسومات متجهة. يجب أن يؤدي تطبيق مثل هذه الصورة على صفحة ويب أولاً إلى إجراء عملية إخراج لضغط حجم الملف، وسيتم أيضًا تحويل صورة PNG الناتجة إلى صورة نقطية بسبب فقدان المعلومات القابلة للتحرير. لذلك، يجب إكمال تعديل حجم الصورة قبل عملية الإخراج. لا يتم تغيير حجم الصورة النقطية للتأكد من أن الخطوط العريضة والتدرجات اللونية للصورة واضحة بدرجة كافية.
بالنسبة للصور النقطية والصور الموجودة، يجب عليك استخدام Photoshop والبرامج الأخرى لضبط الحجم قبل إدراجها في صفحة الويب بدلاً من استخدام سمات العرض والارتفاع في لغة HTML لتغيير حجم الصورة. قد يؤدي استخدام لغة HTML مباشرةً للتحكم في حجم الصورة إلى تشويه الصورة بشكل خطير.
بشكل عام، يجب التحكم في الصور الموضوعة على صفحات الويب بحجم صغير نسبيًا. إذا تم مزجه مع النص، فيجب أن يكون العرض حوالي 300 بكسل. حتى لو ظهر بمفرده، يجب أن يكون العرض أقل من 600 بكسل. أما بالنسبة للارتفاع فمن المناسب ألا يتجاوز شاشة واحدة.
4. يدعم كل من GIF وPNG الشفافية، ولكن بطرق مختلفة. يقوم GIF ببساطة بتعيين لون واحد أو عدة ألوان لتكون شفافة تمامًا، دون مراعاة شفافية الألوان المتدرجة المجاورة. وهذا يعني أنه إذا تغير لون الخلفية بشكل كبير (أو يحتوي على عدة ألوان متباينة)، فلن يكون الانتقال إلى الجزء الشفاف سلسًا وسيكون هناك خط فاصل واضح. إذا كنت تريد إنشاء صورة GIF شفافة، فمن الضروري تعيين لون خلفية اللوحة القماشية ليكون هو نفسه (أو قريبًا من) لون خلفية التأثير المستهدف. ليس لدى PNG هذه المشكلة ويمكن أيضًا ضبطها لتكون شفافة.
ومع ذلك، لا يمكن لـ IE6 عرض صور PNG الشفافة بشكل صحيح بشكل افتراضي، ويجب اتخاذ الإجراءات المناسبة.
5. عادةً ما تشتمل الرسوم المتحركة على صفحات الويب المتحركة على Flash وGIF المتحركة. يتمتع الفلاش بوظائف قوية وتأثيرات غنية وجودة صورة عالية وبرامج إنشاء قوية وهو الشكل المفضل للرسوم المتحركة على الويب في معظم الحالات. عيب GIF المتحرك هو أنه لا يمكنه استخدام أكثر من 256 لونًا فقط، ومن الصعب إنشاء رسوم متحركة ذات تأثيرات معقدة، ومع ذلك، فإن ميزته هي أن الملف صغير ويمكن تشغيله في أي متصفح قديم أو حديث بدون توصيل -في الدعم.
