محوّل PNG إلى WebP لصفحات أسرع

PNG ممتاز للرسومات الحادة والشفافية، لكنه ثقيل. قد تبلغ لقطة شاشة واحدة بعرض كامل عدة ميغابايتات، ما يبطئ الصفحات ويكلّف الزوار على بيانات الهاتف. صممت Google صيغة WebP للحفاظ على المظهر نفسه في جزء صغير من المساحة، وتدعمها كل المتصفحات الرئيسية منذ 2020.

إذا أردت تقليل حجم ملف PNG دون تغيير الحجم أو القص، فتغيير الصيغة غالبًا هو أكبر مكسب منفرد. الرسومات ذات الألوان المسطحة والصور المحفوظة بصيغة PNG كثيرًا ما تنخفض بنسبة 50 إلى 80 بالمئة، ويصعب ملاحظة الفرق على الشاشة.

كيف تقارن الصيغتان

عند مقارنة WebP بـ PNG، كلاهما يدعم الشفافية وكلاهما يوفر وضعًا بلا فقد. PNG مقبول على نطاق أوسع في برامج الحاسوب القديمة وسير عمل الطباعة. يضيف WebP وضعًا اختياريًا مع فقد، ومنه يأتي معظم التوفير، ويدعم الرسوم المتحركة أيضًا. لكل ما يُعرض في متصفح، WebP عادةً صيغة التسليم الأفضل.

يفك متصفحك ترميز كل ملف PNG، ويرسمه على لوحة رسم مخفية مع الحفاظ على قناة ألفا، ويرمّز تلك اللوحة كـ WebP بالإعداد الذي اخترته. يحدث كل ذلك داخل علامة التبويب. لا يستلم أي خادم صورك، ما يعني أيضًا لا طابور ولا حد لعدد الملفات سوى ذاكرة جهازك.

يمكن لـ Chrome وEdge وFirefox جميعها إنشاء ملفات WebP بهذه الطريقة. بعض إصدارات Safari تعرض WebP لكنها لا ترمّزه، لذا إذا كنت على Mac مع Safari فستخبرك الأداة وتقترح متصفحًا آخر.

تحويل PNG إلى WebP دفعة واحدة

هل تحتاج إلى مجلد كامل؟ اختر أو أفلت حتى 50 ملفًا دفعة واحدة. تُعالج واحدًا تلو الآخر مع شريط تقدم، ويمكن حفظ النتائج فرادى أو معًا. تُحفظ الأسماء، فيصبح header.png هو header.webp، ما يسهّل استبدالها في المشروع.

إعدادات الجودة مع فقد

يتحكم المنزلق في جودة تحويل PNG إلى WebP على مقياس من 50 إلى 100. الافتراضي 85 يناسب معظم الصور والرسوم التوضيحية. للقطات الشاشة ذات النص الصغير، 90 أو أعلى يبقي الحروف حادة. للصور الرئيسية الكبيرة، 75 إلى 80 غالبًا تبدو متطابقة على الشاشة بوزن أقل بكثير. راقب عمود الحجم وقارن المعاينة حتى تجد التوازن الذي يعجبك.

PNG إلى WebP بلا فقد

حدّد "بلا فقد" عندما يجب أن يبقى كل بكسل كما كان تمامًا، مثل فن البكسل أو نماذج واجهات المستخدم أو الصور التي ستحررها مجددًا. يكون WebP بلا فقد عادةً أصغر بنحو الربع من PNG محسّن. لن يتقلص بقدر الوضع مع فقد، لكن لا شيء يُهدر.

الحفاظ على المناطق الشفافة

تعتمد الشعارات والأيقونات والمنتجات المقصوصة على الخلفيات الشفافة. تحوّل هذه الأداة PNG إلى WebP مع الحفاظ على الشفافية في الوضعين مع فقد وبلا فقد، لذا تستقر النتيجة على أي لون صفحة بنظافة. إذا احتجت العكس، خلفية مصمتة لمتجر إلكتروني، فأدوات الخلفية لدينا يمكنها المساعدة.

إذا أردت تحويل PNG إلى WebP لاستخدامه في موقع، فأسهل طريقة هي الإبقاء على أسماء الملفات نفسها وتحديث الامتداد في HTML أو CSS. يستخدم كثير من المطورين عنصر picture بمصدر WebP وملف PNG الأصلي كبديل، وإن كان البديل نادرًا ما يلزم مع دعم المتصفحات الحالي.

لتحويل PNG إلى WebP لـ WordPress، ارفع الملفات المحوّلة مباشرة إلى مكتبة الوسائط؛ يقبل WordPress صيغة WebP منذ الإصدار 5.8، بشرط أن تدعمها مكتبة الصور لدى مستضيفك. تقبل Shopify وWix وSquarespace ومعظم أدوات بناء المواقع الحديثة رفع WebP أيضًا.

البريد الإلكتروني ووسائل التواصل والمستندات

صُممت WebP للمتصفحات، لذا فكّر مرتين قبل استخدامها خارج الويب. لا تزال عدة برامج بريد إلكتروني وحزم مكتبية قديمة وبعض الشبكات الاجتماعية تحوّلها أو ترفضها، وتتوقع المطابع عمومًا JPG أو PNG أو PDF. لهذه الوجهات احتفظ بملف PNG الأصلي، أو أنشئ نسخة JPG بمحوّلنا. استخدم WebP حيث تتألق: الصفحات والتطبيقات التي تتحكم فيها، حيث يجعل كل كيلوبايت موفر التجربة أسرع لكل زائر، على كل جهاز واتصال.

هل يساعد ذلك مؤشرات Core Web Vitals؟

غالبًا ما تكون الصور أكبر عنصر في الصفحة، لذا تساعد الملفات الأخف درجة Largest Contentful Paint وتقلل استهلاك البيانات لزوار الهاتف. اجمع تغيير الصيغة مع سمات العرض والارتفاع الصحيحة والتحميل الكسول للصور أسفل الشاشة، فتزيل اثنين من أكثر تحذيرات السرعة شيوعًا.

غيّر الحجم أولًا، ثم حوّل

الصيغة نصف القصة فقط. لقطة شاشة بعرض 4,000 بكسل تُعرض في عمود بعرض 800 بكسل لا تزال تهدر عرض النطاق حتى بصيغة WebP. حجّم الصور إلى نحو ضعف العرض الذي ستظهر به، ما يبقيها حادة على الشاشات عالية الكثافة، ثم حوّل. تتعامل أداة تغيير حجم الصور لدينا مع الخطوة الأولى بالطريقة الخاصة نفسها داخل المتصفح.

افحص النص والخطوط الدقيقة

قد ينعّم الضغط مع فقد الخطوط الرفيعة والحروف الصغيرة. بعد تحويل لقطة شاشة أو مخطط أو رسم بياني، كبّر المعاينة وقارنها بالأصل. إذا بدت الحواف مشوشة، فارفع المنزلق خمس أو عشر نقاط أو انتقل إلى "بلا فقد". الصور الفوتوغرافية أكثر تسامحًا بكثير ونادرًا ما تحتاج إلى أكثر من الافتراضي.

سمِّ الملفات بشكل منطقي

تقرأ محركات البحث أسماء الملفات كإشارة صغيرة على الصلة، ويراها الناس عند تنزيل صورك. لذا فالاسم الوصفي مثل red-running-shoes.webp أفضل من IMG_2041.webp. أعد تسمية ملفات PNG قبل التحويل وسترث الملفات الجديدة تلك الأسماء، فلا شيء إضافي لإصلاحه بعد ذلك. أضف نصًا بديلًا ذا معنى عند وضع الصور في صفحة، وحدّد العرض والارتفاع كي لا يقفز التخطيط أثناء تحميلها.

عندما لا يتحول ملف

إذا رُفض ملف، فتأكد من أنه PNG فعلًا؛ تفحص الأداة توقيع الملف، لا الامتداد فقط. الصور المنزّلة جزئيًا أو التالفة لا يمكن فك ترميزها، لذا نزّلها مجددًا. إذا فشلت كل الملفات، فمتصفحك على الأرجح لا يستطيع ترميز WebP، والانتقال إلى Chrome أو Edge أو Firefox يحل المشكلة.

لتحويل PNG إلى WebP على Mac، افتح هذه الصفحة في Chrome أو Edge أو Firefox واسحب الملفات مباشرة من Finder. على Windows وChromebook تعمل المتصفحات نفسها دون تثبيت أي شيء. لتحويل PNG إلى WebP على Android، افتح الصفحة في Chrome، وانقر منطقة الإفلات، واختر الصور من معرضك أو ملفاتك، واحفظ النتائج في "التنزيلات".

هل WebP أصغر من PNG؟ دائمًا تقريبًا، خاصة في الوضع مع فقد، والفجوة أكبر للصور الفوتوغرافية المحفوظة بصيغة PNG. الاستثناء النادر أيقونة صغيرة مسطحة يضغطها PNG جيدًا أصلًا؛ سيُظهر لك عمود الحجم ذلك إن حدث، ويمكنك ببساطة الاحتفاظ بالأصل.

وماذا عن WebP مقابل AVIF؟ يمكن أن يكون AVIF أصغر أيضًا، لكن ترميزه أبطأ، ودعم المتصفحات لإنشائه متفاوت، ولا تزال منصات إدارة محتوى وبرامج بريد كثيرة ترفضه. WebP هو الحل الوسط الموثوق: مدعوم على نطاق واسع، وسريع الإنتاج وأخف بكثير من PNG. احتفظ بملفات PNG الأصلية كنسخ رئيسية تحسبًا لحاجتك إلى تحريرها أو طباعتها لاحقًا.