تفاوت jpg و png در طراحی وب

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

دلیل این موضوع این است که این دو فرمت،‌در دنیای طراحی وب با هم تفاوت‌های بسیاری دارند و هرکدام در جایی خاص استفاده میشوند. در این آموزش بصورت عملی تفاوت jpg و png در طراحی وب رو بررسی میکنیم و یاد میگیریم که در چه زمان هایی باید از فرمت png و در چه زمان هایی باید از فرمت jpg استفاده کنیم.

همینطور نحوه پیدا کردن و دانلود این ۲ گروه از تصاویر را هم یاد میگیریم.

تفاوت jpg و png در طراحی وب

قبل از هرچیز باید بدانیم هر دوی این فرمت‌ها، برای تصاویر استفاده میشوند و در خیلی از موقعیت‌ها، تفاوت خاصی بین این دو فرمت وجود ندارد. ولی در بعضی از مواقع، تفاوت اصلی بین این دو فرمت بوجود می‌آید که در پروژه‌های مختلف طراحی وب، این تفاوت می‌تواند بسیار برای ما سودمند باشد. در ادامه درباره‌ی تفاوت jpg و png در طراحی وب مطالبی را میخوانیم.

اگر میخواهید درباره‌ی طراحی وب بیشتر بدانید، این مقاله ها را مطالعه کنید:

• طراحی وب چیست؟ همه چیز درباره‌ی طراحی وب سایت (Web Design)
• Front End چیست و به چه کسی برنامه نویس فرانت اند میگویند؟

تصاویر jpg

فرض کنید میخواهیم تصویر یک خودرو را روی یک پس زمینه‌ی آبی رنگ در صفحه وب خودمان داشته باشیم. بعد از مراجعه به گوگل و دانلود عکس آن، با چند خط کد HTML و CSS ساده (که در فیلم آموزشی در ابتدای صفحه توضیح دادیم) چیزی شبیه به تصویر زیر را در مرورگر خواهیم داشت.

تصویر یک خودرو، با پس زمینه سفید رنگ که روی پس زمینه‌ی آبی رنگ قرار گرفته است.

همه چیز تا اینجای کار خوب است، اما شاید طراحی ما به شکلی باشد که نخواهیم آن پس زمینه سفید رنگ در پشت خودرو را داشته باشیم. دقیقا اینجای کار است که فرمت png به کمک ما می‌آید و به تفاوت jpg و png در طراحی وب پی میبریم.

تصاویر png

اگر یک بار دیگر در گوگل جست و جویی بکنیم و تصویر یک خودرو را با فرمت PNG پیدا کنیم و آن را به صفحه خود اضافه کنیم، میبینیم که دیگر از آن پس زمینه‌ی سفید رنگ خبری نیست، و این دقیقا به این دلیل است که از یک تصویر png با پس زمینه شفاف  استفاده کرده‌ایم.

تفاوت jpg و png در طراحی وب دقیقا همین مورد است. در جاهایی که نخواهیم تصویر ما دارای یک پس زمینه باشد، از یک تصویر با فرمت png و پس زمینه شفاف استفاده میکنیم.

[quote font_size=”18″ bgcolor=”#” color=”#000″ bcolor=”#” arrow=”no”]البته این موضوع به این معنا نیست که تمام تصاویر png دارای این خاصیت هستند. بلکه فقط تصاویری این خاصیت را دارند که دو شرط داشته باشند: ۱- فرمت آن‌ها png باشد ۲- پس زمینه آن‌ها شفاف باشد[/quote]

حالا ممکن است این سوال برای شما پیش بیاید که چطور میتوانیم متوجه شویم که تصویر png که انتخاب کردیم، دارای پس زمینه‌ی شفاف است یا خیر. در ادامه این موضوع را بررسی میکنیم.

نحوه‌ی دانلود تصاویر png و jpg

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

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

ولی اگر پس زمینه عکس، سفید بود، به این معناست که این تصویر دارای پس زمینه شفاف نمیباشد.