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

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

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

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

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


دانلود فیلم آموزش تفاوت jpg و png در طراحی وب – حجم 24 مگ

فایل ویدئویی آموزشی و متن زیر، دقیقا یک محتوا را توضیح میدهند. از هرکدام که راحت تر هستید برای یادگیری‌تان استفاده کنید و لذت ببرید 🙂

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

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

تصاویر jpg

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

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

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

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

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

تصاویر png

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

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

البته این موضوع به این معنا نیست که تمام تصاویر png دارای این خاصیت هستند. بلکه فقط تصاویری این خاصیت را دارند که دو شرط داشته باشند: ۱- فرمت آن‌ها png باشد ۲- پس زمینه آن‌ها شفاف باشد

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

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

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

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

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

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

 

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

درباره نویسنده

از حدود 5 سالگی با دنیایی به اسم کامپیوتر آشنا شدم و الان چیزی حدود 6 سال است که با کامپیوتر (و خصوصا برنامه‌نویسی) زندگی میکنم. در زنبیل دوست دارم اطلاعاتم را با شما دوستان عزیزم به اشتراک بگذارم. برای دانلود دوره‌های رایگان و ویژه لطفا به www.xanbil.com/vip مراجعه کنید.از توجه شما ممنونم :)

مطالب مرتبط

1 نظر

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

7 ساعت آموزش رایگان و پروژه‌محور طراحی وب
ایمیل خود را در زیر وارد کنید تا لینک دانلود 7 ساعت آموزش ویدئویی طراحی وب با HTML5 و CSS3 بلافاصله برایتان ایمیل شود.
در این دوره 2 پروژه‌ی عملی را از صفر تا صد باهم طراحی و برنامه‌نویسی خواهیم کرد.
قول می‌دهیم اطلاعات شما نزد ما محفوظ بماند :)
programmer