الصور في الإنترنت وأنواعها - حصري للويلان

[align=center]


لماذا هذا التنوع في هيئات الصور الموجودة على الإنترنت؟


هل تساءلت لماذا يوجد أكثر من نوع للصور على الانترنت؟

فنحن نشاهد دائماً أنواع صورٍ كالتالية:




1- GIF (صور جف الثابتة)

2- JPEG (صور جاي بي إي جي)

3- GIF المتحركة (Animated GIF)

4- MPEG (إم بي إي جي)

5- Shockwave (الملفات الفلاشية)






في الحقيقة أن النوعين الأكثر شيوعاً هما JPEG و GIF و العديد منا قد لا يعرف ما الفرق بين كل من هذه الأنواع الخمسة.

قبل كل شيء لابد أن نعرف أن الصور النقطية (Bitmap -24 Bit) التي اعتدنا عليها في الرسام مثلاُ.. تخزن الصورة بوصف لون كل بكسل (نقطة على الشاشة) من ألوان الصورة وحجم الوصف لكل بكسل هو 24 بت .. نوضح أكثر :

لو كان لدينا صورة أبعادها 200 * 200 بكسل فإنها سوف تخزن كالتالي:


200 * 200 = 40.000 بكسل (عدد نقاط الصورة)

نأخذ عدد نقاط الصورة ثم نضربها بحجم تخزين كل نقطة واتفقنا أنه 24 بت :


40.000 * 24 بت = 690.000 بت

هذا هو حجم الصورة..

نستطيع أن نحولها للبايت حيث أن البايت الواحد فيه 8 بتات..

فبالقسمة على 8 نحصل على الحجم بالبايت وهو =120.000 بايت... وإن شئت حوله للكيلو بايت بالقسمة على 1024 ويساوي = 120 كيلو بايت تقريباً.


هذا ما يحدث في تخزين الصور النقطية.. ماذا عن الصور الأخرى المذكورة؟



مايميز صور GIF و JPEG عن الطريقة أعلاه هو عملية الضغط (Compression) للصورة بطريقة مختلفة عن الصور النقطية BMP .

كيف؟

لنأخذ كل نوع من أنواع الصور الخمسة في موضوع مستقل... تخفيفاً للعبء على القراء الأكارم.


للحديث بقية...



[/align]

رد: الصور في الإنترنت وأنواعها - حصري للويلان

[align=center][glow=0000FF]أولاً: GIF[/glow]

في صور جيف (GIF) الثابتة يتم توصيف الصورة بلون من 256 لون فقط أي أن عدد الألوان التي توصف بها صور GIF هي 256 فقط.

كيف يتم التوصيف:

إذا كان لدينا لون أحمر في أحد سطور الصورة وتكرر اللون الأحمر في 40 بكسل في سطرنا هذا فسوف يتم التخزين بكتابة رقم اللون والذي هو في حالتنا هذه الأحمر ثم يليه عدد مرات تكراره في السطر ...

يعني لو افترضنا أن اللون الأحمر رقمه 250 ..
وتكرر في السطر في 60 بكسل فسوف يتم تخزينه كالتالي:

(رقم اللون, عدد التكرار)
(250 , 60)

وهذا رائع جداً لتخزين الصور التي يطغى عليها ألوان معينة .. مثال لدينا الصورة التالية:





بتنسيق BMP استهلكت 511.5 كيلوبايت تقريباً.. حسبناها من أبعادها وهي 512 بكسل * 341 بكسل... كما فعلنا سابقاً:

(512 * 341) = 174.592 بكسل
نضربها في 24 = 4.190.208
نقسمها على 8 = 523.776 بايت
نحولها للكيلوبايت بالقسمة على 1024 = 511.5 كيلو بايت



أما عند تخزينها بصيغة GIF فقد استلهكت 40 كيلو بايت فقط... (هل لاحظت الفرق؟).



تحذير: أحيانا تفقد بعض ألوان الصورة عند تخزينها أو تحويلها لصيغة GIF كما حدث معنا هنا.. لماذا؟ (اللي يجاوب له درجة عندي).



للشرح بقية...[/align]

رد: الصور في الإنترنت وأنواعها - حصري للويلان

[align=center]
[glow=0000FF] ثانياً : صيغ JPEG وأشهرها صيغة (JPG) [/glow]

يبدو لي أن هذه الصيغ هي الأكثر شعبية والأشهر لدى العامة من الناس فلماذا بظنكم؟

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

ولذلك هي المفضلة في تخزين الصور الفوتوغرافية...



ولكن ماهي الطريقة التي تتبعها صور JPG للضغط؟

الحقيقة أن هذه الهيئة من الصور تستخدم تقنية معقدة نوعاً ما للضغط... ولكن سوف أوضح لكم الآلية:


لدينا هذه الصورة المليئة بالألوان:




نحن نعلم أن الصورة توصف الألوان فيها لوناً لوناً فلو وصفناها بالطريقة المعتادة لكان التوصيف كالتالي:

الموقع (1.1) اللون (أخضر)
الموقع (2.1) اللون (أزرق)
الموقع (3.1) اللون (أبيض)
الموقع (4.1) اللون (أصفر)
الموقع (5.1) اللون (أحمر)

لو حسبنا عدد الخانات التي استخدمناها للتوصيف لوجدناها = 125 خانة

أما في JPG فالذي يحدث أن الضغط يتم كالتالي:

ينشأ قاموس للتوصيف ويرمز لكل لون برقم معين كما يلي:

أخضر=1
أزرق=2
أبيض=3
أصفر=4
أحمر=5

هذا الجدول فيه 30 خانة وهي عدد الحروف والأرقام الموجودة فيه..

شي جميل.. مالذي يحدث بعدها؟

يكون التوصيف كالتالي:

الموقع (1.1) اللون (1)
الموقع (2.1) اللون (2)
الموقع (3.1) اللون (3)
الموقع (4.1) اللون (4)
الموقع (5.1) اللون (5)

عدد الخانات هنا 110 فقط ..

إذن بهذه الطريقة وفرنا 15 خانة (عدد الخانات بالتوصيف العادي – عدد الخانات بالتوصيف باستخدام القاموس)..

لو خزنا القاموس مع الصورة وهذا ضروري لكان عدد الخانات الإجمالي 110 + 30 = 140 خانة..

بينما في الطرية العادية تطلب الأمر 125 خانة فقط.. هل هذا جيد؟

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




للشرح بقية...




[/align][/color][/align]

رد: الصور في الإنترنت وأنواعها - حصري للويلان

[align=center][/align]


[align=center]يعطيك العافية[/align]

رد: الصور في الإنترنت وأنواعها - حصري للويلان

[align=center]

عساك على القوه[/align]

رد: الصور في الإنترنت وأنواعها - حصري للويلان

[align=center][glow=0000FF]ثالثاُ: GIF المتحركة[/glow]

هذه الصيغة بكل بساطة عبارة عن عدة صور GIF ثابتة متسلسلة في ملف واحد و تعرض تباعاً لتعطي إيحاءً بالحركة..

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

وهنا يكون حجم ملف GIF المتحركة (Animated GIF) هو عبارة عن مجموع أحجام الصور المكونة له...

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

مثال عملي:

هذه الصورة في الأسفل عبارة عن GIF متحركة ..





وبتحليلها بالعين المجردة نجد أن أنها تتكون من ثلاث صور وهي كالتالي:

الصورة الأولى:


الصورة الثانية:


الصورة الثالثة:


ووظيفة برامج صنع ملفات GIF المتحركة هي القيام بعملية الربط بين كل صورة واللتي تليها والقيام بعملية انتقال سلسة...





وللشرح بقية...[/align]

رد: الصور في الإنترنت وأنواعها - حصري للويلان

[align=center]أخوي العماري

الله يعطيك الف عافيه على ماقدمت
وجهود تشكر عليها

تقلد أحترامي [/align]

رد: الصور في الإنترنت وأنواعها - حصري للويلان

[align=center][all1=CCCC66][align=center]
[align=center]تسلم يدينكـــ أخوي
مجهود تشكر عليه عسك على القوه
مشكور وبارك الله فيك
تحياااااااااااتي لك ؛؛؛[/align][/align][/all1][/align]

رد: الصور في الإنترنت وأنواعها - حصري للويلان

[align=center]بيض الله وجهك والله يعطيك العافية شرح مميز تشكر علية


تقلد أحترامي [/align]

رد: الصور في الإنترنت وأنواعها - حصري للويلان

[align=center]حياكم الله جميعاً ... آنستونا بحضوركم..


يوجد سؤال لم يجب عليه أحد ورد في شرح صور الجف وهو :

تحذير: أحيانا تفقد بعض ألوان الصورة عند تخزينها أو تحويلها لصيغة GIF كما حدث معنا هنا.. لماذا؟ (اللي يجاوب له درجة عندي).

[/align]

رد: الصور في الإنترنت وأنواعها - حصري للويلان

[align=center]

[glow=0000FF]رابعاً: MPEG[/glow]

في هذه النوعية من الملفات يتم استخدام خوارزمية معقدة شبيهه بتقنية ضغط JPG ...

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


وبهذه التقنية أنت قادر مع توفر مشغل لهذه الملفات أن ترفق صوتاً يصاحب الصور المحتواة في الملف...


أحد مشغلات هذا النوع هو Meida Player.


من أنواع هذه الصيغة مايلي:

mpeg-1
mpeg-2
mpeg-3
mpeg-4
mpeg-7
mpeg-21
mpeg-1 audio layer-3 ( وهذا النوع مختص بالصوتيات وهو نوع مشهور) من يعرفه؟





وللشرح بقية...








[/align]

رد: الصور في الإنترنت وأنواعها - حصري للويلان

[align=center]

[glow=0000FF]خامساً: وأخيراً Shockwave[/glow]


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

يصاحبها إمكانية الصوت كما هو معلوم...

ولكن مالمميز في الفلاش؟

لعلك لاحظت أن حجم الفلاش غالباً ما يكون صغيراً ومعقولاً جداً فنادراً ما تجد ملف فلاش حجمه يزيد 2 ميقا بايت كحد أقصى (رأي شخصي) مهما كثرت محتويات الملف...

وأيضاً قد تلاحظ النقاوة الجيدة للملف الفلاشي مهما تم تكبيره من مرات...




فما سر هذا كله ؟




الفلاش لا يصف الصور بداخله كالطرق السابقة (بتوصيف لون كل نقطة على الشاشة) كلا...

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

إذاً فهو يصف الأبعاد رياضياً لكل شكل بداخله ويصف أيضاً لون الشكل.(دائرة ، حمراء)... وهكذا...


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

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

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

ولا تنس الميزة الرئيسية فيه وهي إمكانية إضافة الحركة والصوت كما ذكرنا سابقاً...




[glow=FF6666]
مثال على ملفات الفلاش:

[flash=http://www.twbh.com/flash/elahi.swf]WIDTH=400 HEIGHT=300[/flash]


[/glow]



[glow=FF6633]انتهى الدرس [/glow]

وأرجو أن أكون قد أفدتكم بالجديد...

وعسى الله أن يبارك في الجهد ويجعله خالصاً لوجهه الكريم وأن ينفعنا بما علمنا وأن يعلمنا ما جهلنا مما ينفعنا دنياً وآخرةً...


أطيب تحية لكل من تابع الموضوع...

وأنصح بقراءة الموضوع أكثر من مرة لأن المعلومات قد لا تتضح من القراءة الأولى..





[/align]

رد: الصور في الإنترنت وأنواعها - حصري للويلان

يعطيك الف عافية اخوي العماري



عز الله كفيت و وفيت


شرح واضح ودرس مفيد خصوصاً للمبتدئين في عالم التصميم


وبالنسبة لسؤالك


عن فقدان ألوان الصورة اذا كانت بأمتداد Gif اعتقد والله العالم لانها بنظام ألوان
Rgb احمر =r اخضر=g ازرق =b وهي أولوان الشاشة الرئيسية


ماني متاكد ولكن اتوقع





وتقبل تحياتي ومروري

رد: الصور في الإنترنت وأنواعها - حصري للويلان

هلا وغلا عبدالله...

سرني مرورك...

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


سعدت بمشاركتك أخي العزيز... ألف تحية.

رد: الصور في الإنترنت وأنواعها - حصري للويلان

[align=center][all1=CCCC66][align=center]
[align=center]تسلم يدينكـــ أخوي
مجهود تشكر عليه عسك على القوه
مشكور وبارك الله فيك
تحياااااااااااتي لك ؛؛؛[/align][/align][/all1][/align]