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

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

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

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

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

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

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

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

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

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

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

خانه --> اخبار و مقالات --> تفاوت jpg و png در طراحی وبسایت

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

لطفا آدرس ایمیل را بدون WWW وارد نمائید.

نظرات کاربران