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

نحوه عملکرد تغییر اندازه تصویر مبتنی بر مرورگر

هر تغییر اندازه یک pipeline کوتاه است که کاملاً در JavaScript اجرا می‌شود. هیچ کتابخانه codec دانلود نمی‌شود و هیچ سروری درگیر نیست. Canvas API خود مرورگر فایل را رمزگشایی می‌کند، با اندازه هدف بازترسیم می‌کند و در حافظه رمزگذاری مجدد می‌کند، سپس یک Blob به شما تحویل می‌دهد که صفحه می‌تواند پیش‌نمایش یا zip کند. چون هر مرحله داخل sandbox تب قرار دارد، فایل‌های اصلی هرگز به شبکه نمی‌رسند.

1. هر فایل آپلودشده را به‌عنوان Blob بخوانید و یک object URL ایجاد کنید تا مرورگر بتواند آن را به‌صورت محلی رمزگشایی کند، بدون کپی کردن بایت‌ها به یک سرور یا ذخیره آن‌ها روی دیسک.
2. ابعاد هدف را از حالت انتخابی شما محاسبه می‌کند — یک سقف برای بلندترین ضلع، یک عرض و ارتفاع دقیق، یا یک مقیاس درصدی. قفل نسبت ابعادی هنگام ویرایش یک فیلد، تناسب را درست نگه می‌دارد.
3. یک Canvas offscreen با اندازه هدف می‌سازد و ctx.drawImage(source, 0, 0, width, height) را برای بازترسیم پیکسل‌های رمزگشایی‌شده فراخوانی می‌کند. مرورگر interpolation را که نتیجه مقیاس‌بندی‌شده را هموار می‌کند مدیریت می‌کند.
4. canvas.toBlob را برای رمزگذاری مجدد در فرمت منبع فراخوانی می‌کند. PNG بی‌اتلاف می‌ماند، JPEG و WebP با تنظیم کیفیت بالا رمزگذاری مجدد می‌شوند. سپس صفحه یک کارت قبل/بعد نشان می‌دهد و دانلود منفرد یا یک ZIP ساخته‌شده در حافظه با fflate ارائه می‌دهد.

چرا اندازه تصاویر را تغییر دهیم؟

• تصاویر بیش از حد بزرگ رایج‌ترین دلیل کندی صفحات هستند. یک عکس 4000×3000 از گوشی که مستقیم در یک چیدمان ۶۰۰ پیکسل عرض قرار می‌گیرد، تقریباً چهل برابر بیشتر پیکسل از آنچه صفحه می‌تواند نشان دهد ارسال می‌کند. محدود کردن بلندترین ضلع به ۱۶۰۰ px قبل از آپلود، وزن صفحه را به شدت کاهش می‌دهد و LCP در Core Web Vitals را بهبود می‌بخشد.
• فرم‌های آپلود ابعاد سختگیرانه دارند. اسلات‌های آواتار، پورتال‌های عکس هویت، فهرست‌های بازار و کارت‌های OG شبکه‌های اجتماعی همه اندازه‌های پیکسلی خاص می‌خواهند: ۱۲۰۰×۶۳۰ برای پیش‌نمایش Open Graph، ۵۱۲×۵۱۲ برای آیکون برنامه، ۱۵۰×۱۵۰ برای تصویر بندانگشتی. عدد را دقیق بزنید و از چرخه آپلود رد‌شده اجتناب کنید.
• ابزارهای ایمیل و چت به‌طور خاموش هر چیز بزرگی را دوباره فشرده می‌کنند که می‌تواند یک اسکرین‌شات تمیز را خراب کند. تغییر اندازه به عرض منطقی توسط خودتان، نتیجه را قابل پیش‌بینی نگه می‌دارد به‌جای اینکه به pipeline با اتلاف شخص دیگری واگذار شود.
• سازگاری دسته‌ای برای گالری‌ها و کاتالوگ‌ها اهمیت دارد. اجرای یک پوشه از عکس‌های با اندازه‌های مختلط روی یک هدف ۸۰۰×۸۰۰ یکسان به این معناست که هر کارت در گرید ردیف می‌شود، بدون هیچ تصویر غول‌پیکر سرگردانی که چیدمان را خراب کند.

کاربردهای رایج

تغییر اندازه هر بار که ابعاد منبع و انتظارات مقصد مطابقت ندارند مطرح می‌شود. سه الگو بارها ظاهر می‌شوند.

• آماده‌سازی عکس‌های محصول برای یک فروشگاه Shopify یا WooCommerce. یک پوشه از اصل‌های دوربین با ۴۰۰۰ پیکسل به بلندترین ضلع ۱۶۰۰ px محدود می‌شود تا ویترین فروشگاه سریع بارگذاری شود، در حالی که نسبت ابعادی دست‌نخورده می‌ماند.
• تولید دارایی‌های شبکه اجتماعی و برنامه از یک فایل اصلی. ۱۲۰۰×۶۳۰ دقیق را برای کارت Open Graph تنظیم کنید، سپس ۵۱۲×۵۱۲ برای آیکون برنامه، و هر کدام را با چند کلیک بدون باز کردن یک ویرایشگر سنگین صادر کنید.
• فشرده کردن دسته‌ای اسکرین‌شات‌های QA یا پشتیبانی قبل از پیوست کردن به یک تیکت. مقیاس‌بندی یک پوشه ۵۰ شاتی به ۵۰٪ معمولاً اندازه آرشیو را تقریباً سه‌چهارم قبل از رفتن به یک bug tracker کاهش می‌دهد.

یک مثال عملی: عکس 4000 px به تصویر وب 1600 px

یک عکس 4000×3000 مستقیم از گوشی یک payload رایج است که بسیار بزرگ‌تر از نیاز هر چیدمان وبی است. این یک معیار منصفانه برای آنچه تغییر اندازه صرفه‌جویی می‌کند است.

عکس را در ناحیه آپلود بکشید، حالت را روی محدود کردن بلندترین ضلع رها کنید، و مقدار را روی ۱۶۰۰ تنظیم کنید. pipeline Canvas تصویر را با حفظ نسبت ابعادی با ابعاد ۱۶۰۰×۱۲۰۰ بازترسیم می‌کند، سپس در فرمت اصلی رمزگذاری مجدد می‌کند. کارت خروجی ابعاد جدید و اندازه فایل را نشان می‌دهد که برای یک JPEG معمولی از چند مگابایت به چند صد کیلوبایت کاهش می‌یابد. برای گرفتن فایل منفرد روی دانلود در کارت کلیک کنید، یا اگر چند تصویر را در یک مرحله تغییر اندازه دادید روی دانلود .zip کلیک کنید. کل چرخه، از کشیدن تا دانلود، در کسری از ثانیه اجرا می‌شود و پس از بارگذاری خود صفحه صفر پهنای باند مصرف می‌کند.

چه حالت‌های تغییر اندازه‌ای موجود است؟

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

آیا این روی دستگاه من انجام می‌شود؟

بله، کاملاً. صفحه از Canvas API بومی مرورگر و Web File API برای رمزگشایی، بازترسیم و رمزگذاری مجدد هر تصویر در حافظه استفاده می‌کند. هیچ داده تصویری به سرور ارسال نمی‌شود، هیچ آپلود موقتی، هیچ تور رفت‌وبرگشت به ابر. می‌توانید خودتان تأیید کنید: DevTools را باز کنید، به پنل Network بروید، و یک تغییر اندازه اجرا کنید. تنها درخواست‌های خروجی که می‌بینید بارگذاری صفحه اولیه و فراخوانی‌های تبلیغاتی هستند. هیچ چیز شبیه تصویر از تب خارج نمی‌شود، که آن را برای اسناد هویتی اسکن‌شده، تصاویر پزشکی و سایر موادی که هرگز نمی‌خواهید آپلود کنید ایمن می‌کند.

آیا تغییر اندازه کیفیت را کاهش می‌دهد؟

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

کدام فرمت‌های فایل پشتیبانی می‌شوند؟

در طرف ورودی، هر فرمتی که مرورگر می‌تواند رمزگشایی کند قبول می‌شود: PNG، JPEG، WebP، GIF و BMP تقریباً هر فایلی که یک گوشی، دوربین یا ابزار اسکرین‌شات تولید می‌کند را پوشش می‌دهند. خروجی فرمت منبع را حفظ می‌کند جایی که encoder Canvas آن را پشتیبانی می‌کند — PNG، JPEG و WebP مستقیم round-trip می‌کنند. GIF و BMP که Canvas API می‌تواند رمزگشایی کند اما نمی‌تواند رمزگذاری مجدد کند، به‌جای آن به‌عنوان PNG بی‌اتلاف ذخیره می‌شوند. نام فایل تغییر اندازه‌یافته شامل ابعاد جدید می‌شود (مثلاً photo-1600x1200.jpg) تا دسته به راحتی قابل مرتب‌سازی باشد.

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