فرمت های تصویر؛ کدام را کجا

رستر یا وکتور؛ سوالی که قبل از فرمت جواب می خواهد

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

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

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

شش فرمتی که واقعا به کار می آیند

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

پشتیبانی مرورگر را عمدا در جدول نیاوردیم، چون یک بله و خیر ساده نیست و فهرست نسخه است. JPEG و PNG و GIF و SVG در همه نسخه های کروم، اج، فایرفاکس، اپرا و سافاری کار می کنند. WebP هم همینطور، با یک شرط که موزیلا صریح نوشته: روی مک به سافاری ۱۴ به بالا و هم زمان مک او اس بیگ سور یا بالاتر نیاز است. AVIF جوان تر است و موزیلا نسخه هایش را اینطور می نویسد: کروم ۸۵، اپرا ۷۱، فایرفاکس ۹۳، سافاری ۱۶.۱ و اج ۱۲۱. برای همین هم توصیه خود موزیلا این است که برای AVIF یک جایگزین WebP یا JPEG یا PNG با picture بگذارید.

و یک موضع که همه با آن موافق نیستند: GIF را فرهنگ زنده نگه داشته، نه مهندسی. پالتش سقف ۲۵۶ رنگ دارد، شفافیتش دو حالته است و برای انیمیشن هیچ فشرده سازی واقعی بین فریم ها ندارد. راهنمای موزیلا هم برای انیمیشن WebP یا AVIF یا APNG را پیشنهاد می کند. GIF تنها جایی می ماند که مقصد شما فقط GIF قبول کند.

کدام فرمت برای کدام کار

به جای شروع از فرمت، از کار شروع کنید. چهار حالت تقریبا همه چیز را پوشش می دهد.

• عکس. AVIF یا WebP، با JPEG به عنوان جایگزین. اگر لایه کش یا CDN شما خودش فرمت را با مرورگر مذاکره می کند، کار شما فقط این است که یک مستر خوب بالا بگذارید و بگذارید آن لایه تصمیم بگیرد.
• اسکرین شات و هر تصویری که متن دارد. اینجا فشرده سازی با اتلاف بیشترین آسیب را می زند، چون خرابی از لبه حروف شروع می شود. WebP بدون اتلاف یا PNG.
• لوگو، آیکن، نمودار. SVG. اگر مقصد SVG نمی پذیرد، از فایل وکتور خروجی PNG بگیرید؛ PNG موجود را بزرگ نکنید. درس طراحی لوگو همین نتیجه را از سمت طراحی می گیرد.
• حرکت. ویدیو، نه GIF. یک MP4 یا WebM کوتاه هم کوچک تر است هم تمیزتر و کنترل پخشش هم دست شماست.

یک هشدار درباره SVG که کمتر گفته می شود: SVG یک سند XML است و می تواند اسکریپت داشته باشد. فایل وکتوری که از یک منبع ناشناس گرفته اید را همانطور روی سایت بالا نگذارید. برای آیکن های خودتان مسئله ای نیست، برای فایلی که کاربر آپلود می کند هست.

و یک صرفه جویی که بیشتر از تغییر فرمت جواب می دهد: بخش زیادی از چیزی که آدم ها تصویر می گذارند اصلا لازم نیست تصویر باشد. آیکن، نمودار، جدول و لوگوی متنی همه شان با متن و CSS و SVG ساخته می شوند، و آن وقت نه فرمتی دارند که انتخاب شود، نه اندازه ای که خراب شود.

شفافیت و انیمیشن، دو جایی که انتخاب اشتباه فورا دیده می شود

JPEG کانال آلفا ندارد. موزیلا همین یک جمله را می نویسد و همه چیز از آن نتیجه می شود: چیزی به اسم JPEG شفاف وجود ندارد و آنچه تحویل می گیرید یک مستطیل سفید است.

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

PNG و WebP و AVIF کانال آلفای واقعی دارند و لبه نرم را نرم نگه می دارند. برای انیمیشن هم همین ها به علاوه APNG کار GIF را بهتر انجام می دهند. ولی صادقانه تر از این: اگر چیزی که می سازید بیش از چند ثانیه است، اصلا تصویر متحرک نیست؛ ویدیوست و باید ویدیو بماند.

موقع خروجی گرفتن چه چیزی را تنظیم کنیم

ترتیب کارها بیشتر از خود عددها اهمیت دارد.

اول اندازه. تصویر را در همان اندازه ای خروجی بگیرید که واقعا نمایش داده می شود، و برای نمایشگرهای متراکم ضربدر دو. هیچ تنظیم کیفیتی یک تصویر چهار هزار پیکسلی را که در جای ششصد پیکسلی نشسته نجات نمی دهد. این یک تنظیم معمولا از تغییر فرمت اثر بیشتری دارد، و چون اندازه تصویر مستقیم روی شاخص های Core Web Vitals اثر می گذارد، اگر مسئله شما سرعت سایت است کار از همین جا شروع می شود نه از فرمت.

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

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

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