تغییر اندازه تصویر

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

ساده‌ترین روش، درون‌یابی نزدیک‌ترین همسایه، برای هر نقطه در شبکه هدف شدت نزدیک‌ترین پیکسل شبکه اصلی را برمی‌گزیند. این روش با پیچیدگی الگوریتمی O(1) از نظر محاسباتی ساده است، اما در امتداد لبه‌های مورب آرتیفکت‌های پله‌ای دندانه‌دار و بلوکی می‌سازد و برای محتوای عکاسی کاملاً نامناسب است (هرچند برای حفظ پیکسل‌آرت رترو بسیار ارزشمند است). درون‌یابی دوخطی با محاسبه میانگین وزنی بر اساس فاصله در یک شبکه ۲×۲ از چهار پیکسل نزدیک پیرامونی این را بهبود می‌دهد. مقیاس‌دهی دوخطی پله‌های دندانه‌دار را حذف می‌کند، اما مانند یک فیلتر فضایی پایین‌گذر عمل کرده، بافت‌های پرفرکانس را تار و خطوط تیز تایپوگرافی را نرم می‌کند.

موتور ما از درون‌یابی دومکعبی با دقت بالا استفاده می‌کند که ماتریس ۴×۴ از ۱۶ پیکسل پیرامونی را با چندجمله‌ای‌های اسپلاین مکعبی (مانند هسته‌های Catmull-Rom یا Mitchell-Netravali) ارزیابی می‌کند. بازنمونه‌برداری دومکعبی با در نظر گرفتن هم شدت پیکسل‌های مجاور و هم نرخ تغییر فضایی رنگ آن‌ها (مشتق‌ها)، هنگام کوچک‌سازی گذارهای تیز لبه، ریزبافت‌های ظریف پوست و کنتراست ظریف تایپوگرافی را حفظ می‌کند و دارایی‌های بصری تیز و آماده انتشار، بدون تاری گل‌آلود یا آرتیفکت حلقه‌ای ارائه می‌دهد.

در آغاز توسعه وب، هر پیکسل منطقی CSS دقیقاً با یک پیکسل فیزیکی نمایشگر برابر بود (DPR برابر 1x). اما محیط‌های رایانشی امروز تحت سلطه نمایشگرهای DPI بالا هستند — از جمله پنل‌های رتینای اپل، مانیتورهای رومیزی 4K/5K و صفحه‌های OLED گوشی — که با نسبت پیکسل دستگاه 2x، 3x یا بیشتر کار می‌کنند. یک بنر اصلی واکنش‌گرا با عرض چیدمان CSS برابر ۸۰۰ پیکسل روی صفحه رومیزی استاندارد، برای نمایش با وضوح نوری کاملاً تیز روی نمایشگر رتینای 2x به عرض فیزیکی ۱۶۰۰ پیکسل و روی نمایشگر موبایل پرچم‌دار 3x به ۲۴۰۰ پیکسل نیاز دارد.

مهندسی حرفه‌ای کارایی وب حکم می‌کند که توسعه‌دهندگان هرگز یک تصویر واحد و یکسان را به همه بازدیدکنندگان ارائه ندهند. به‌جای آن، معماری مدرن پیشنهادی با ابزار تغییر اندازه ما یک نردبان ساختاریافته چندسطحی از نقاط شکست (معمولاً با عرض‌های ۶۴۰، ۱۰۲۴، ۱۴۴۰ و ۱۹۲۰ پیکسل) می‌سازد و آن‌ها را از طریق ویژگی HTML `srcset` همراه با تعاریف صریح `sizes` ارائه می‌دهد. این کار به پیش‌تجزیه‌گر مرورگر اجازه می‌دهد دقیقاً وضوح متناسب با عرض نمای بازدیدکننده، تراکم صفحه و شرایط شبکه را به‌طور پویا انتخاب و دانلود کند و کمال بصری را بدون هدر دادن حتی یک کیلوبایت از پهنای باند موبایل تضمین کند.

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

در مقابل، بزرگ‌سازی (درون‌یابی) چالشی در ساخت اطلاعات است. اگر یک تصویر بندانگشتی ۴۰۰×۳۰۰ پیکسلی را به ۱۹۲۰×۱۰۸۰ پیکسل بزرگ کنید، الگوریتم از نظر ریاضی مجبور است بیش از ۹۵٪ کل مقادیر پیکسل را از صفر بسازد. درون‌یابی دومکعبی شیب‌های ریاضی نرمی میان پیکسل‌های موجود محاسبه می‌کند، اما نمی‌تواند جزئیات پرفرکانس ازدست‌رفته مانند تک‌تار مو، آجرکاری دوردست یا بافت ظریف محصول را بیافریند. بزرگ‌سازی دارایی‌های کم‌وضوح بیش از ۱۲۵٪ تا ۱۵۰٪ ناگزیر به نرمی محسوس و هموارشدگی آبرنگ‌مانند می‌انجامد. در طراحی وب تولیدی، همیشه دارایی‌های منبع را با بالاترین وضوح موجود ثبت و برش دهید و سپس به سمت مشخصات چیدمان هدف کوچک کنید.

نسبت ابعاد رابطه تناسبی میان عرض افقی و ارتفاع عمودی تصویر را تعریف می‌کند و به‌صورت نسبت بیان می‌شود (مانند 16:9 یا 1:1). یکی از رایج‌ترین اشتباهات بصری در بازاریابی دیجیتال زمانی رخ می‌دهد که نویسنده تصویری را بدون قفل کردن نسبت‌ها به‌زور در ظرفی با نسبت ابعاد ناهمخوان قرار می‌دهد و نتیجه، چهره‌های به‌طرز زشتی فشرده، تایپوگرافی کشیده و لوگوهای سازمانی کج است. ابزار تغییر اندازه ما قفل خودکار نسبت ابعاد دارد که هم‌زمان با تایپ، بُعد همراه را به‌طور ریاضی دقیق محاسبه می‌کند و یکپارچگی هندسی کامل را تضمین می‌کند.

هنگام تغییر اندازه دارایی‌های بصری برای انتشار دیجیتال چندکاناله، از نسبت‌های استاندارد صنعت پیروی کنید: 16:9 (۱۹۲۰×۱۰۸۰) برای بنرهای اصلی رومیزی، تصاویر بندانگشتی ویدیوی عریض و اسلایدهای ارائه؛ 1:1 (۱۰۸۰×۱۰۸۰ یا ۲۰۰۰×۲۰۰۰) برای کاتالوگ محصولات فروشگاهی، گالری‌های مربعی بازارگاه و پست اینستاگرام؛ 4:5 (۱۰۸۰×۱۳۵۰) برای بهینه‌سازی فید عمودی شبکه‌های اجتماعی؛ 9:16 (۱۰۸۰×۱۹۲۰) برای استوری تمام‌صفحه عمودی موبایل، محتوای TikTok و ریلز؛ و 1.91:1 (۱۲۰۰×۶۳۰) برای کارت‌های اشتراک Open Graph در فیسبوک، لینکدین و توییتر. اگر دارایی منبع شما با نسبت هدف منطبق نیست، پیش از تغییر ابعاد ابتدا با ابزار «برش تصویر» کادربندی را تعیین کنید.

یک تصور نادرست رایج میان طراحان وب تازه‌کار این است که بارگذاری یک تصویر غول‌آسای ۶۰۰۰×۴۰۰۰ و محدود کردن آن با CSS (`width: 100%; height: auto;`) معادل تغییر اندازه درست تصویر پیش از آپلود است. از نظر معماری، این روش برای کارایی وب و رتبه سئو فاجعه‌بار است. وقتی تصویر بیش از حد بزرگ ارائه می‌شود، دستگاه بازدیدکننده باید کل بار چندمگابایتی را از طریق شبکه دانلود کند که مسیر بحرانی رندر مرورگر را کاملاً مسدود کرده و زمان‌بندی Largest Contentful Paint (LCP) بسیار ضعیفی ایجاد می‌کند.

افزون بر این، پس از دانلود، موتور رندر مرورگر باید حافظه خام فشرده‌نشده‌ای در RAM برای نگهداری بیت‌مپ رستری رمزگشایی‌شده اختصاص دهد (برای رنگ ۳۲ بیتی RGBA به‌صورت عرض × ارتفاع × ۴ بایت محاسبه می‌شود). یک عکس ۲۴ مگاپیکسلی بدون تغییر اندازه فقط برای رمزگشایی نزدیک به ۱۰۰ مگابایت حافظه خام مرورگر می‌خواهد، در حالی که یک دارایی ۱۲۰۰ پیکسلی درست تغییراندازه‌یافته کمتر از ۴ مگابایت نیاز دارد. روی دستگاه‌های موبایل ضعیف، این تخصیص حافظه اضافی باعث جمع‌آوری زباله تهاجمی، لکنت تعامل‌های لمسی، افت Interaction to Next Paint (INP) و اغلب کرش زبانه مرورگر می‌شود. تغییر اندازه ازپیش دارایی‌ها با ابزار سمت کاربر ما کل این جریمه کارایی را پیش از رسیدن رسانه به سرور تولیدی حذف می‌کند.