Vector و Raster دو شیوه اصلی توصیف تصویرند، نه دو فرمت فایل واحد. Raster تصویر را با شبکه پیکسل‌ها نگه می‌دارد و Vector شکل‌ها را با مسیر، مختصات و قواعد رسم توصیف می‌کند. SVG، PNG و JPEG فرمت‌اند و می‌توانند برای کاربردهای متفاوت انتخاب شوند. بعضی فایل‌ها مانند PDF یا فایل کاری یک نرم‌افزار، محتوای ترکیبی دارند. از پسوند به تنهایی درباره اینکه همه عناصر تصویر Vector یا Raster هستند نتیجه نگیرید.
برای مثال فرضی، یک لوگوتایپ با مسیرهای دقیق می‌تواند برای اندازه‌های متفاوت منبع Vector داشته باشد و یک عکس محصول بافت و نور را به صورت Raster نگه دارد. اما شعار «لوگو همیشه وکتور و عکس همیشه رستر» همه خروجی‌ها را توضیح نمی‌دهد. لوگو برای شبکه اجتماعی می‌تواند خروجی پیکسلی لازم داشته باشد و یک فایل Vector هم می‌تواند عکس Raster جاسازی‌شده داشته باشد. باید منبع کاری، نوع محتوا و خروجی مقصد را از هم جدا کنید.
Raster وضوح و ابعاد مشخص دارد
عرض و ارتفاع پیکسلی نشان می‌دهند تصویر چند نمونه داده دارد. نمایش بزرگ‌تر از آن می‌تواند به تخمین پیکسل‌های تازه وابسته شود و جزئیات واقعی تازه‌ای ایجاد نمی‌کند. Sharpness به منبع، پردازش و محل نمایش هم مربوط است. فایل بزرگ لزوماً عکس واضح نیست؛ تصویر تار را می‌توان با ابعاد زیاد ذخیره کرد. برای انتخاب، اندازه اصلی و کیفیت واقعی را ببینید، نه فقط حجم یا برچسب کیفیت بالا در نام فایل.
فشرده‌سازی ممکن است Lossless یا Lossy باشد و با کاربرد هماهنگ شود. بافت عکس، نوشته کوچک و سطح تخت نیاز یکسانی ندارند. ذخیره مکرر با بعضی روش‌های Lossy می‌تواند کیفیت را پایین بیاورد. نگه داشتن منبع مناسب و ساخت خروجی مقصد از آن، از ویرایش پی‌درپی نسخه فشرده بهتر است. اگر Transparency لازم است، فرمت و تنظیم خروجی باید آن را پشتیبانی کنند. پس‌زمینه سفید در فایل با کانال Alpha شفاف یکی نیست.
Vector شکل را قابل بازترسیم توصیف می‌کند
راهنمای SVG در MDN قالب مبتنی بر XML و توصیف گرافیک برداری را معرفی می‌کند. مسیر و شکل می‌توانند در اندازه‌های مختلف دوباره Render شوند، بدون اینکه به پیکسل‌های ثابت همان شکل محدود باشند. این ویژگی برای آیکون، Diagram و بسیاری از نشانه‌ها مفید است. با این حال، جزئیات پیچیده در اندازه کوچک ممکن است از نظر ادراکی ناپدید شوند؛ دقیق بودن مسیر، خوانایی در همه مقیاس‌ها را تضمین نمی‌کند.
Vector می‌تواند هزینه دیگری داشته باشد: تعداد مسیرهای زیاد، Filter، Mask و عناصر پیچیده. یک Illustration بسیار پرجزئیات شاید فایل بزرگ یا Render سنگین بسازد. تبدیل عکس به هزاران مسیر همیشه بهینه یا قابل ویرایش نیست. همچنین فایل Vector ممکن است به Font، تصویر جاسازی‌شده یا قابلیت خاص نرم‌افزار وابسته باشد. در تحویل، این وابستگی‌ها را روشن کنید تا باز شدن فایل در سیستم دیگر، ظاهر متفاوت یا عنصر گمشده ایجاد نکند.
منبع قابل ویرایش را از خروجی مصرف جدا کنید
فایل کاری برای تغییر طراحی است و خروجی برای مقصد مشخص. فایل AI یا سند مشابه می‌تواند لایه‌ها و داده‌های نرم‌افزار را نگه دارد، اما همه مصرف‌کنندگان وب یا چاپ همان نرم‌افزار را ندارند. SVG می‌تواند برای بعضی استفاده‌های وب مناسب باشد و PDF برای انتقال صفحه با ساختار مناسب کاربرد دارد. هیچ کدام به طور عمومی تضمین نمی‌کنند همه محتوای داخل Vector است. PDF دارای عکس هنوز عکس Raster دارد و بزرگ‌نمایی آن محدودیت منبع عکس را حذف نمی‌کند.
برای نشانه اصلی، نسخه مسیرهای تمیز و قرارداد رنگ و اندازه مفید است. سپس خروجی‌های Raster با ابعاد مورد نیاز ساخته شوند. تبدیل متن به Outline می‌تواند وابستگی Font را برای یک خروجی کم کند، اما ویرایش متن و قابلیت‌های معنایی آن را تغییر می‌دهد. نسخه متن قابل ویرایش را جدا نگه دارید. مقاله Figma و تحویل رابط درباره ساختار فایل و مسئولیت خروجی کمک می‌کند؛ نام فرمت جای توضیح محدوده ویرایش را نمی‌گیرد.
ابعاد چاپ را با اندازه فیزیکی حساب کنید
برای Raster، تعداد پیکسل و اندازه چاپ با هم تعیین می‌کنند چه تراکم مؤثری دارید. در مثال آموزشی، تصویر با عرض ۲۴۰۰ پیکسل اگر در عرض ۲۰ سانتی‌متر چاپ شود، حدود ۳۰۵ پیکسل در اینچ دارد. این محاسبه از همان داده می‌آید و معیار ثابت کیفیت همه چاپ‌ها نیست. فاصله دید، نوع تصویر و روش تولید روی نیاز اثر دارند. عدد DPI نوشته‌شده در Metadata بدون تغییر پیکسل، جزئیات واقعی به عکس اضافه نمی‌کند.
DPI دستگاه چاپ و PPI تصویر را بی‌قید به جای هم استفاده نکنید. تولیدکننده باید مشخصات لازم را برای همان کار بدهد. یک پوستر بزرگ با فاصله دید زیاد، کارت کوچک دارای نوشته ظریف و چاپ روی پارچه محدودیت متفاوت دارند. فایل نهایی همچنین به Bleed، حاشیه امن و رنگ مناسب نیاز دارد. Vector بودن بعضی اجزا مشکل رزولوشن عکس داخل آن یا برش نامناسب صفحه را حل نمی‌کند؛ همه بخش‌های خروجی باید با مقصد هماهنگ باشند.
فرمت وب را با نوع محتوا انتخاب کنید
راهنمای فرمت تصویر در MDN قابلیت‌ها و تفاوت فرمت‌های رایج را توضیح می‌دهد. JPEG برای بسیاری از عکس‌ها کاربرد دارد، PNG برای بعضی نیازهای Lossless و Transparency مناسب است و WebP یا AVIF گزینه‌های دیگری دارند. انتخاب باید با کیفیت، پشتیبانی و هزینه پردازش مقصد بررسی شود. صرف تغییر پسوند، فرمت را عوض نمی‌کند و «جدیدتر» بودن فرمت به تنهایی بهترین انتخاب برای هر دارایی نیست.
SVG برای شکل‌های مناسب می‌تواند مفید باشد، اما نباید عکس بزرگ را صرفاً داخل SVG قرار دهید و انتظار مزیت اندازه داشته باشید. فایل جاسازی‌شده همچنان داده Raster حمل می‌کند. برای عکس، ابعاد متناسب و منبع Responsive مهم‌اند. مقاله Responsive Images درباره Slot و Candidateها توضیح دارد. کوچک کردن ظاهری با CSS، هزینه دانلود نسخه حجیم را خودکار حذف نمی‌کند؛ خروجی واقعی باید با محل مصرف هماهنگ باشد.
تبدیل خودکار کیفیت و ساختار تازه نمی‌سازد
Raster کردن یک شکل Vector، اطلاعات را به پیکسل‌های اندازه انتخاب‌شده تبدیل می‌کند. این خروجی برای بعضی مصرف‌ها لازم است، اما مسیرهای اصلی دیگر از همان فایل قابل ویرایش نیستند. Vector کردن عکس با Trace نیز برداشت جدیدی از مرز و رنگ می‌سازد و با بازگشت کامل به شکل اولیه یکسان نیست. جزئیات و تعداد مسیرها می‌توانند نامناسب شوند. پیش از Trace، مشخص کنید هدف، بازسازی نشانه ساده است یا تبدیل سبک؛ این دو نیاز متفاوت دارند.
برای لوگوی پیکسلی کوچک، بازطراحی دقیق از مرجع معتبر ممکن است لازم باشد. استفاده از Upscale یا Trace نباید به عنوان تأیید اصالت یا بازیابی قطعی همه جزئیات معرفی شود. اگر منبع ناقص است، محدودیت را بنویسید و از حدس درباره حروف یا تناسب اصلی پرهیز کنید. مقاله نقوش ایرانی درباره مطالعه ساختار و ساده‌سازی آگاهانه زمینه دارد. کپی کردن ظاهر در فایل Vector، معنی و حقوق اثر را تغییر نمی‌دهد.
اندازه کوچک به نسخه مخصوص نیاز پیدا می‌کند
یک آیکون ممکن است در بزرگ‌نمایی دقیق باشد و در اندازه کوچک خط‌هایش به هم نزدیک شوند. ضخامت، فاصله و ساده‌سازی باید با اندازه مصرف بررسی شوند. شعار «بدون محدودیت بزرگ‌نمایی» نباید به «بدون محدودیت خوانایی» تبدیل شود. برای نشانه دارای جزئیات، نسخه کوچک می‌تواند به حذف کنترل‌شده بعضی بخش‌ها نیاز داشته باشد. این تصمیم باید در قرارداد برند ثبت شود تا هر مصرف‌کننده برداشت متفاوتی نسازد.
در UI، آیکون فقط تصویر نیست؛ نقش و نام قابل دسترس نیز لازم است. آیکون تزئینی و دکمه دارای آیکون انتظار متفاوت دارند. رنگ و اندازه کنترل را هم بررسی کنید. مقاله Color Contrast درباره اجزای غیرمتنی توضیح دارد. انتخاب SVG به خودی خود نام دکمه یا رفتار صفحه‌کلید ایجاد نمی‌کند. اگر متن مهم داخل تصویر قرار دارد، باید راه انتقال همان اطلاعات به مخاطب غیرتصویری هم وجود داشته باشد.
امنیت و وابستگی فایل را متناسب با مصرف ببینید
SVG سند دارای ساختار است و در بعضی زمینه‌ها می‌تواند محتوای فعال یا ارجاع بیرونی داشته باشد. فایل ناشناس را صرفاً چون تصویر نام دارد بی‌خطر فرض نکنید. روش استفاده به عنوان img، Inline یا سند مستقل رفتار یکسانی ندارد. برای دارایی‌های کاربر، سیاست پذیرش، پاک‌سازی و نمایش باید با محصول تعریف شود. تبدیل ساده نام فایل یا محدود کردن پسوند جای بررسی محتوای واقعی را نمی‌گیرد.
Font، Color Profile و تصویر خارجی نیز می‌توانند روی نتیجه اثر بگذارند. قبل از تحویل، فایل باید بدون اتکا به مسیر محلی گمشده قابل استفاده باشد. اگر Library یا دارایی غیرانحصاری استفاده شده، مجوز آن جدا مشخص شود. مقاله Canva و خروجی محتوا درباره تفاوت دارایی اصلی و عنصر آماده توضیح دارد. پسوند Vector نه مالکیت اختصاصی می‌سازد و نه مجوز استفاده را خودکار فراهم می‌کند.
خروجی را با مقصد و نگهداری تحویل دهید
در تحویل، منبع کاری، خروجی‌های مقصد، ابعاد و محدودیت‌ها را مشخص کنید. نام فایل باید تفاوت نسخه تک‌رنگ، زمینه تیره یا اندازه کوچک را نشان دهد. مقاله Design System برای سازمان‌دهی دارایی مشترک مفید است. شروع مناسب این است که نوع محتوا و مقصد را تعیین کنید، سپس فرمت و اندازه را انتخاب کنید. Vector و Raster ابزارهای مکمل‌اند و انتخاب دقیق از رابطه ساختار تصویر با نیاز واقعی مصرف می‌آید.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!