هر آنچه باید درباره‌ی فرمت‌های تصویری، مزایا و معایب آن‌ها بدانیم

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

تاکنون به این فکر کردید چه زمانی باید از فرمت JPG به‌جای PNG استفاده کنید؟ یا چه برنامه‌ای فایل INDD را باز می‌کند؟ اگر طراح گرافیک یا عکاس نباشید احتمالا به ندرت نیاز به درک تفاوت فایل‌هایی مثل TIF با فرمت PDF یا PSD خواهید داشت. با اینکه تنوع بالای فرمت‌های تصویری گیج کننده است، روشی برای تفکیک آن‌ها وجود دارد. در این مقاله به شما کمک می‌کنیم تا تفاوت بین هر فایل فرمت و موقعیت مناسب برای استفاده از هرکدام را درک کنید.

تصویر وکتور یا رستر

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

فایل‌های تصویری رستری (Raster)

تصویر رستری معمولا براساس مجموعه‌هایی از پیکسل‌ها یا بلوک‌های مستقل تشکیل می‌شوند. متداول‌ترین فرمت‌های رستری، فرمت‌های وب (JPEG، GIF و PNG) هستند. تمام تصاویر آنلاین از نوع رستری هستند. پیکسل‌ها دارای ابعادی تعریف‌شده براساس رزلوشن (بالا یا پائین) هستند و هنگامی که برای پر کردن فضا کشیده شوند معمولا دچار اعوجاج شده و تصاویری غیرشفاف و مات را تولید می‌کنند. برای حفظ کیفیت پیکسلی نباید تصاویر رستری را بدون درنظرگرفتن رزلوشن تغییر داد. در نتیجه، باید فایل‌های رستری را با ابعاد دقیق متناسب با کاربرد ذخیره کنید.

فایل‌های وکتور (Vector)

تصاویر برداری یا وکتور از انعطاف بیشتری نسبت به تصاویر رستری برخوردار هستند. این تصاویر براساس فرمول‌های تناسب ساخته‌شده‌اند نه پیکسل‌ها. EPS، AI و PDF از فرمت‌های شناخته‌شده برای تولید تصاویر وکتوری هستند که به‌طور مکرر نیاز به تغییر اندازه دارند. لوگو و گرافیک برندها معمولا با فرمت وکتور ساخته می‌شود. زیبایی وکتورها به انعطاف تغییر اندازه‌ی آن‌ها بازمی‌گردد.

رزلوشن بالا و پائین

حتما تاکنون کلماتی مثل DPI یا PPI را شنیده‌اید. DPI مخفف dots per inch (نقطه بر اینچ) و PPI معادل pixel per inch (پیکسل بر اینچ) است. این واحدهای اندازه‌گیری برای تعیین تراکم پیکسل‌ها متناسب با کاربرد مورد نظر ضروری هستند.

هنگام تعیین DPI یا PPI حتما باید دقت کنید خروجی تصویر را برای انتشار در وب می‌خواهید یا چاپ. وب‌سایت‌ها معمولا تصاویری با رزلوشن ۷۲ dpi را نمایش می‌دهند که پائین است؛ بااین‌حال این تصاویر در وب ظاهر خوبی دارند اما در چاپ این طور نیست. برای چاپ تصویر، رزلوشن نباید کمتر از ۳۰۰ dpi باشد.

 ۱۵ نوع فایل تصویری متداول

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

۱. JPEG یا JPG: مخفف گروه کارشناسان مشترک عکاسی، نام گروه سازنده‌ی این استاندارد است.

۲.  PNG: گرافیک قابل حمل شبکه

۳.GIF: فرمت مبادله‌ی گرافیکی

۴. WebP

۵. TIFF

۶. BMP: بیت‌مپ

۷. HEIF: فرمت فایل تصویری با بهره‌وری بالا

۸.  SVG: گرافیک برداری مقیاس‌پذیر

۹. EPS: پست اسکریپت کپسوله‌شده

۱۰. PDF: فرمت سند قابل حمل

۱۱. PSD: سند فتوشاپ

۱۲.  AI: سند ادوبی ایلاستریتور

۱۳.   XCF

۱۴.  INDD: سند ادوبی ایندیزاین

۱۵. انواع فایل تصویری Raw (خام)

۱. JPEG یا JPG

JPEG یا JPG نوعی فرمت فایل تصویری رستری با فشرده‌سازی بااتلاف است؛ این فرمت برای اشتراک‌گذاری تصاویر مناسب است. JPEG-ها بااتلاف هستند به این معنی که اندازه و همچنین کیفیت فایل را کاهش می‌دهند. JPEG هنوز یکی از پرکاربردترین انواع فایل تصویری است که به دلیل فشرده‌سازی در اینترنت به کار می‌رود و از پشتیبانی سراسری سیستم عامل و مرورگر برخوردار است.

اغلب پلتفرم‌های شبکه‌ی اجتماعی (از جمله فیسبوک و اینستاگرام) به‌صورت خودکار فایل‌های تصویری آپلودشده را به JPEG تبدیل می‌کنند. همچنین از اندازه‌های تصویر شبکه‌ی اجتماعی برای کنترل رزلوشن تصاویر استفاده می‌کنند.

مزایا و معایب

• پشتیبانی سراسری مرورگر و سیستم عامل
•   اندازه فایل نسبتا پائین
• فشرده‌سازی بااتلاف تصویر منجر به خوانایی ضعیف متن می‌شود

پشتیبانی سیستم عامل و مرورگر

•  تحت پشتیبانی تمام مرورگرها (کروم، فایرفاکس، سافاری و ...) از نسخه‌ی ۱.۰
• تحت پشتیبانی تمام نمایشگرها و ویرایشگرهای پیش‌فرض تصویر در کل سیستم‌عامل‌ها

نمونه‌ی کاربردی

• انتخابی خوب برای تصاویر وبلاگ و مقاله، تصاویر محصول و بسیاری از موارد دیگر
• از JPEG برای اینفوگرافیک شامل متن یا اسکرین‌شات‌های خودآموز که در آن‌ها متن اهمیت زیادی دارد، استفاده نکنید

۲. PNG (گرافیک قابل حمل شبکه‌‌‌ها)

PNG نوعی فرمت رستری است که از فشرده‌سازی بدون اتلاف پشتیبانی می‌کند و جزئیات کنتراست بین رنگ‌ها را حفظ می‌کند. از طرفی PNG خوانایی متنی بهتری نسبت به JPEG دارد. به این ترتیب PNG به انتخاب محبوبی برای اینفوگرافیک، بنرها، اسکرین‌شات‌ها و گرافیک‌های شامل متن و عکس تبدیل می‌شود.

مزایای و معایب

• تصاویر باکیفیت‌تر (بدون اتلاف) و خوانایی متنی بالا
• اندازه‌ی فایل بزرگ می‌تواند در صورت استفاده‌ی بیش از حد، سرعت وب‌سایت را کاهش دهد (به‌ویژه تصاویر دارای رزلوشن بالا).

مرورگر و پشتیبانی سیستم عامل

• تحت پشتیبانی تمام مرورگرها (کروم، اج، فایرفاکس، اینترنت اکسپلورر، اپرا، سافاری)
• تحت پشتیبانی تمام سیستم‌های عامل اصلی و ویرایشگرهای تصویر استاندارد آن‌ها

نمونه‌های کاربردی

• انتخاب خوب برای اینفوگرافیک، بنر، گرافیک سایت، اسکرین‌شات و دیگر عناصر بصری حاوی متن.
• از این فرمت برای تصاویر دارای رزلوشن بالا استفاده نکنید زیرا اندازه‌ی فایل را به چند مگابایت می‌رساند.

۲. PNG (گرافیک قابل حمل شبکه‌‌‌ها)

PNG نوعی فرمت رستری است که از فشرده‌سازی بدون اتلاف پشتیبانی می‌کند و جزئیات کنتراست بین رنگ‌ها را حفظ می‌کند. از طرفی PNG خوانایی متنی بهتری نسبت به JPEG دارد. به این ترتیب PNG به انتخاب محبوبی برای اینفوگرافیک، بنرها، اسکرین‌شات‌ها و گرافیک‌های شامل متن و عکس تبدیل می‌شود.

مزایای و معایب

• تصاویر باکیفیت‌تر (بدون اتلاف) و خوانایی متنی بالا
• اندازه‌ی فایل بزرگ می‌تواند در صورت استفاده‌ی بیش از حد، سرعت وب‌سایت را کاهش دهد (به‌ویژه تصاویر دارای رزلوشن بالا).

مرورگر و پشتیبانی سیستم عامل

• تحت پشتیبانی تمام مرورگرها (کروم، اج، فایرفاکس، اینترنت اکسپلورر، اپرا، سافاری)
• تحت پشتیبانی تمام سیستم‌های عامل اصلی و ویرایشگرهای تصویر استاندارد آن‌ها

نمونه‌های کاربردی

• انتخاب خوب برای اینفوگرافیک، بنر، گرافیک سایت، اسکرین‌شات و دیگر عناصر بصری حاوی متن.
• از این فرمت برای تصاویر دارای رزلوشن بالا استفاده نکنید زیرا اندازه‌ی فایل را به چند مگابایت می‌رساند.

۴. WebP

WebP یکی از فرمت‌های تصویری است که برای فشرده‌سازی بهتر از نوع بااتلاف و بدون اتلاف توسعه یافته است. WebP می‌تواند به صرفه‌جویی در فضای دیسک و پهنای باند کمک کند زیرا ۳۵ درصد کوچک‌تر از فایل‌های تصویری مشابه است.

مزایا و معایب

• حجم کمتر فایل در ازای کیفیت تصویر یکسان یا بهتر
• تحت پشتیبانی کل مرورگرها و ویرایشگرهای تصویر قرار ندارد

پشتیبانی از سیستم عامل و مرورگر

• گوگل کروم (ورژن ۱۷ به بالا برای دسکتاپ، ورژن ۲۵ به بالا برای موبایل)، فایرفاکس (۶۵+)، اج (+۱۸) و اوپرا (۱۱.۰+)، از WebP پشتیبانی می‌کنند. نسخه‌ی ۱۴ سافاری هم از WebP پشتیبانی خواهد کرد.
• این فرمت هنوز تحت پشتیبانی ویرایشگرهای پیش‌فرض سیستم عامل قرار نگرفته است اما ویرایشگرهای پیشرفته‌ای مثل فتوشاپ از آن پشتیبانی می‌کنند.

نمونه‌های کاربردی

• این فرمت را جایگزین فایل‌های JPEG و PNG کنید و با حفظ پهنای‌ باند سرعت سایت خود را افزایش دهید.

۵. TIFF

 TIFF مخفف فرمت فایل تصویر برچسب‌دار (Tagged Image File Format)، نوعی فرمت تصویر رستری است که معمولا برای ذخیره‌سازی و ویرایش تصاویر برای چاپ به کار می‌رود. این فرمت فاقد فشرده‌سازی است زیرا اولویت آن حفظ کیفیت تصویر است.

مزایا و معایب

• کیفیت بالای فایل برای ذخیره‌سازی و چاپ
• نبود گزینه‌های فشرده‌سازی باعث افزایش حجم فایل می‌شود
• پشتیبانی محدود مرورگر

پشتیبانی مرورگرها و سیستم‌عامل‌

• هیچ کدام از مرورگرهای اصلی بدون افزونه قادر به رندر فایل TIFF نیستند.
• این فایل‌ها به‌صورت فرمتی خروجی برای ویرایش حرفه‌ای تصویر و چاپ در دسترس قرار دارند

نمونه‌های کاربردی

•  ذخیره‌سازی و آماده‌سازی تصاویر و فایل‌های گرافیکی برای چاپ
• برای حفظ کیفیت اسناد اسکن شده یا تصاویر به کار می‌رود

 ۶. BMP (بیتمپ)

فایل بیت‌مپ (BMP) یکی از فرمت‌های فایل منسوخ است که پیکسل‌ها را بدون هیچ‌گونه فشرده‌سازی ترسیم می‌کند. در نتیجه حجم فایل‌های BMP به شکل چشمگیری افزایش می‌یابد و ذخیره‌سازی آن‌ها دشوار است.

مزایا و معایب

•  حجم بالای فایل بدون افزایش کیفیت نسبت به فرمت‌هایی مثل WebP، GIF یا PNG

 پشتیبانی مرورگر و سیستم عامل

• تحت پشتیبانی تمام مرورگرهای اصلی قرار دارد (کروم، اج، فایرفاکس، اینترنت اکسپلورر، اوپرا، سافاری).
• پشتیبانی بومی در اغلب ویرایشگرهای تصویر پیش‌فرض از جمله MS Paint.

 نمونه‌های کاربردی

•  در سال ۲۰۲۱، تصاویر BMP هیچ کاربردی ندارند.

^{مقایسه تصویر بیت‌مپ (سمت چپ) با تصویر گیف (سمت راست) از نظر اندازه‌ی تصویر. تصویر بیت‌مپ با کیفیت یکسان، حجم زیادی را اشغال می‌کند}

۷. HEIF (فرمت فایل تصویر با بهره‌وری بالا)

HEIF کوتاه‌شده‌ی فرمت فایل تصویر با بهره‌وری بالا است که توسط تیم فرمت ویدئوی MPEG به‌عنوان رقیبی برای JPEG توسعه یافت. از نظر تئوری، فشرده‌سازی این فرمت دو برابر بهینه‌تر از JPEG است و باعث می‌شود کیفیت تصاویر با حجم یکسان، دو برابر شود. HEIF فرمتی رستری براساس نگاشت پیکسلی است؛ یعنی نمی‌توانید اندازه‌ی تصاویر را بدون افت کیفیت تغییر دهید.

مزایا و معایب

•  کیفیت تصویر بالا نسبت به اندازه‌ی فایل
• فاقد پشتیبانی مرورگر و پشتیبانی محدود سیستم عامل

پشتیبانی مرورگر و سیستم عامل

•  تحت پشتیبانی هیچ کدام از مرورگرهای اصلی قرار ندارد.
• پشتیبانی بومی macOS Sierra و iOS 11 به بالا، اما تحت پشتیبانی نسخه‌های سافاری قرار ندارد.

نمونه‌های کاربردی

• در گوشی‌ها و دستگاه‌های هوشمند جدید برای ذخیره‌سازی تصاویر با کیفیتی بالاتر از فایل‌های JPEG به کار می‌رود.

^{مقایسه‌ی کیفیت فرمت‌های HEIF و JPEG} 

جدول ذیل فرمت‌های تصویر متناسب با وب را نشان می‌دهد:

جدول زیر شامل فرمت‌های تصویری است که در وب ظاهر می‌شوند اما به دلایلی مثل عدم پشتیبانی مناسب مرورگرها یا وجود جایگزین‌های بهتر زیاد در تولید محتوای وب به کار نمی‌روند.

۸. SVG (گرافیک برداری مقیاس‌پذیر)

فرمت فایل گرافیک برداری مقیاس‌پذیر یا SVG توسط W3C به‌عنوان زبانی نشانه‌گذاری برای تبدیل تصاویر دوبعدی در مرورگر توسعه یافت. این فرمت مانند تصاویر رستری به پیکسل وابسته نیست بلکه از متن XML برای تولید شکل‌ها و خطوط استفاده می‌کند و عملکرد آن مشابه معادلات ریاضی تولید گراف است. به این ترتیب می‌توان اندازه‌ی تصاویر SVG را تا بی‌نهایت بدون افت کیفیت تغییر داد.

مزایا و معایب

• حجم اندک فایل و مقیاس‌پذیری بدون اتلاف برای ترسیم‌ها، شکل‌ها و متن ساده.
• این فرمت برای ترسیم‌ها و تصاویر پیچیده مناسب نیست.

پشتیبانی مرورگر و سیستم عامل

•  تحت پشتیبانی تمام مرورگرهای اصلی قرار دارد (کروم، اج، فایرفاکس، اینترنت اکسپلورر، اوپرا، سافاری).
• ویرایشگرهای تصویر پیش‌فرض معمولا از SVG پشتیبانی نمی‌کنند (این فرمت برای عکس مناسب نیست) بلکه اغلب نرم‌افزارهای تصویرسازی از خروجی‌های SVG پشتیبانی می‌کنند.

نمونه‌های کاربردی

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

۹. EPS (پست اسکریپت کپسوله‌شده)

فرمت EPS (پست‌اسکریپت کپسوله شده) فایل تصویری برداری است که برای ذخیره‌سازی تصاویر در ادوبی ایلاستریتور و دیگر نرم‌افزارهای تصویرسازی مثل کرل دراو به کار می‌رود.فرمت EPS هم مانند SVG سندی مبتنی بر متن است که شکل‌ها و خطوط را به‌جای نگاشت پیکسل و رنگ با کد تعریف می‌کند. در نتیجه، فایل‌های EPS هم از ویژگی مقیاس‌پذیری بدون اتلاف برخوردار هستند.

مزایا و معایب

• مقیاس‌پذیری بدون اتلاف
•   پشتیبانی پرینتر برای اسناد و طرح‌ها

پشتیبانی سیستم عامل و مرورگر

• EPS فرمت فایل تصویری وب استاندارد نیست و تحت پشتیبانی مرورگرهای اصلی قرار ندارد.

نمونه‌های کاربردی

• این فرمت اغلب برای ذخیره‌سازی و چاپ تصاویر ادوبی ایلاستریتور و نرم‌افزارهای دیگر به کار می‌رود.

۱۰. PDF: فرمت سند قابل حمل

شاید فکر کنید فرمت PDF صرفا برای ذخیره‌سازی و خواندن اسناد متنی مناسب باشد. این ذهنیت با توجه به نام فرمت قابل درک است؛ اما فایل‌های PDF هم مشابه فایل‌های EPS مبتنی بر زبان پست‌اسکریپتی هستند که برای ذخیره‌سازی تصاویر هم به کار می‌رود.از فرمت PDF می‌توان برای ذخیره‌سازی تصویرها، جلد مجلات و چاپ استفاده کرد. این فرمت برای کتاب‌های الکترونیکی در اولویت است.

مزایا و معایب

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

پشتیبانی سیستم عامل و مرورگر

• تحت پشتیبانی تمام مرورگرهای اصلی قرار دارد اما باید فایل PDF را به‌عنوان فایلی مجزا باز کنید. (نمی‌توانید از فایل‌های PDF برای نمایش تصاویر در محتوای HTML استفاده کنید.)
• تحت پشتیبانی اغلب ویراستارهای سند استاندارد (مثل MS Word یا گوگل داکز) و نرم‌افزار تصویرسازی (ادوبی ایلاستریتور، Inkscape) قرار دارد اما تحت پشتیبانی نرم‌افزارهای ویرایش تصویر قرار ندارد.

نمونه‌های کاربردی

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

۱۱. PSD: سند فتوشاپ

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

مزایا و معایب

• کل فیلترها، تنظیمات شفافیت و ویرایش تصویر کاملا قابل تغییر و قابل بازگشت هستند.
• کیفیت تصویر بدون اتلاف
•    اندازه‌ی فایل بزرگ

نمونه‌های کاربردی

• ذخیره‌سازی پروژه‌های فتوشاپ قبل از تکمیل