معرفی پسوندهای GIF, JPG, PNG & SVG
پسوند های متفاوتی در حوزه ذخیره سازی تصویر وجود دارد که هر یک از آنها کاربردهایی مختص به خود دارند. به بیانی صحیح تر هر یک از این پسوندها یک روش فشرده سازی برای ذخیره، انتقال و یا استفاده از داده مورد نظر می باشند. در این مقاله به ویژگی ها و موارد کاربرد معروف ترین پسوند ها در حوزه ذخیره سازی تصاویر می پردازیم و این پسوندها را به لحاظ داشتن ویژگی های زیر باهم مقایسه و دسته بندی می کنیم.
مفاهیم
- شفافیت (transparency)
برخی تصاویر مانند لوگو ها و آیکون ها تمامی قاب چهار وجهی خود را پر نمی کنند. به فضاهای خالی به وجود آمده در قاب چهاروجهی این تصاویر شفافیت گفته می شود. برخی پسوندها قابلیت نمایش و یا در واقع عدم نمایش این فضاهای خالی را دارند.
- پالت رنگ (palette)
پالت یا تخته رنگ در اینجا تعداد رنگ هایی است که در یک کار و یا یک پسوند مورد پوشش قرار می گیرد که عمدتا وابسته به عمق رنگی(Color bit) است.
- بدون اتلاف (Lossless)
هر پسوندی یک روش فشرده سازی است. در برخی روشها با هر تغییری به داده اولیه (در اینجا تصویر) ضرری وارد نمی گردد و هیچ بخشی از داده از دست نمی رود.
- با اتلاف (Lossy)
برخی پسوندها نیز وجود دارند که برخلاف دسته قبل، در اثر هر تغییری امکان از بین رفتن داده های اولیه وجود دارد.
Gif : پسوند تبادل گرافیکی (the graphic interchange format)
شما احتمالا قبلا با فرمت بی نظیر تصویر وب آشنا هستید – GIF (فرمت تبادل گرافیکی). GIF یک پسوند “BitMap” است اما برخلاف پسوند های JPG یا PNG، گستره ی رنگی GIF محدود به ۲۵۶ رنگ می شود. بصورت پیش فرض هر تصویر GIF حاوی یک جعبه مداد رنگی است و هیچ راهی برای مخلوط کردن این رنگ ها برای ایجاد جدید وجود ندارد.
شاید ۲۵۶ عدد مداد رنگی تعداد زیادی رنگ برای کار به نظر برسد اما عکس های پیچیده متداول که روزانه با آنها سر و کار داریم از هزاران رنگ تشکیل شده اند. به علت اینکه گستره رنگ در این تصاویر در هنگام تبدیل به پسوند GIF از بین میرود برای عکس های رنگی از این فرمت استفاده نمی کنند.
در حالی که به طور کلی GIF برای تصاویر با تنوع رنگی گسترده انتخاب ضعیفی است، اما این ۲۵۶ رنگ میتواند به حفظ(کاهش) اندازه فایل ها کمک کند تا حتی با ضعیف ترین سرعت اینترنت بتوان آنها را بهره برد. برای مدتها، GIF تنها گزینه شفافیت وب را فراهم می کرد – هر چند هم اکنون PNG و SVG این ویژگی را ارائه می دهند.
دسته بندی
- بدون اتلاف
موارد کاربرد
- انیمیشن های ساده
- آیکونهای کوچک
- طرح های گرافیکی با تغییرات کم پیکسل به پیکسل (مانند طراحی های تخت- Flat Design)
JPEG
بسته به تمایلتان، ممکن است این پسوند را با اسامی “JPEG” یا “JPG” خطاب کنید، اما هر دوی آنها به یک روش فشرده سازی مشترک اشاره دارند. برخلاف GIF، JPEG یک پسوند با ۱۶bit رنگی است که با ترکیب نورهای قرمز، آبی و سبز میلیون ها رنگ را به نمایش درمیآورد. این ویژگی JPG را در حوزه عکاسی به یک پسوند محبوب تبدیل کرده است و شاید بتوان گفت این همان دلیلی است که از این پسوند به عنوان استاندارد دوربین های دیجیتال استفاده می کنند.
پسوند JPG با انعطاف پذیری بسیار زیادی اجازه می دهد تا تصویر از ۰%(فشرده سازی سنگین) تا ۱۰۰%(بدون فشرده سازی) فشرده شود. به صورت کلی فشرده سازی ۶۰تا ۷۵ درصدی، حجم فایل را به مقدار قابل توجهی کاهش می دهد در حالی که همچنان به لحاظ بصری، تصویر از کیفیت مناسبی برخوردار است.
در حالی که JPEG پسوندی مناسب برای پردازش و فشرده سازی تصاویر است اما این پسوند در گروه فشرده سازی های “با اتلاف” قرار دارد. این ویژگی این پسوند را به گزینه ای نا مناسب برای ویرایش های در لحظه مبدل میکند. خروجی گرفتن با JPEG منجر به از دست رفتن کیفیت می شود(بسته به تنظیمات میزان آن متغیر است) و با هر بار تکرار آن افت کیفیت نیز تکرار می شود؛ مانند کپی گرفتن از یک کپی. به همین دلیل عکاسان حرفه ای از پسوند بدون اتلاف RAW استفاده میکنند.
این نکته نیز لازم به ذکر است که JPG برخلاف PNG وGIF قابلیت نگهداری شفافیت عکس را ندارد.(اگر عکسی با زمینه شفاف را بخواهید با فرمت JPG ذخیره کنید، به صورت پیش فرض نرم افزار در هنگام ذخیره سازی برای تصویر یک زمینه ایجاد میکند.)
دسته بندی
- با اتلاف
موارد کاربرد
- تصاویر متداول
- عکاسی
- تصاویری با رنگ های پیجیده و پویا
PNG
پسوندی جدید تر از GIF و JPEG می باشد که به نوعی وجود خود را مدیون ازدواج این دو نوع است.
PNG-8
PNG-8 از جهت های مختلفی شبیه به GIF می باشد و از همان پالت ۲۵۶(حداکثر) رنگی استفاده می کند. این پسوند گزینه های بهتری برای شفافیت ارائه میکند و معمولا حجم فایل ها کمی کوچکتر است. با این حال، PNG-8 دارای قابلیت ساخت انیمیشن نیست.
PNG-24
PNG-24 به شما امکان پردازش تصاویر با میلیون ها رنگ (مانند JPG ) را می دهد و همچنین قابلیت حفظ شفافیت را نیز ارائه میکند. از آنجایی که PNG-24 یک پسوند فشرده سازی بدون اتلاف است، در هنگام گرفتن خروجی، حجم تصاویر(نسبت به JPG) بیشتر می شود اما اگر کیفیت تصویر مهم تر از اندازه آن باشد، این پسوند بهترین گزینه برای گرفتن خروجی است. این پسوند در مقایسه با پسر عمویش JPG با هر برنامه و زیرساختی سازگار نیست که این امر باعث می شود برای انتشار در صفحات وب گزینه ی معقولی نباشد و مورد اقبال قرار نگیرد. با این حال PNG-24 قابلیت ویرایش بدون افت کیفیت تصاویر را ارائه می کند که آن را به گزینه مناسبی برای ویرایش در لحظه تبدیل میکند.
دسته بندی
- بدون اتلاف
موارد کاربرد
- طرح های گرافیکی به کار رفته در وب که نیاز به شفافیت دارند
- تصاویر و طرح های گرافیکی با پیچیدگی رنگی بالا
- تصاویری که نیاز به ویرایش و خروجی گرفتن های مکرر دارند
SVG : Scalable Vector Graphics
برخلاف سه پسوند ذکر شده در بالا SVG(Scalable Vector Graphics) یک فرمت BitMap خالص نیست. در واقع یک پسوند برداری(پسر عموی نزدیک پسوندهای Ai و Eps در ادوبی ایلاستریتور-Adobe Illustrator) است که تبدیل به گزینهای جذاب برای طراحان واسطهای کاربری و وب شده است.
SVG به عنوان یک تصویرساز برای HTML مورد استفاده قرار می گیرد و با تمام پسوند هایی که تاکنون ذکر شده متفاوت است. در واقع SVG بهترین پسوند برای نمایش آرمها، آیکونها، نقشهها، پرچمها، نمودارها و دیگر تصاویری است که در نرمافزار های برداری مانند Illustrator، Sketch و Inkscape تولید می گردند.
در نوشته های مبتنی بر XML، SVG را می توان توسط هر ویرایشگر متنی ویرایش کرد و اصلاحات انجام شده را توسط جاوا اسکریپت و یا CSS اعمال نمود.
درحالی که SVG به صورت ذاتی برداری است، اما می توان در داخل فایل های SVG تصاویر BitMap نیز جایگذاری کرد؛ مانند جایگذاری JPEG در فایل های HTML. با استفاده از URL میتوان یک منبع تصویر را به فایل لینک داد (مانند لینک دادن یک تصویر در یک صفحه وب) و یا اینکه با بسته بندی پیکسل های تصویر آن را به عنوان Data URI ارائه کرد. این موارد به SVG انعطاف پذیری و قدرتی بی نظیر می بخشد.
اگرچه SVG می تواند تصاویر را در فضای وب به زیبایی تمام به نمایش در بیاورد، اما این پسوند به گونه ای نیست که افراد بتوانند در طی کارهای روزمره خود – مانند بارگزاری در صفحات وب و شبکه های اجتماعی – را با آن انجام دهند. سرویس های مختلف اینترنتی مانند WordPress، Flicker، Meduim، Tamblerو Facebook یا فایل های SVG شما را به پسوندهای مورد نظر خود تبدیل می کنند و یا اینکه از بارگذاری آنها جلوگیری خواهند کرد.
اگر از SVG برای طراحی وب استفاده می کنید، متوجه خواهید شد که تقریبا همیشه می توانید حجم فایل را در مقایسه با پسوندی مانند JPEG یا PNG بیشتر کاهش دهید. اما توجه داشته باشید هر چه تصویر شما پیچیده تر باشد تبدیل به فایل حجیم تری خواهد شد.
دسته بندی
- بدون اتلاف / برداری
موارد کاربرد
- آرم و آیکون هایی با طراحی قوی، هندسی و برداری
- طرح های گرافیکی که نیاز داریم آنها را در صفحاتی با اندازه های متفاوت نمایش دهیم.
- طرح هایی که باید ویرایش شوند، به روز شوند و دوباره به کار گرفته شوند.
- طرح هایی که باید با وسیله نمایش دهنده خود تعامل داشته باشند.
در این مقاله با چهار پسوند پر کاربرد در حوزه وب و گرافیک تا حدود زیادی آشنا شدیم و کاربردهای آنها را شناختیم. در آینده در مقاله ی دیگری به تفاوت ها و مقایسه این پسوندها خواهیم پرداخت.با ما همراه باشید…
مطالب زیر را حتما مطالعه کنید
اشتباهاتی که آزادکارها(freelancer) باید از آن اجتناب کنند
هفت عنصر طراحی خوب
چگونه یک ترکیب رنگی مناسب برای اپلیکیشن خود بسازیم؟
مفهوم mask در فتوشاپ
Gradient(گرادینت) در Indesign
نوشتن روی یک مسیر (path) در Indesign
2 Comments
Join the discussion and tell us your opinion.
دیدگاهتان را بنویسید لغو پاسخ
برای نوشتن دیدگاه باید وارد بشوید.
مرسی جالب بود بررسی این فرمت ها کنار هم
ممنون از توجه نظر شما