الصور والصور · محول الصور والضاغط
كيف يقوم canvas.toBlob بتحويل PNG إلى WebP داخل متصفحك
· كيف يعمل
تنسيقات الصور قماش webp
محول صور المتصفح عبارة عن وحدة فك ترميز وصورة نقطية وأداة تشفير مترابطة معًا، ويتم دمج السلسلة بأكملها في المتصفح. يتبع هذا المنشور PNG من خلال فك التشفير واللوحة القماشية وtoBlob إلى ملف WebP، ويلاحظ ما تم فقده في الطريق.
من أين يأتي WebP في حالة عدم وجود خادم - السؤال الملموس وراء المحول الذي يعمل دون اتصال
لا يأتي WebP من قائمة انتظار التحويل من جانب الخادم. يحتوي متصفحك بالفعل على وحدات فك ترميز الصور وسطح بكسل قابل للرسم وأجهزة تشفير؛ يقوم المحول ToolAcre بتوصيلهم. ولهذا السبب يمكن تحويل PNG في علامة التبويب الخاصة بك بعد تحميل الموقع. يشير "عدم التحميل" إلى الصورة المصدر ومخرجات التحويل، وليس إلى موقع الويب الذي لا يحتوي على أي نشاط على الشبكة على الإطلاق.
الخطوة الأولى: فك التشفير - كيف يحول المتصفح PNG بايت إلى صورة نقطية RGBA، ولماذا ينتهي كل تنسيق بنفس الشبكة
أولاً يتم فك تشفير PNG إلى صورة نقطية. يحدد ضغط PNG واختيارات اللوحة وبيانات تعريف اللون كيف تتحول وحدات البايت إلى وحدات بكسل، لكن اللوحة القماشية تعمل على البيانات النقطية التي تم فك تشفيرها، وليس على أجزاء من ملف PNG. تنتج لقطة الشاشة 1600×900 1.44 مليون موضع بكسل حتى لو كان الملف نفسه أصغر بكثير. ToolAcre يستخدم createImageBitmap ويفرض ميزانية البكسل؛ تعتبر الصورة الكبيرة التي تم فك تشفيرها مشكلة في الذاكرة قبل أن تكون مشكلة في التحميل.
الخطوة الثانية: اللوحة القماشية كمنطقة مرحلية - رسم الصورة النقطية على لوحة قماشية أو OffscreenCanvas ذات أبعاد متطابقة
يتم رسم الصورة النقطية في لوحة قماشية أو OffscreenCanvas بأبعاد الإخراج المطلوبة. إذا تطابقت هذه الأبعاد مع المصدر ولم يتم اختيار أي اقتصاص، فسيقوم drawImage بتجهيز وحدات البكسل للتشفير؛ إذا تغيرت الأبعاد، فإن اللوحة القماشية تعيد تشكيلها وقد تتغير قيم البكسل قبل بدء تشفير WebP. يخدم روتين العرض نفسه المعاينة التفاعلية ومسار العامل، مما يمنع هذين المخرجين من اتباع خوارزميات غير ذات صلة.
الخطوة الثالثة: toBlob بالنوع والجودة MIME — كيفية تحديد برنامج التشفير، وما يتحكم فيه رقم الجودة، ولماذا يتم تجاهله لـ PNG
على اللوحة القماشية العادية، يطلب toBlob(callback, "image/webp,quality) من المتصفح تشفير WebP ويعاود الاتصال باستخدام Blob. عندما يكون OffscreenCanvas متاحًا، يستخدم ToolAcre تحويل ToBlob({type,quality}) لنفس المهمة. تتحكم الجودة في برنامج تشفير ضائع؛ إنه ليس وعدًا بعدد بايت محدد. تصدير PNG لا يفقد البيانات ولا تقوم معلمة الجودة الخاصة به بتعيين مستوى ضغط يشبه JPEG. قم دائمًا بفحص التنسيق الفعلي الذي تم إرجاعه، لأن توفر برنامج التشفير يعتمد على المتصفح.
ما يتجاهله المسار - البيانات الوصفية، وملفات تعريف الألوان، ودقة 16 بت، ولماذا يعد ذلك من خصائص التقنية وليس خطأً
لا يمكن لإعادة تشفير البيانات النقطية التي تم فك تشفيرها الحفاظ على كل الحقائق الموجودة في الحاوية الأصلية PNG. قد لا تتمكن أجزاء النص أو بيانات تعريف الكاميرا أو المحرر وبعض تفاصيل ملف تعريف الألوان وعمق بت المصدر من البقاء على قيد الحياة في رحلة ذهابًا وإيابًا على القماش؛ لا تصبح القنوات ذات 16 بت 16 بت WebP لمجرد أن الإدخال يحملها. يمكن لـ WebP الحفاظ على الشفافية عندما يدعمها برنامج التشفير، بينما يتطلب تصدير JPEG ملء المناطق الشفافة. لا يمكن لحجم الملف وحده إظهار ما إذا كان التحويل قد احتفظ بالخطوط الدقيقة أو الألوان.
مثال عملي: لقطة شاشة 1.8 MB PNG إلى WebP - متابعة الملف خلال الخطوات الثلاث وقراءة النتيجة
خذ بعين الاعتبار لقطة شاشة 1.8 MB PNG تحتوي على نص وتدرجات وزاوية شفافة. قم بفك تشفيرها، واترك الأبعاد دون تغيير، وحدد WebP، وقم بتصدير حجم Blob ومقارنته ونوع MIME بالأصل. يتم قياس الحجم الناتج، ولا يمكن التنبؤ به: قد يتم ضغط لقطات الشاشة النظيفة بشكل جيد، في حين قد لا يتم ضغط المحتوى الصاخب. قم بتكبير الحروف الرسومية الصغيرة والزاوية الشفافة قبل قبول الملف الأصغر. إذا أصبح نص واجهة المستخدم الواضح غير واضح، فاحتفظ بـ PNG أو اضبط جودة برنامج التشفير بدلاً من الادعاء بأن WebP هو الأفضل دائمًا.
ما لا يغطيه هذا — الصور المتحركة، والتنسيقات التي لا يستطيع المتصفح فك تشفيرها، وإعدادات التشفير التي لا يكشفها API
لا يعد خط الأنابيب هذا بالاحتفاظ بالرسوم المتحركة، أو HEIC فك التشفير على كل جهاز أو التحكم الكامل في العينات الفرعية ومعلمات الجهد الخاصة بجهاز التشفير WebP. ولا يمكنه أيضًا استرداد التفاصيل المفقودة بالفعل في مصدر JPEG عن طريق حفظه كـ PNG أو WebP. يمكن أن تؤدي دورات فك التشفير المتكررة/re-encode إلى تراكم الخسارة. احتفظ بنسخة أصلية واستخدم تنسيقات الإدخال المدعومة /output المدرجة في صفحة الأداة الفعلية بدلاً من افتراض أن كل تنسيق يعرفه نظام التشغيل الخاص بك مقبول هنا.
الخلاصة: ثلاث خطوات، بدون أي تحميلات - كيف يقوم محول الصور والضاغط بتشغيل خط الأنابيب هذا على جهازك
الآلية هي فك التشفير ← الرسم ← التشفير، ويتم تنفيذها باستخدام واجهات برمجة تطبيقات المتصفح وبدون تحميل الصور. يعرض ToolAcre التنسيق والأبعاد المستهدفة حتى تتمكن من معرفة ما إذا كنت تقوم فقط بتغيير الحاوية أو تغيير حجم وحدات البكسل أيضًا. اختبر لقطة شاشة تمثيلية واحدة في Image Converter & Compressor قبل معالجة دفعة كاملة، ثم افحص النتيجة التي تم تنزيلها بالحجم الذي سيراه الأشخاص.