منتديات الشروق أونلاين - الفرق بين صيغ حفظ الصور jpeg /png /gif

http://www.g5g5.net//uploads/images/g5g5-55849f97d1.gif

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

هنا سنستعرض بالصور والأمثلة لـ أهم النقاط التالية :

1- هل هناك فرق بين امتداد حفظ التصميم ومميزات كل نوع.
2-وماهي الصيغة المناسبة لعمل تصميم متحرك.
3-وإختيار الامتداد المناسب لحفظ التصميم.

ستناول عن ثلاث امتدادات من اهم امتدادت الحفظ وهي :

png
gif

jpeg أولا
المميزات والعيوب لكل نوع

1- Gif

مختصرة من Graphic Interchange Format وتعني " صيغة التبادل التخطيطية " وهذه الصيــغة تم تطويرها من قبل CompuServe في الثمانينات .

من مميزاتها
1- تدعم التصاميم المتحركة
مثال
http://www.pcintv.com/moonflowers//p.../pcintvgif.gif

2- تدعم الشفافية ( أي حفظ الصور بخلفية شفافة من غير خلفية ( بيضاء)
مثال
http://www.pcintv.com/moonflowers//p...res/pcintv.gif

3- تستوعب 256 لون
وتفيد مصممين المواقع والكتب الإلكترونية

من عيوبها /

لاتدعم أكثر من 256 لون فلهذا السبب لن تكون مناسبة للصور التي لها تدرجات الوان كثيرة وسنلاحظ بالصور فيما بعد.

*********

2- JPEG
وهي مختصرة من Joint Photographic Experts Group وهي من صنع وتطوير مجموعة خبراء محترفون .
في مطلع التسعينات وحرصوا هؤلاء الخبراء على إنتاج صيغة للصور تحوي أكثرمن مليون لون وفي نفس الوقت تكون ذات حجم منخفض ..
فكانت صيغة JPEG هي الحــل الأمثل.

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

عيوبها /
لاتدعم التصاميم المتحركة
http://www.pcintv.com/moonflowers//p.../pcintvjpg.jpg

2- لا تدعم الشفافية (حفظ الصور والتصاميم من غير خلفية بيضاء)

http://www.pcintv.com/moonflowers//p...es/jpgcopy.jpg

ومن عيوبها ايضاً عند التقليل من Quality بنسبة كبيرة يظهر تشويش واضح نوع ما لذلك لابد من مراعاة إختيار درجة Quality المناسبة للعمل.

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

مثال
http://www.pcintv.com/moonflowers//p...ctures/jp2.jpg

*****

3- PNG

إخــتصاراً لـPortable Network Graphic طــورت هذه الصيغة في أواخر التسعينات ..وجمعت بين مميزات كلتا الصيغتين السابقتين JPEG و Gif من حيث قدرتها الفائقة علىالشفافية
وأيضاً جودتها العالية جداً والتي تصل إلىأكثر من مليون لون
وهناك نوعين :

النوع الأول ذو 8 بت ( 8 bit ) وصمم خصصياً لإحتوائه على خيارات متقدمة في جانب الشفافية ..

النوع الثــاني ذو 24 بت ( 24 bit ) وهو يعرض أكثر من مليون لون كما صيغة JPEG ولكن بأحجام أكبر

ولكن صيغة PNG لا تدعم الحركة داخل الصور
مع دعمها لـ الشفافية
كما تلاحظ دائما في صيغ الايقونات العالية الدقة

مثال
http://upload.wikimedia.org/wikipedi..._app_kview.png

*****

الآن عمل مقارنة بالصور بين gif و Jpg

المثال الأول : اخترنا صورة لها الوان كثيرة
الحفظ بـ
Gif

http://www.pcintv.com/moonflowers//p...aui-Hawaii.gif

الحجم 140k

(2)
Jpg

http://www.pcintv.com/moonflowers//p...ui-Hawaii2.jpg

الحجم 102k

نلاحظ الصورة
Jpg
أقل حجما وأكثر وضوحا

ملاحظة/
وكل ماقللنا Quality نحصل على حجم اقل لكن مع مراعاة وضوح الصورة

****

المثال الثاني عند حفظ التصاميم ذو الألوان بسيطة

Gif
مثال
http://www.pcintv.com/moonflowers//p.../size/wabg.gif

الحجم 17k

http://www.pcintv.com/moonflowers//p.../size/wabj.jpg

الحجم 31k

أو مثل هذه الكتابة
http://www.pcintv.com/moonflowers//p...ures/fontg.gif
الحجم
2k

الحفظ بـ jpg

http://www.pcintv.com/moonflowers//p...ures/fontj.jpg
24k

نلاحظ عدم وجود اختلاف في وضوح الصورة لكن هناك فرق كبير في حجم الصور
فالصور التي تكون الوانها بسيطة يمكن نختار صيغة Gif لنحصل على حجم أقل.

******

الآن نقارن بين الصيغ الثلاث وهي jpeg
Png
Gif
من ناحية الحجم بـ إختيار صورة بسيطة الألوان

1-صيغة gif
http://www.pcintv.com/moonflowers//p...ze/saveGif.gif

الحجم 78k

2- صيغة gpeg

http://www.pcintv.com/moonflowers//p...e/savejpeg.jpg

الحجم 67 K

3- صيغة PNG

http://www.pcintv.com/moonflowers//p...ze/savePNG.png

الحجم 295k

لا يوجد فرق في درجة دقة التصميم لكن هناك فرق واضح في حجم التصميم

همسة أخيره

و المصمم عادة يهتم بـ

(1) وضوح الصورة .

(2) صغر حجمها.

فإذا كنت مصمم موقع فاحرص على إختيار حجم اقل للصور بحيث يكون التصفح اسرع.

إذا كنت مصمم ( بطاقات.. الخ) احرص على إختيار مقاس مناسب لتصاميمك على الشبكة وبالتالي يقل الحجم
و أختيار المقاس المناسب يخرج التصميم بشكل مميز وجذاب.

***

اتمنى ان يكون الموضوع افادكم

http://www.g5g5.net//uploads/images/g5g5-9c81cc0b40.gif
http://www.g5g5.net//uploads/images/g5g5-6d3363e6c9.gif
http://www.g5g5.net//uploads/images/g5g5-f9e1386930.gif
http://www.g5g5.net//uploads/images/g5g5-6d3363e6c9.gif