• توجه: در صورتی که از کاربران قدیمی ایران انجمن هستید و امکان ورود به سایت را ندارید، میتوانید با آیدی altin_admin@ در تلگرام تماس حاصل نمایید.

تفاوت کاربرد فرمت تصاویر jpg و gif

admin

Administrator
عضو کادر مدیریت
فرمت جی پی جی ( JPG ) پاسخگوی تمام ترسیمات وب نیست
برای برخی از طراحان گرافیک وب، JPG بهترین پاسخگوست. اما این فرمت پاسخگوی تمام ترسیمات وب نیست. در واقع در نوع گرافیکی که ما امروز درباره آن بحث خواهیم کرد، این فرمت پاسخگوی ناخوشایندی است. فرمت JPG برای کارهای گرافیکی با تعداد رنگ بسیار بالا مانند تصاویر، بسیار عالی است، اما فرمت‌های GIF و PNG برای کارهای گرافیکی با تعداد رنگ محدود مناسب‌ترند.

یکی از این تصاویر 10.5 کیلوبایت و دیگری 3.37 کیلوبایت است. حدس بزنید کدام است؟ طرحی که بهتر به نظر می‌آید دارای حجم کمتریست.
احتمالا همه شما حدس زده‌اید که تصویر بالایی بهتر و با کیفیت‌تر به نظر می‌آید. در حقیقت تصویر بالایی یک فایل GIF است که با خصوصیت رنگی 32 رنگ ذخیره شده است. تصویر گرافیکی پایین یک فرمت JPG است که با فشرده‌سازی تراز 25 (compression level 25 ) و با فرمت 4:4:4 ذخیره شده است. من می‌توانستم از فشرده سازی کمتری استفاده کنم تا این تصویر بهتر به نظر بیاید، اما این مساله فقط فایل را بزرگتر می‌کرد.
ممکن است بعضی‌ها ندیده باشید که یک فایل JPG چقدر بد به نظر می‌آید. در قسمت پایین شما بخش بالا سمت چپ حرف S را می‌بینید که در آن بزرگنمایی 400% صورت گرفته است.


متوجه تمام خال‌ها و لکه‌ها می‌شوید؟ این به خاطرکاری است که فرمت JPG با تصویر انجام می‌دهد. احتمالا برخی از شما خواهید گفت که می‌توان میزان فشرده‌سازی فایل JPG را پایین آورد، ولی این مساله فقط حجم فایل شما را بیشتر خواهد کرد، درصورتی که این فایل قبل از این هم سه برابر حجیم تر از فایل GIF بود. من قصد ندارم روی تصویری که با فرمت GIF ذخیره شده است بزرگنمایی انجام دهم، به خاطر اینکه در این فرمت چیزی برای دیدن وجود ندارد و در مجموع هم هیچ لکه و خالی در آن دیده نمی‌شود.
پس قبل از اینکه تصویر گرافیکی خود را برای وب ذخیره کنید، مطمئن شوید که فرمت‌های موافق و مخالف هر فرمت را می‌دانید. کسانی که معتقدند JPG همیشه بهترین گزینه است، هنگامی که با یک فایل گرافیکی با تعداد رنگ محدود سر و کار داشته باشند، به شدت غافلگیر خواهند شد و خواهند فهمید که نه فقط این فایل بد به نظر می‌آید، بلکه حجم بالایی نیز دارد و همچنین این مساله می‌تواند به مشتریان او نشان دهد که او یک طراح شایسته در این حرفه نیست.

منبع: kishmehr.org
 

Cube

متخصص بخش هاستینگ و دامین
در تکمیل آموزش ها :
در طراحی وب و مخصوصا طراحی قالب وب کاهش حجم صفحه و درنتیجه سرعت لود سریع تر ، بسیار مهمه

این امر باید در کنار زیبایی انجام بشه

ذکر چند نکته الزایم است :
فرمت jpg دارای حجم بسیار پایینی است ولی چه موقع ؟
آیااین نکته برای یک عکس 1 پیکسل در 1024 پیکسل هم صادق است ؟

تست کنید .....

خواهید دید که در کمال نا باوری حجم ایت عکس با فرمت png بسیار کمتر از حجم همین عکس با فرمت jpg است ... !

پس نتبجه :
برای تصاویر کوچک مثل بم گراند صفحه و .... بهترین فرمت png است ...
برای تصاویری در حد 20 پیکسل در 20 پیکسل و به بالا .... بهترین فرمت jpg است ....

اینا نکاتی است که طراحانی که با css آشنایی دارند ، حتما در کارشون بهش برخورد کرده اند و این نکات کاملا تجربی است و جایی نوشته نشده است ...


نکته بسیار مهم تر : فرمت png خاصیت transparent را پشتیبانی می کنه >> یعنی تصویر می تونه بدون بک گراند باشه و بروی هر قسمتی که قرارش بدین ، بک گراندش به همون رنگ بشه ... (اینو فتوشاپ کارا بهتر می دونن که تصویر بدون لایه بک گراند چه خصوصیاتی داره)
ولی فرمت jpg این خاصیت رو نداره

خوب حتما میگین : این چه ربطی به ما داره ؟ !!!

فرض کنید یک عدد آیکون دارید با فرمت jpg که مثلا بک گراندش سفیده
خوب این آیگون رو میخواین روی سرمنوتون قرار بدین .....
خوب سرمنوی شما مشکی یا بطور کلی رنگیه .....
خوب چکار می کنین ؟
اگر آیکون رو روی سر منو قرا بدین .... خیلی زشت میشه و کاملا بک گراند سفیدش خیلی خیلی تابلو میشه

راه حل چیه ؟
اگر همین آیکون رو با فرمت png در اختیار داشته باشید (همه آیکون های png رو بدون بک گراند می سازن و اصلا استفادشون به خاطر همین خاصیته) . خیلی راحت آیکون رو روی هر سرمنویی با هر رنگی اصتفاده می کنین و حالشو می برین


این ها نکاتی بود که بنده در حین طراحی قالب سایت های مختلف و مخصوصا طراحی سایت زیر به اون دست یافتم :
رخداد، نخستین پایگاه خبری چند رسانه ای استان البرز

موفق باشید.
 
بالا