CSS HTML طراحی وب

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

مهدی خسروی
نوشته شده توسط مهدی خسروی

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

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

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


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

[quote font_size=”18″ bgcolor=”#” color=”#000″ bcolor=”#” arrow=”no”]فایل ویدئویی آموزشی و متن زیر، دقیقا یک محتوا را توضیح میدهند. از هرکدام که راحت تر هستید برای یادگیری‌تان استفاده کنید و لذت ببرید :)[/quote]

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

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

تصاویر jpg

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

بیشتر بدانید:
تفاوت IDE و Text Editor و هر آن چیزی که باید درباره‌ی آن‌ها بدانید!

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

همه چیز تا اینجای کار خوب است، اما شاید طراحی ما به شکلی باشد که نخواهیم آن پس زمینه سفید رنگ در پشت خودرو را داشته باشیم. دقیقا اینجای کار است که فرمت 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

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

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

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

 

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

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

مهدی خسروی

مهدی خسروی

سلام، مهدی خسروی هستم، نویسنده کتاب «دوبار فکر کن، یک بار کد بزن» و مدرس دوره‌های طراحی و برنامه نویسی زنبیل.
همیشه، بزرگ‌ترین موضوعی که من را اذیت میکرد، نبود دوره‌های آموزشی باکیفیت، پروژه‌محور و حرفه‌ای به زبان فارسی بود. همین موضوع باعث شد «زنبیل» متولد شود.
اگر علاقمند به یادگیری هستید، دوره‌های رایگان و ویژه زنبیل را در آدرس xanbil.com/vip از دست ندهید.

۵ نظر

درج نظر

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