كيف يعمل تحويل الصور في المتصفح
كل تحويل هو خط معالجة من أربع خطوات يعمل كليًا بـ JavaScript. لا تُنزَّل أي مكتبة ترميز — تتولى Canvas API الأصلية للمتصفح فك الترميز وإعادة الترميز.
- يقرأ كل ملف مرفوع بوصفه Blob وينشئ عنوان URL للكائن لكي يتمكن المتصفح من فك ترميزه دون نسخ بايتات إلى خادم.
- يرسم الصورة المفكوكة على عنصر Canvas خارج الشاشة، مطبّقًا قيد تغيير الحجم مع الحفاظ على نسبة العرض إلى الارتفاع الأصلية.
- يستدعي
canvas.toBlob(callback, targetMime, quality)لإعادة ترميز وحدات البكسل. مخرج PNG دائمًا بلا ضياع؛ ويستجيب JPEG و WebP لمنزلق الجودة. - يعرض صورة مصغرة قبل/بعد مع أبعاد المخرج وحجم الملف، ثم يوفر زر تنزيل لكل صورة أو ملف ZIP واحد للدفعة بأكملها.
لماذا تحويل تنسيقات الصور؟
- يقلل التبديل من PNG إلى WebP أحجام الملفات النموذجية بنسبة 25–35% دون فقدان مرئي للجودة عند 0.8، مما يخفض مباشرةً وزن الصفحة ويحسّن نقاط LCP في Core Web Vitals.
- يحتفظ PNG بالشفافية التي يُلغيها JPEG، لذا يُصوِّر PNG→JPEG وحدات البكسل الشفافة على خلفية بيضاء — مفيد حين لا يقبل الوجهة (البريد الإلكتروني، نظام CMS قديم) ملفات PNG.
- للمنصات الاجتماعية وشبكات الإعلانات متطلبات تنسيق صارمة: يُفضّل Facebook وLinkedIn JPEG للصور؛ ويتعامل خط معاينة OG في Twitter مع WebP؛ وبعض خوادم الإعلانات ترفض المواد الإبداعية غير JPEG.
- توحيد دُفعة من صور بتنسيقات مختلطة (لقطات PNG، صور JPEG، تصديرات WebP) إلى تنسيق واحد قبل الرفع إلى CMS أو DAM يُلغي تعقيد معالجة التنسيقات في خط بيانات الاستيعاب.
التطبيقات الشائعة
يظهر تحويل التنسيق حين لا يتطابق تنسيق المصدر مع توقعات الوجهة.
- إعداد صور المنتجات لمتجر Shopify أو WooCommerce — تحويل الأصول JPEG إلى WebP بجودة 0.85 للواجهة، مع الاحتفاظ بـ PNG للتصدير للطباعة.
- تحويل تصديرات PNG من المصممين إلى JPEG أو WebP قبل تضمينها في بناء React أو Next.js، لكي يبدأ محسِّن الصور في الإطار من مصدر أصغر.
- معالجة دُفعية لمجلد لقطات شاشة من دورة QA — PNG إلى JPEG بجودة 0.9 لتقليص حجم الأرشيف قبل إرفاقه بتذكرة متتبِّع الأخطاء.
مثال عملي: PNG بحجم 2 ميغابايت → WebP بحجم 300 كيلوبايت
صورة PNG بطولية بحجم 2 ميغابايت وأبعاد 2400×1600 بكسل هي حمل شائع على صفحات الهبوط التسويقية.
أسقط ملف PNG هنا، اختر WebP تنسيقًا مستهدفًا، اضبط الجودة على 0.8، واختياريًا اضبط أقصى عرض على 1200 لتقليص أبعاد البكسل للنصف. يرسم خط Canvas الصورة عند 1200×800 (مع الحفاظ على النسبة)، ويعيد ترميزها إلى WebP، وتعرض بطاقة المخرج النتيجة — عادةً 280–320 كيلوبايت، بانخفاض 85%. انقر تنزيل على البطاقة أو نزِّل ملف ZIP دفعيًا إذا حوَّلت عدة صور.
ما التنسيقات المدعومة؟
صور المصدر: أي تنسيق يمكن للمتصفح فك ترميزه — PNG و JPEG و WebP و GIF و BMP مقبولة جميعها. تنسيقات المخرجات: PNG (بلا ضياع) و JPEG و WebP. مخرج AVIF غير مدعوم بعد لأن مشفِّر Canvas API متاح فقط في Chrome 105+ وغائب في Safari وFirefox؛ ومن المخطط إضافة مسار AVIF مستند إلى WASM في إصدار مستقبلي.
هل يحدث هذا على جهازي؟
نعم. تستخدم الصفحة Canvas API الأصلية للمتصفح وWeb File API. لا تُرسَل بيانات الصور إلى أي خادم؛ يعمل خط التحويل كليًا في علامة تبويب المتصفح الخاصة بك. يمكنك التحقق من ذلك بفتح DevTools ومراجعة لوحة Network — لن تجد طلبات صادرة بعد تحميل الصفحة.
ما الفرق في الجودة بين PNG و JPEG؟
PNG تنسيق بلا ضياع — كل بكسل يخرج من دورة الترميز بالضبط. يستخدم JPEG ضغط DCT ويتخلى عن التفاصيل الدقيقة التي نادرًا ما ينتبه إليها العين؛ والجودة 0.8 هي نقطة التوازن الشائعة حيث يكاد الفرق البصري عن الأصل لا يُلحَظ من قِبَل معظم المشاهدين لكن الملف أصغر 4–6 مرات من PNG. يمكن لـ WebP العمل في وضعَي بلا ضياع ومع ضياع؛ ومنزلق الجودة هنا يُشغِّل المشفِّر ذا الضياع، وتتفوق الجودة 0.85 على JPEG 0.85 عادةً بنسبة 25–30% في الصور الطبيعية.
متى سيصل دعم AVIF؟
يعمل ترميز AVIF عبر canvas.toBlob(…, 'image/avif') اليوم في Chrome 105+ فقط؛ لا يدعمه Safari ولا Firefox. سيُضيف إصدار مستقبلي مسار AVIF اختياريًا باستخدام مشفِّر WebAssembly خفيف الوزن لكي تعمل الميزة في جميع المتصفحات. حتى ذلك الحين، يظهر خيار AVIF بعبارة "قريبًا" ومشفِّر WebP (المدعوم عالميًا في المتصفحات الحديثة) هو البديل الموصى به من الجيل التالي.
أسقط صورك، اختر تنسيقًا، حوِّل. كل شيء يعمل في علامة تبويبك — دون رفع، ودون حساب، ودون انتظار خادم.