CSS3 HTML5 طراحی وب فرانت اند (Front End)

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

تفاوت jpg و png در طراحی وب
نوشته شده توسط مهدی خسروی

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

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

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

 

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

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

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

 

تصاویر jpg

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

CSS Reset چیست؟ راهنما و آموزش کامل CSS Reset

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

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

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

 

تصاویر png

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

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

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

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

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

 

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

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

خمیده کردن گوشه‌ی المان‌ها (Border Radius) در CSS

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

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

 

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

منبع: زنبیل

امتیاز مقاله
  • کاربردی بودن مطالب
  • اجرایی بودن مطالب
  • بومی بودن مطالب
۵

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

مهدی خسروی

۸ سال پیش که یادگیری برنامه نویسی رو آغاز کردم، با یک مشکل بزرگ مواجه شدم: کمبود منابع آموزشی حرفه‌ای و کاربردی به زبان فارسی. به همین دلیل، بعد از چندین سال فعالیت حرفه‌ای در زمینه‌ی برنامه نویسی، تصمیم گرفتم دانسته‌ها و تجربیات خودم را با شما عزیزان به اشتراک بگذارم. پیشنهاد میکنم به آدرس yadify.com/gifts حتما سر بزنید :)

۵ دیدگاه

درج دیدگاه

This site uses Akismet to reduce spam. Learn how your comment data is processed.