اندازه‌گیری ابعاد و DPI

در رایانش چنددستگاهی مدرن، درک تمایز میان پیکسل‌های فیزیکی، ابعاد طبیعی تصویر و پیکسل‌های چیدمان CSS ضروری است. ابعاد طبیعی یک تصویر نشان‌دهنده ماتریس دوبعدی واقعی داده‌های پیکسلی ذخیره‌شده در فایل دودویی آن است (مثلاً $1920 \times 1080$ پیکسل).

اما نمایشگرهای مدرن با DPI بالا (مانند صفحه‌های Retina اپل، مانیتورهای 4K و گوشی‌های هوشمند OLED مدرن) از نسبت پیکسل دستگاه (DPR) ‏2x یا 3x استفاده می‌کنند. نمای یک گوشی هوشمند ممکن است ۳۹۰ پیکسل CSS عرض داشته باشد، اما ماتریس نمایشگر فیزیکی آن ۱۱۷۰ پیکسل سخت‌افزاری دارد. وقتی توسعه‌دهندگان تصاویر را در نماهای استاندارد مرورگر بررسی می‌کنند، سبک‌دهی CSS ‏(`max-width: 100%`) اغلب تصویر را تغییر مقیاس می‌دهد و وضوح واقعی آن را پنهان می‌کند. ابزار ما فراداده دودویی مقیاس‌نخورده و بافرهای بیت‌مپ خام را مستقیماً بررسی می‌کند و ابعاد دقیق ۱:۱ پیکسل سخت‌افزاری را بدون اعوجاج نما گزارش می‌دهد.

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

ابزار ما نسبت ابعاد دقیق را با استفاده از الگوریتم اقلیدس برای یافتن بزرگ‌ترین مقسوم‌علیه مشترک (ب.م.م) محاسبه می‌کند: $$\text{gcd}(a, b) = \begin{cases} a & \text{if } b = 0 \\ \text{gcd}(b, a \pmod b) & \text{otherwise} \end{cases}$$ تقسیم عرض و ارتفاع بر ب.م.م آن‌ها نسبت ساده‌شده را به دست می‌دهد (مثلاً $1920 / 120 = 16$، ‏$1080 / 120 = 9$ که نتیجه آن $16:9$ است). افزون بر این، موتور ما تصویر شما را در یک تلرانس کسری با نسبت‌های استاندارد صنعت (۱:۱ مربع، ۱۶:۹ عریض، ۹:۱۶ استوری عمودی، ۴:۳ کلاسیک، ۳:۲ عکاسی، ۲۱:۹ فوق‌عریض) مقایسه می‌کند و مشخص می‌کند آیا تصویر با قالب‌های استاندارد پخش و نمایش دیجیتال مطابقت دارد یا خیر.

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

$$\text{Physical Width (Inches)} = \frac{\text{Pixel Width}}{\text{DPI}}$$ ابزار ما اندازه‌های فیزیکی چاپ را به‌طور خودکار بر حسب اینچ، سانتی‌متر و میلی‌متر در استانداردهای رایج چاپ تجاری محاسبه می‌کند: • ۷۲ DPI (پیش‌نویس / صفحه‌نمایش): وضوح استاندارد قدیمی صفحه رایانه؛ برای چاپ فیزیکی روی کاغذ نامناسب است. • ۱۵۰ DPI (خوب / چاپ دیجیتال): برای اسناد اداری، جزوه‌های کلاسی و پوسترهای بزرگ فضای باز که از چند متری دیده می‌شوند قابل قبول است. • ۳۰۰ DPI (عالی / افست تجاری): استاندارد طلایی برای نشر مجله، بروشورهای بازاریابی، کارت ویزیت و چاپ عکس. موتور سازگاری تصویر شما را با اندازه‌های استاندارد کاغذ (ISO 216: ‏A4، ‏A3، ‏A5؛ آمریکای شمالی: US Letter، ‏US Legal، ‏Tabloid) ارزیابی می‌کند و می‌گوید آیا فایل شما با وضوحی بسیار تیز چاپ خواهد شد یا از تاری پیکسلی رنج خواهد برد.

فراتر از ابعاد کلی فایل، طراحان UI/UX و توسعه‌دهندگان فرانت‌اند دائماً باید زیرعناصر داخلی خاصی را در اسکرین‌شات رابط اندازه بگیرند: padding درون یک دکمه، margin میان زبانه‌های ناوبری یا ابعاد یک آیکون.

ابزار ما کولیس‌های اندازه‌گیری تعاملی و ابزارهای انتخاب مستطیلی فراهم می‌کند: • اندازه‌گیری نقطه به نقطه: میان هر دو مختصات دلخواه $(x_1, y_1)$ و $(x_2, y_2)$ کلیک کنید و بکشید. ابزار فاصله اقلیدسی ($d = \sqrt{\Delta x^2 + \Delta y^2}$)، دلتای افقی ($\Delta x$)، دلتای عمودی ($\Delta y$) و زاویه ($\theta = \arctan2(\Delta y, \Delta x)$) را محاسبه می‌کند. • انتخاب کادر محدودکننده: یک کادر انتخاب مستطیلی روی هر عنصر رابط بکشید تا فوراً عرض، ارتفاع، نسبت ابعاد و کل مساحت پیکسلی آن را بررسی کنید و قطعه‌کدهای ابعاد CSS ‏(`width: ...px; height: ...px;`) را با یک کلیک کپی کنید.

بررسی حاشیه‌های تک‌پیکسلی، نرم‌سازی لبه تایپوگرافی و گذارهای رنگی به بزرگ‌نمایی شدید نیاز دارد. ابزار ما یک ذره‌بین تعاملی با بزرگ‌نمایی ۱۶ برابر دارد که مکان‌نمای شما را روی بوم تصویر دنبال می‌کند.

ذره‌بین یک شبکه پیکسلی بزرگ‌شده و واضح را نشان می‌دهد که مرزهای تک‌تک پیکسل‌ها را همراه با یک نشانگر مرکزی برجسته می‌کند. نمایشگر تشخیصی به‌صورت بی‌درنگ مختصات دقیق زیرپیکسلی $(X, Y)$، مقادیر رنگ RGB ‏(`rgb(r, g, b)`)، کدهای رنگ HEX ‏(`#RRGGBB`) و درصد شفافیت آلفا را گزارش می‌دهد. این کار نیاز به باز کردن مجموعه‌های گرافیکی سنگین دسکتاپ مانند Photoshop فقط برای نمونه‌برداری یک رنگ یا تأیید هم‌ترازی یک حاشیه را از بین می‌برد.

حجم فایل روی دیسک با ردپای حافظه در RAM مرورگر برابر نیست. یک JPEG ‏۵۰۰ کیلوبایتی با فشرده‌سازی شدید و ابعاد $8000 \times 6000$ پیکسل (۴۸ مگاپیکسل) باید پیش از نمایش به حافظه بیت‌مپ ۳۲ بیتی RGBA فشرده‌نشده باز شود:

$$\text{RAM Footprint} = 8000 \times 6000 \times 4 \text{ bytes} = 192,000,000 \text{ bytes} \approx 183\text{ MB}$$ رمزگشایی چنین تصویری روی یک دستگاه موبایل ضعیف می‌تواند به دلیل خطای کمبود حافظه (OOM) فوراً زبانه مرورگر را از کار بیندازد. ابزار ما کل مگاپیکسل‌ها، نیاز RAM برای رمزگشایی فشرده‌نشده و عمق بیت رنگ را محاسبه می‌کند و به توسعه‌دهندگان وب درباره دارایی‌های بیش از حد بزرگ که برای کاربران موبایل خطر عملکردی دارند هشدار می‌دهد.

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

ابزار «اندازه‌گیری ابعاد و DPI» ما ۱۰۰٪ به‌صورت محلی درون مرورگر وب شما اجرا می‌شود. این ابزار بر پایه HTML5 Canvas و TypeScript سمت کاربر ساخته شده و همه رمزگشایی تصویر، ردیابی مختصات، محاسبات فاصله مثلثاتی و تبدیل‌های DPI چاپ صرفاً در RAM رایانه شما انجام می‌شوند. هیچ فایل یا تصویری هرگز از طریق شبکه ارسال نمی‌شود و این محرمانگی کامل و انطباق کامل با ممیزی‌های امنیتی سازمانی را تضمین می‌کند.