نحوه عملکرد تبدیل تصویر مبتنی بر مرورگر
هر تبدیل یک pipeline چهار مرحلهای است که کاملاً در JavaScript اجرا میشود. هیچ کتابخانه codec دانلود نمیشود و هیچ سروری درگیر نیست. Canvas API خود مرورگر رمزگشایی، تغییر اندازه و رمزگذاری مجدد را در حافظه انجام میدهد، سپس یک Blob به شما تحویل میدهد که صفحه میتواند آن را پیشنمایش یا zip کند. چون هر مرحله داخل sandbox تب قرار دارد، فایلهای اصلی هرگز به شبکه نمیرسند.
- هر فایل آپلودشده را بهعنوان Blob بخوانید و یک object URL ایجاد کنید تا مرورگر بتواند آن را بهصورت محلی رمزگشایی کند، بدون کپی کردن بایتها به یک سرور یا ذخیره آنها روی دیسک.
- تصویر رمزگشاییشده را روی یک عنصر Canvas offscreen رسم کنید و محدودیت تغییر اندازه را در حالی که نسبت ابعادی اصلی حفظ میشود اعمال کنید. اگر حداکثر عرض یا حداکثر بعد را انتخاب کردهاید، کاهش مقیاس اینجا اتفاق میافتد.
canvas.toBlob(callback, targetMimeType, quality)را فراخوانی کنید تا پیکسلها رمزگذاری مجدد شوند. خروجی PNG همیشه بیاتلاف است؛ JPEG و WebP از نوار کیفیت پیروی میکنند که مستقیماً به تنظیم کوانتیزاسیون 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 هنوز پشتیبانی نمیشود زیرا encoder AVIF Canvas API فقط در Chrome 105 و بالاتر حاضر است و از Safari و Firefox غایب است. یک مسیر AVIF مبتنی بر WebAssembly برای v1.1 برنامهریزی شده تا این ویژگی در هر مرورگر مدرن کار کند.
آیا این روی دستگاه من انجام میشود؟
بله، کاملاً. صفحه از Canvas API بومی مرورگر و Web File API برای رمزگشایی و رمزگذاری مجدد هر تصویر در حافظه استفاده میکند. هیچ داده تصویری به سرور ارسال نمیشود، هیچ آپلود موقتی، هیچ تور رفتوبرگشت به ابر. میتوانید خودتان تأیید کنید: DevTools را باز کنید، به پنل Network بروید و یک تبدیل اجرا کنید. تنها درخواستهای خروجی که میبینید بارگذاری صفحه اولیه و فراخوانیهای تبلیغاتی هستند. هیچ چیز شبیه تصویر از تب خارج نمیشود.
معامله کیفیت بین PNG و JPEG چیست؟
PNG یک فرمت بیاتلاف است. هر پیکسل دقیقاً از چرخه رمزگذاری زنده میماند، که PNG را برای اسکرینشاتها، ضبطهای UI و هر تصویری با لبههای تیز یا مناطق بزرگ رنگ تخت مناسب میکند. JPEG از فشردهسازی DCT استفاده میکند و جزئیات ظریفی را که چشم به ندرت متوجه میشود حذف میکند، که آن را برای عکسها مناسب میکند. کیفیت ۰.۸ یک نقطه شیرین رایج است که در آن تفاوت بصری از اصل سخت است اما فایل ۴ تا ۶ برابر کوچکتر از معادل PNG است. WebP میتواند در حالت بیاتلاف و با اتلاف کار کند؛ نوار کیفیت اینجا encoder با اتلاف را هدایت میکند و در کیفیت ۰.۸۵ WebP معمولاً ۲۵ تا ۳۰٪ از JPEG در محتوای عکس طبیعی بهتر عمل میکند.
پشتیبانی AVIF چه زمانی میآید؟
رمزگذاری AVIF از طریق canvas.toBlob(…, 'image/avif') امروز فقط در Chrome 105 و بالاتر کار میکند؛ Safari و Firefox آن را بهصورت بومی پشتیبانی نمیکنند. یک نسخه v1.1 یک مسیر AVIF با opt-in با استفاده از یک encoder سبک WebAssembly اضافه خواهد کرد تا این ویژگی در هر مرورگر مدرن بدون انتظار برای برابری بومی کار کند. تا آن زمان، گزینه AVIF در انتخابگر فرمت بهعنوان 'بهزودی' نشان داده میشود و encoder WebP جایگزین توصیهشده است. WebP از هر مرورگر ارسالشده از سال ۲۰۲۱ به بعد پشتیبانی میشود و فایلهایی در ۱۰ تا ۲۰٪ از اندازه AVIF برای اکثر تصاویر دنیای واقعی تولید میکند.
تصاویرتان را بکشید، یک فرمت انتخاب کنید، تبدیل کنید. همه چیز در تب شما اجرا میشود. بدون آپلود، بدون حساب کاربری، بدون انتظار در صف سرور.