نحوه عملکرد تبدیل تصویر مبتنی بر مرورگر
هر تبدیل یک pipeline چهار مرحلهای است که در مرورگر شما اجرا میشود. برای JPEG و PNG، Canvas API خود مرورگر مستقیماً رمزگذاری را انجام میدهد. برای WebP در Safari و AVIF در هر مرورگری، صفحه یک کدک سبک WebAssembly را در صورت نیاز بارگذاری میکند — همچنان همه چیز محلی است، تصاویر شما هرگز دستگاه را ترک نمیکنند.
- هر فایل آپلودشده را بهعنوان Blob بخوانید و یک object URL ایجاد کنید تا مرورگر بتواند آن را بهصورت محلی رمزگشایی کند، بدون کپی کردن بایتها به یک سرور یا ذخیره آنها روی دیسک.
- تصویر رمزگشاییشده را روی یک عنصر Canvas offscreen رسم کنید و محدودیت تغییر اندازه را در حالی که نسبت ابعادی اصلی حفظ میشود اعمال کنید. اگر حداکثر عرض یا حداکثر بعد را انتخاب کردهاید، کاهش مقیاس اینجا اتفاق میافتد.
- برای رمزگذاری مجدد پیکسلها برای PNG، JPEG و WebP کروم/فایرفاکس،
canvas.toBlob(callback, targetMimeType, quality)را فراخوانی کنید. برای WebP سافاری و رمزگذاری AVIF، یک worker کدک WebAssembly در اولین استفاده بارگذاری میشود و رمزگذاری را در یک نخ پسزمینه انجام میدهد. خروجی PNG همیشه بیاتلاف است؛ JPEG، WebP و AVIF از نوار کیفیت پیروی میکنند که مستقیماً به تنظیم کوانتیزاسیون encoder نگاشت میشود. - یک تصویر بندانگشتی قبل/بعد با ابعاد خروجی و اندازه فایل نشان دهید، سپس یک دکمه دانلود به ازای هر تصویر یا یک ZIP واحد برای کل دسته ارائه دهید. ZIP در حافظه با استفاده از fflate، یک کتابخانه ۸ کیلوبایتی که کاملاً در تب اجرا میشود، ساخته میشود.
چرا فرمتهای تصویر را تبدیل کنیم؟
- تبدیل از PNG به WebP اندازه فایلهای معمولی را ۲۵ تا ۳۵٪ با هیچ افت کیفیت قابل مشاهدهای در کیفیت ۰.۸ کاهش میدهد، که وزن صفحه را مستقیماً کم میکند و نمرات LCP در Core Web Vitals را بهبود میبخشد. در یک صفحه جزئیات محصول معمولی با هشت تصویر hero، این تفاوت بین رنگآمیزی ۴ مگابایتی و ۲.۶ مگابایتی است.
- PNG شفافیت را در حالی که JPEG آن را حذف میکند حفظ میکند. تبدیل PNG به JPEG پیکسلهای شفاف را روی پسزمینه سفید رندر میکند، که دقیقاً همان چیزی است که میخواهید وقتی مقصد (یک کلاینت ایمیل، یک CMS قدیمیتر، یک قالب چاپی) اصلاً PNG را قبول نمیکند.
- پلتفرمهای اجتماعی و شبکههای تبلیغاتی الزامات فرمت سختگیرانه دارند. Facebook و LinkedIn برای آپلود عکس JPEG را ترجیح میدهند، pipeline پیشنمایش OG توییتر WebP را میپذیرد و برخی سرورهای تبلیغاتی برنامهریزیشده هر چیزی که JPEG نباشد را رد میکنند. یک مرحله تبدیل سریع قبل از آپلود از بازگشتوبرگشت آگهی رد شده جلوگیری میکند.
- استانداردسازی یک دسته از تصاویر با فرمتهای مختلط (اسکرینشاتهای PNG، عکسهای JPEG، صادرات WebP از طراح) به یک فرمت خروجی واحد قبل از آپلود به یک CMS یا DAM، شاخههای مدیریت فرمت را از pipeline ingest حذف میکند. یک فرمت ورودی، یک فرمت خروجی، مسیرهای کد شرطی بسیار کمتر در پاییندستی.
کاربردهای رایج
تبدیل فرمت هر بار که فرمت منبع و انتظارات مقصد مطابقت ندارند مطرح میشود. سه الگویی که بارها میبینیم.
- آمادهسازی عکسهای محصول برای یک فروشگاه Shopify یا WooCommerce. اصلهای JPEG برای ویترین عمومی به WebP با کیفیت ۰.۸۵ تبدیل میشوند، در حالی که نسخههای PNG برای صادرات آماده چاپ و فهرستهای بازار که هنوز WebP را رد میکنند کنار میگذارند.
- تبدیل صادرات PNG ارائهشده توسط طراح به JPEG یا WebP قبل از ورود به یک build React یا Next.js. pipeline تصویر فریمورک یک منبع کوچکتر میگیرد و bundle پروداکشن بایتهای کمتری در هر مسیر ارسال میکند.
- پردازش دستهای یک پوشه از اسکرینشاتهای یک اجرای QA. PNG به JPEG با کیفیت ۰.۹ معمولاً یک آرشیو ۵۰ اسکرینشات را از حدود ۱۲۰ مگابایت به زیر ۲۰ مگابایت قبل از پیوست کردن به یک تیکت bug tracker کاهش میدهد.
یک مثال عملی: ۲ مگابایت PNG به ۳۰۰ کیلوبایت WebP
یک تصویر hero PNG ۲ مگابایتی با ابعاد ۲۴۰۰×۱۶۰۰ پیکسل یک payload رایج در صفحات فرود بازاریابی است. این یک benchmark خوب برای آنچه تبدیل در یک صفحه واقعی ذخیره میکند است.
PNG را در ناحیه آپلود بکشید، WebP را بهعنوان فرمت هدف انتخاب کنید، کیفیت را روی ۰.۸ تنظیم کنید و حداکثر عرض را روی ۱۲۰۰ تنظیم کنید تا ابعاد پیکسل را نصف کنید. pipeline Canvas تصویر را با ابعاد ۱۲۰۰×۸۰۰ با حفظ نسبت رسم میکند، سپس به WebP رمزگذاری مجدد میکند. کارت خروجی نتیجه را نشان میدهد، معمولاً در محدوده ۲۸۰ تا ۳۲۰ کیلوبایت، که تقریباً ۸۵٪ کاهش نسبت به اصل است. روی دانلود در کارت کلیک کنید تا فایل واحد را بگیرید، یا روی دانلود .zip در پایین پنل کلیک کنید اگر چندین تصویر را در یک مرحله تبدیل کردید. کل چرخه، از کشیدن تا دانلود، برای تصویری با این اندازه در چند صد میلیثانیه اجرا میشود و صفر پهنای باند پس از بارگذاری خود صفحه مصرف میکند.
کدام فرمتها پشتیبانی میشوند؟
در طرف ورودی، هر فرمتی که مرورگر میتواند رمزگشایی کند قبول میشود: PNG، JPEG، WebP، GIF و BMP تقریباً هر فایلی که یک طراح یا ابزار اسکرینشات تولید میکند را پوشش میدهند. فرمتهای خروجی PNG (همیشه بیاتلاف)، JPEG، WebP و AVIF هستند. خروجی AVIF از طریق یک encoder WebAssembly که در هر مرورگری در صورت نیاز بارگذاری میشود پشتیبانی میگردد — بدون نیاز به encoder Canvas بومی.
آیا این روی دستگاه من انجام میشود؟
بله، کاملاً. صفحه از Canvas API بومی مرورگر و Web File API برای رمزگشایی و رمزگذاری مجدد هر تصویر در حافظه استفاده میکند. هیچ داده تصویری به سرور ارسال نمیشود، هیچ آپلود موقتی، هیچ تور رفتوبرگشت به ابر. میتوانید خودتان تأیید کنید: DevTools را باز کنید، به پنل Network بروید و یک تبدیل اجرا کنید. تنها درخواستهای خروجی که میبینید بارگذاری صفحه اولیه و فراخوانیهای تبلیغاتی هستند. هیچ چیز شبیه تصویر از تب خارج نمیشود.
معامله کیفیت بین PNG و JPEG چیست؟
PNG یک فرمت بیاتلاف است. هر پیکسل دقیقاً از چرخه رمزگذاری زنده میماند، که PNG را برای اسکرینشاتها، ضبطهای UI و هر تصویری با لبههای تیز یا مناطق بزرگ رنگ تخت مناسب میکند. JPEG از فشردهسازی DCT استفاده میکند و جزئیات ظریفی را که چشم به ندرت متوجه میشود حذف میکند، که آن را برای عکسها مناسب میکند. کیفیت ۰.۸ یک نقطه شیرین رایج است که در آن تفاوت بصری از اصل سخت است اما فایل ۴ تا ۶ برابر کوچکتر از معادل PNG است. WebP میتواند در حالت بیاتلاف و با اتلاف کار کند؛ نوار کیفیت اینجا encoder با اتلاف را هدایت میکند و در کیفیت ۰.۸۵ WebP معمولاً ۲۵ تا ۳۰٪ از JPEG در محتوای عکس طبیعی بهتر عمل میکند.
خروجی AVIF چگونه کار میکند؟
رمزگذاری AVIF از یک کدک WebAssembly استفاده میکند که اولین بار که فرمت AVIF را انتخاب میکنید در صورت نیاز بارگذاری میشود — بدون پلاگین، بدون پرچم مرورگر، بدون انتظار برای انتشار آینده کروم. باینری WASM از سرور خودمان سرو میشود، تصویر شما را کاملاً در یک نخ پسزمینه رمزگذاری میکند و یک image/avif بلاب استاندارد آماده دانلود برمیگرداند. تنها درخواست شبکه، واکشی یکباره خود کدک است؛ هیچ داده تصویری هرگز دستگاه شما را ترک نمیکند. پس از بارگذاری، encoder برای جلسه کش میشود تا تبدیالت بعدی سریعتر باشند. فایلهای AVIF معمولاً ۲۰–۳۰٪ کوچکتر از WebP و ۵۰٪ کوچکتر از JPEG در کیفیت معادل هستند، که آنها را به بهترین انتخاب برای سایتهای حساس به عملکرد تبدیل میکند.
تصاویرتان را بکشید، یک فرمت انتخاب کنید، تبدیل کنید. همه چیز در تب شما اجرا میشود. بدون آپلود، بدون حساب کاربری، بدون انتظار در صف سرور.