كيف يعمل تحويل الصور في المتصفح
كل تحويل هو خط معالجة من أربع خطوات يعمل في متصفحك. بالنسبة لـ JPEG و PNG، يتولى Canvas API الأصلي الترميز مباشرة. بالنسبة لـ WebP على Safari و AVIF على كل المتصفحات، تُحمَّل صفحة ويب كوديك WebAssembly خفيف الوزن عند الطلب — مع بقاء كل شيء محليًا، صورك لا تغادر جهازك أبدًا.
- يقرأ كل ملف مرفوع بوصفه Blob وينشئ عنوان URL للكائن لكي يتمكن المتصفح من فك ترميزه دون نسخ بايتات إلى خادم.
- يرسم الصورة المفكوكة على عنصر Canvas خارج الشاشة، مطبّقًا قيد تغيير الحجم مع الحفاظ على نسبة العرض إلى الارتفاع الأصلية.
- استدعِ
canvas.toBlob(callback, targetMimeType, quality)لإعادة ترميز البكسلات لـ PNG و JPEG و WebP (Chrome/Firefox). بالنسبة لـ WebP على Safari وترميز AVIF، يُحمَّل عامل كوديك WebAssembly عند أول استخدام ليتولى الترميز في خيط خلفي. مخرج PNG دائمًا بلا ضياع؛ JPEG و WebP و AVIF يلتزمون بمنزلق الجودة، الذي يرتبط مباشرةً بإعداد تكميم المشفّر. - يعرض صورة مصغرة قبل/بعد مع أبعاد المخرج وحجم الملف، ثم يوفر زر تنزيل لكل صورة أو ملف 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. مخرج AVIF مدعوم عبر مشفّر WebAssembly يُحمَّل عند الطلب في كل المتصفحات — لا حاجة لمشفّر Canvas أصلي.
هل يحدث هذا على جهازي؟
نعم. تستخدم الصفحة 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 كوديك WebAssembly يُحمَّل عند الطلب في أول مرة تختار فيها تنسيق AVIF — لا إضافة، لا علامة متصفح، لا انتظار لإصدار كروم مستقبلي. يُخدم ملف WASM من أصلنا الخاص، ويُرمّز صورتك بالكامل في خيط خلفي، ويعيد image/avif blob قياسيًا جاهزًا للتنزيل. الطلب الشبكي الوحيد هو جلب الكوديك نفسه لمرة واحدة؛ لا تغادر بيانات الصورة جهازك أبدًا. بمجرد التحميل، يبقى المشفّر مخزّنًا مؤقتًا للجلسة لتكون التحويلات اللاحقة أسرع. ملفات AVIF عادةً أصغر بنسبة 20–30% من WebP و 50% من JPEG بجودة مكافئة، مما يجعلها الخيار الأفضل للمواقع الحساسة للأداء.
أسقط صورك، اختر تنسيقًا، حوِّل. كل شيء يعمل في علامة تبويبك — دون رفع، ودون حساب، ودون انتظار خادم.