PNG إلى JPG إلى WebP: ما يمكن أن يفعله محول المتصفح فعليًا

لقد قمت بشحن شعار تم تحويله إلى موقع العميل &#39؛s مرة واحدة وعاد بمستطيل أسود حيث كانت الخلفية الشفافة. لقد قمت بتحويل PNG إلى JPEG دون التفكير في الأمر. الجزء الغريب هو أنني متوقع الأبيض - كل مقال قرأته قال الشفافية والاقتباس؛ يصبح أبيض.&اقتباس؛ أصبح أسودًا، وأمضيت عشرين دقيقة على افتراض أن التعليمات البرمجية الخاصة بي معطلة قبل أن أقرأ مواصفات HTML وأكتشف أن المتصفح كان يفعل بالضبط ما قيل له.

هذا هو الموضوع الصادق لهذا الدليل. ال محول تنسيق الصورة يوجد في Toolz.dev غلاف رفيع فوق المتصفح ومشفر اللوحة القماشية الخاص بـ #39؛. وهذا يمنحه مزايا حقيقية - لا شيء يتم تحميله، &#39؛s فوري، يعمل دون اتصال بالإنترنت بمجرد تحميله - وحدود حقيقية لمعظم &quot؛ تحويل أي صورة إلى أي تنسيق &quot؛ الصفحات لن تعترف بذلك. لقد قمت ببناء هذا، لذلك أنا &#39؛ سأخبرك كلا النصفين.

ليرة تركية؛DR: ال محول تنسيق الصورة يلتقط أي صورة يمكن لمتصفحك فتحها وإعادة تشفيرها PNG، JPEG، أو ويب بي- هؤلاء الثلاثة، وهؤلاء الثلاثة فقط. لا يوجد مخرج AVIF أو GIF أو SVG، لأن الأداة تستخدم برنامج تشفير اللوحة القماشية للمتصفح &#39؛ وهذا ما تدعمه اللوحة القماشية. اختر هدفًا، واسحب شريط تمرير الجودة (JPEG وWebP فقط - تتجاهله PNG)، وقم بتنزيله. شيئين يجب معرفتهما قبل التحويل: يتم تركيب الشفافية على اللون الأسود عند استهداف JPEG، لكل المواصفات، و تم تجريد البيانات التعريفية لـ EXIF في كل عملية تحويل، لأن إعادة تشفير اللوحة القماشية تحمل وحدات البكسل فقط. لتقليص الملفات، قم بإقرانها مع ضاغط الصور و ال تغيير حجم الصورة أداة.

ما الذي يدعمه هذا المحول فعليًا؟

Let&#39؛s احصل على النطاق الصحيح أولاً، لأن هذا هو المكان الذي تباع فيه معظم أدلة التنسيق بشكل زائد.

الإدخال: يقبل منتقي الملفات image/*، ويتم تحميل الملف في عادي <img> عنصر. لذلك، إذا كان متصفحك يمكنه عرضه، فيمكن للأداة قراءته - PNG، وJPEG، وWebP، وGIF، وBMP، وAVIF، وفي معظم المتصفحات الحديثة، SVG.

إخراج: PNG، JPEG، WebP. ثلاثة أزرار. تلك &#39؛ق القائمة.

السبب ليس الكسل، إنه &#39؛s المنصة. تقوم الأداة برسم صورتك إلى أ <canvas> والمكالمات canvas.toBlob(callback, type, quality). يتطلب معيار HTML Living Standard دعم كل متصفح image/png لهذه المكالمة ويترك التنسيقات الأخرى اختيارية؛ عمليا، image/jpeg و image/webp يتم دعمها في كل مكان و image/avif التشفير ليس كذلك. لا توجد واجهة برمجة تطبيقات للمتصفح لكتابة AVIF أو GIF من لوحة قماشية. الموقع الذي يقدم لك مخرجات AVIF هو إما شحن برنامج تشفير WebAssembly (مئات الكيلوبايت من التنزيل) أو - في كثير من الأحيان - تحميل صورتك إلى الخادم. ولا ما تفعله هذه الأداة.

إذن هذا هو جدول المقارنة الصادق، الأداة أولاً:

إذا كنت بحاجة إلى AVIF أو WebP متحرك، فاستخدم squoosh محليا، cwebp/avifenc من سطر الأوامر، أو خطوة صورة خط أنابيب البناء &#39؛s. أفضل أن أرسل لك مكانًا مفيدًا بدلاً من التظاهر.

لماذا يحول JPEG خلفيتي الشفافة إلى اللون الأسود؟

لأن المواصفات تقول ذلك، ولم أعلم ذلك إلا بعد إرسال البريد الإلكتروني للعميل.

لا يحتوي JPEG على قناة ألفا. عندما تطلب من لوحة قماشية إجراء تسلسل إلى تنسيق يدعم &#39؛t ألفا، يكون HTML Living Standard واضحًا: يجب تركيب الصورة النقطية على ملف خلفية سوداء صلبة قبل الترميز. ليس أبيض. أسود. يتبع كل من Chrome وFirefox وSafari هذا، ولهذا السبب يكون السلوك متسقًا ولماذا يفاجئ الجميع مرة واحدة بالضبط.

لذا: إن تحويل شعار PNG الشفاف إلى JPEG سيمنحك صندوقًا أسود خلفه. في كل مرة. هذا &#39؛s ليس خطأ في الأداة، it&#39؛s النظام الأساسي متسق، ولا يؤدي أي قدر من سحب شريط تمرير الجودة إلى إصلاحه.

ماذا تفعل بدلا من ذلك:

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

هذه هي الطريقة الوحيدة الأكثر شيوعًا التي يقوم بها الأشخاص بإتلاف الصورة باستخدام المحول، وهي &#39؛s تستحق استيعابها alpha هي خاصية للتنسيق، وليس للملف الخاص بك. اختيار JPEG هو اختيار التخلص من قناة ألفا.

ما الذي يضيع أيضًا في إعادة ترميز القماش؟

لوحة قماشية تحتوي على بكسل. فقط بكسل. يتم تجاهل كل شيء آخر في ملفك الأصلي عند إعادة تشفير المتصفح، وهذا يجذب الأشخاص

لقد ذهب EXIF. صنع الكاميرا وطرازها، والعدسة، والتعرض، وتاريخ الالتقاط، وحقول حقوق الطبع والنشر، و إحداثيات نظام تحديد المواقع كل شيء يختفي. يعد هذا فوزًا بالخصوصية عن طريق الصدفة - تحويل صورة الهاتف قبل نشرها يؤدي إلى تجريد الموقع الذي تم التقاطها فيه - ولكن إذا كنت أنت &#39؛ موظف أرشيف أو كنت بحاجة إلى حقل حقوق الطبع والنشر للبقاء على قيد الحياة، فلا تقم بتشغيل النسخ الأصلية من خلال أي لوحة قماشية محول. تحويل نسخة.

تصبح ملفات تعريف الألوان مسطحة. يتم رسم الصورة الموسومة بملف تعريف واسع النطاق مثل Display P3 أو Adobe RGB إلى لوحة قماشية تتعامل معها عمليًا على أنها sRGB. بالنسبة لصور الويب، هذا ما تريده على أي حال. بالنسبة لأعمال الطباعة، فهو &#39؛ر.

الرسوم المتحركة تنهار إلى إطار واحد. آن <img> يقوم العنصر بتسليم اللوحة القماشية مهما كان الإطار الذي يتم عرضه. قم بإسقاط صورة GIF متحركة مدتها اثنتي عشرة ثانية وستحصل أنت &#39؛ على لقطة ثابتة واحدة. الأداة لا تحذرك من هذا، وهو ما أعتبره حافة خشنة حقيقية وليس ميزة.

يتم إعادة تشفير كل شيء آخر من وحدات البكسل التي تم فك تشفيرها. وهو ما يقودنا إلى القاعدة الوحيدة الأكثر أهمية.

ما هي خسارة الأجيال وكيف أتجنبها؟

في كل مرة تقوم فيها بحفظ تنسيق مع فقدان البيانات، يقوم برنامج التشفير برمي البيانات بعيدًا. تخلص من البيانات، وافك تشفيرها، وتخلص من المزيد، ومركبات الضرر. هذا هو فقدان الجيل، وهو &#39؛ السبب وراء ظهور قوالب الميم الخاصة بك وكأنها تم إرسالها بالفاكس.

القاعدة قصيرة: قم دائمًا بالتحويل من أفضل نسخة أصلية لديك، وليس من نسخة محولة أبدًا.

بشكل ملموس، JPEG → WebP → JPEG أسوأ من JPEG الأصلي، مرتين. يتم التعامل مع عناصر التشفير الأول &#39؛ على أنها تفاصيل صورة حقيقية من خلال التشفير الثاني، الذي يقضي بأمانة البتات في الحفاظ عليها. إذا كان لديك ملف RAW أو تصدير PNG، فابدأ من هناك.

هناك &#39؛s نتيجة طبيعية تعثر الناس: تحويل JPEG إلى PNG لا يستعيد الجودة. Png لا يمكن فقدانه، لذا فهو سيحافظ على صورتك بشكل مثالي - بما في ذلك كل قطعة أثرية مضغوطة تم خبزها بالفعل في وحدات البكسل. تحصل على نفس الصورة التالفة في ملف أكبر بثلاث أو أربع مرات. PNG-from-JPEG يستحق كل هذا العناء كخطوة وسيطة فقط عندما تكون أنت &#39؛ على وشك القيام بعدة جولات من التحرير وتريد تجنب إعادة الضغط عند كل عملية حفظ.

ما هو التنسيق الذي يجب أن أختاره بالفعل؟

تخطي تصنيف التنسيق؛ هنا #39؛s القرار بالترتيب الذي اتخذته بالفعل.

هل هي صورة؟ WebP عند 80،85. إذا كان هناك شيء في خط الأنابيب الخاص بك يمكن &#39؛ وقراءة WebP، JPEG عند 80 inter85.

هل لديها الشفافية؟ ويب. PNG إذا كنت بحاجة إلى أقصى قدر من التوافق.

هل هي لقطة شاشة أم نموذج واجهة مستخدم أو مخطط أو أي شيء يحتوي على نص ولون مسطح؟ PNG، أو ويب. JPEG&#39؛ يقوم جيب التمام المنفصل بتحويل الحواف الحادة إلى ضوضاء البعوض المرئية حول الحروف - وقد تم تصميمه في أواخر الثمانينيات للصور الفوتوغرافية ذات النغمات المستمرة (التنسيق موحد كـ ITU-T T.81 /ISO/IEC 10918-1) والنص هو بالضبط المحتوى الذي يتعامل معه بشكل أسوأ.

هل هو شعار أو أيقونة تتحكم في مصدرها؟ لا - استخدم SVG، وdon&#39؛ ضعه من خلال محول نقطي على الإطلاق.

بالنسبة للمواصفات الكامنة وراء هذه: PNG هي ISO/IEC 15948، وتم نشر WebP أخيرًا باسم RFC 9649 في عام 2024، بعد أربعة عشر عامًا من شحن Google له. على الحجم، تضع دراسة المقارنة الخاصة بـ Google&#39؛ WebP مع فقدان البيانات بنسبة 25 سنتًا تقريبًا، أي أصغر بنسبة 34% من JPEG عند SSIM المكافئ، وWebP بدون فقدان عند حوالي 26% أصغر من PNG. هذه هي أرقام البائع &#39؛s الموجودة على مجموعة البائع &#39؛s - تعامل معها على أنها تلميح قوي، وليس وعدًا بشأن صورتك المحددة. السبب الذي يجعل I&#39؛ أشعر بالارتياح عند الاستشهاد بها هو أنها &#39؛ لقد تطابقت نتائجي بشكل وثيق بما فيه الكفاية في لقطات الشاشة والصور الحقيقية على مر السنين. قد تختلف عن ذلك، ولهذا السبب تعرض لك الأداة حجم المصدر قبل التحويل.

كيف يمكنني تحويل صورة على Toolz.dev؟

الخطوة 1: افتح المحول

اذهب إلى محول تنسيق الصورة. لا يوجد شيء للتثبيت، لا يوجد حساب.

الخطوة 2: قم بتحميل صورتك

انقر فوق منطقة التحميل واختر ملفًا. يتم تحميله في متصفحك عبر عنوان URL للكائن - لا يتم إرسال الملف أبدًا إلى أي مكان. أنت &#39؛ سأرى اسم الملف وحجمه.

الخطوة 3: التحقق من قراءة التنسيق

تظهر الأداة الحالي → الهدف. &quot؛Current&quot؛ تتم قراءته من الملف &#39؛s نوع MIME، لذا أ .jpg تقارير الملف كما JPEG. التحقق من سلامة العقل بشكل مفيد عندما يقوم شخص ما بإعادة تسمية امتداد الملف &#39؛s دون تحويله فعليًا، وهو ما يحدث أكثر مما تعتقد أنت &#39؛d.

الخطوة 4: اختر هدفك

PNG أو JPEG أو WebP.

الخطوة 5: ضبط الجودة - إذا كان ذلك ينطبق

شريط تمرير الجودة (1 بوصة 100، الافتراضي هو 90) يظهر فقط لـ JPEG وWebP. هذا &#39؛s متعمد: PNG لا تفقد و canvas.toBlob يتجاهل حجة الجودة تماما ل image/pngلذا فإن إظهار شريط التمرير الذي لا يفعل شيئًا سيكون كذبة.

لمكان ضبطه: 90 هو الإعداد الافتراضي ولا يمكن تمييزه تقريبًا عن الأصل بالنسبة لمعظم المحتوى. 80 br85 هو المكان الذي أعمل فيه بالفعل - أصغر بشكل هادف، ولا يزال نظيفًا. أقل من 60 أنت و#39؛ سأراه على الصور، وعلى أي شيء يحتوي على نص أنت و#39؛ سأراه في وقت أقرب بكثير.

الخطوة 6: التحويل والتنزيل

يضرب تحويل & أمبير؛ تحميل. يحدث التشفير على جهازك، ويتم حفظ الملف كـ converted_<original-name>.<ext>. يتم الحفاظ على الأبعاد تمامًا - يقوم المحول بتمرير عرض الصورة والارتفاع الخاص بك &#39؛، لذا فإن هذه الخطوة تغير التشفير ولا شيء غير ذلك.

تحويل أو ضغط - أي واحد أحتاج؟

يصل الأشخاص إلى المحول عندما يريدون ملفًا أصغر، وغالبًا ما تكون هذه الأداة &#39؛s هي الأداة الخاطئة. ثلاث وظائف مختلفة، ثلاث أدوات مختلفة:

والفوز الأكبر دائمًا هو الذي يتخطاه الأشخاص. إذا كنت &#39؛ يتم تقديم صورة مقاس 4000×3000 في تخطيط بعرض 1200 بكسل، تغيير الحجم يتفوق على كل اختيار تنسيق مدمج- أنت &#39؛ يتم التخلص من 90% من وحدات البكسل التي كان المتصفح سيخفض حجمها ويتجاهلها على أي حال. قم بتغيير الحجم أولاً، ثم قم بالتحويل. يتطلب القيام بذلك بهذا الترتيب بشكل روتيني 4 ميجابايت PNG أقل من 200 كيلو بايت، ولا يقترب أي قدر من التحديد الذكي للتنسيق في النسخة الأصلية بالحجم الكامل.

عادة أخرى تستحق البناء: احتفظ بأصولك الأصلية. أرشفة الأساتذة الذين لا يفقدون، وإنشاء مشتقات مع فقدان البيانات للتوزيع. عندما يصل AVIF-everywhere أخيرًا، أو التنسيق التالي بعده، &#39؛ سيتم إعادة التصدير من مصادر نظيفة بدلاً من رفع مستوى الندم.

الأسئلة الشائعة

ما هو تنسيق الصورة الأفضل لمواقع الويب؟

WebP، لمعظم المحتوى. It&#39؛ أصغر من JPEG للصور وأصغر من PNG للرسومات، وهو يدعم الشفافية، وكل متصفح حالي يقرأه - كان Safari هو آخر تعليق وأضاف الدعم في الإصدار 14. لا يزال ضغط AVIF أفضل، ولكن يمكنك &# 39؛ قم بإنتاجه في لوحة قماشية للمتصفح؛ أنت بحاجة إلى خطوة بناء أو برنامج تشفير سطح المكتب.

هل يمكن لهذه الأداة تحويل صورتي إلى AVIF؟

رقم يقوم المحول بإخراج PNG وJPEG وWebP فقط، لأنه يستخدم برنامج تشفير اللوحة القماشية للمتصفح &#39؛ ولا يمكن لأي متصفح تشفير AVIF من اللوحة القماشية. متصفحك يستطيع فك التشفير AVIF، حتى تتمكن من تحويل ملف AVIF إلى WebP أو PNG هنا - ليس الاتجاه الآخر. بالنسبة لمخرجات AVIF، استخدم برنامج تشفير سطر الأوامر مثل avifenc أو خط أنابيب الصور الخاص بإطار العمل &#39؛s.

لماذا حصلت PNG الشفافة على خلفية سوداء بعد التحويل إلى JPEG؟

نظرًا لأن JPEG لا يحتوي على قناة ألفا، وتقول مواصفات HTML إن تسلسل اللوحة القماشية إلى تنسيق بدون دعم ألفا يجب أن يقوم بتركيب الصورة على خلفية سوداء صلبة. السلوك الذي تفرضه المواصفات It&#39؛s، وليس خطأ، وهو &#39؛s نفسه في كل متصفح. قم بالتحويل إلى PNG أو WebP بدلاً من ذلك إذا كنت بحاجة إلى الحفاظ على الشفافية.

هل يؤدي تحويل الصورة إلى إزالة بيانات EXIF الخاصة بها؟

نعم - كل ذلك، بما في ذلك إحداثيات GPS وإعدادات الكاميرا وتاريخ الالتقاط. تقوم الأداة بسحب صورتك إلى لوحة قماشية وإعادة تشفير وحدات البكسل، ولا تحمل اللوحة القماشية أي بيانات تعريف. That&#39؛s مفيد إذا كنت &#39؛إعادة تجريد بيانات الموقع قبل نشر الصورة، ومشكلة إذا كنت بحاجة إلى البيانات التعريفية، لذا احتفظ بنسخة أصلية غير محولة في كلتا الحالتين.

هل يمكنني تحويل صورة GIF متحركة إلى WebP متحركة؟

ليس مع هذه الأداة. يقوم بتحميل صورتك إلى <img> يلتقط العنصر إطارًا واحدًا على اللوحة القماشية، لذلك تظهر صورة GIF المتحركة كصورة ثابتة واحدة. يتطلب تطبيق WebP المتحرك استخدام برنامج تشفير حقيقي متعدد الإطارات gif2webp من أدوات WebP الخاصة بـ Google&#39؛s، أو قم بتحويل الرسوم المتحركة إلى MP4، والتي ستكون أصغر بشكل كبير من أي منهما.

هل سيؤدي تحويل JPEG إلى PNG إلى تحسين الجودة؟

رقم PNG لا يفقد، لذا فهو يحافظ بالضبط على ما هو &#39؛s المعطى - بما في ذلك عناصر الضغط المخبوزة بالفعل في وحدات البكسل JPEG&#39؛s. ينتهي بك الأمر بصورة متطابقة المظهر في ملف أكبر بكثير. يتم فقدان البيانات المفقودة؛ لا يوجد تغيير في التنسيق يعيدها.

هل يوجد حد لحجم الملف؟

لا يتم فرض أي حد صارم. السقف العملي هو جهازك وذاكرة #39؛، حيث يتم فك تشفير الصورة بأكملها إلى صورة نقطية قماشية بعرض × ارتفاع × 4 بايت تقريبًا - تحتاج الصورة مقاس 8000 × 6000 إلى حوالي 192 ميجابايت من ذاكرة الوصول العشوائي كبكسلات أولية قبل بدء التشفير. تتعامل متصفحات سطح المكتب مع إخراج الكاميرا النموذجي دون شكوى؛ قد تواجه الهواتف القديمة صعوبة في التعامل مع الملفات الكبيرة جدًا.

ما الفرق بين PNG وJPEG؟

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

كيف يمكنني تحويل صورة إلى WebP مجانًا؟

قم بتحميل PNG أو JPEG الخاص بك، واختر WebP كتنسيق الإخراج، وقم بتعيين الجودة إذا كنت تريد ملفًا أصغر، وقم بتنزيله - فهو مجاني ويعمل بالكامل في متصفحك. عادةً ما يكون WebP هو التحويل الذي يستحق إجراءه للويب، نظرًا لأنه أصغر من كل من JPEG وPNG بينما لا يزال يدعم الشفافية ويتم قراءته بواسطة كل متصفح حالي.

هل يتم تحميل صورتي على الخادم؟

رقم. تتم قراءة الملف محليًا باستخدام عنوان URL للكائن، ويتم فك تشفيره بواسطة متصفحك، وإعادة تشفيره بواسطة لوحة المتصفح &#39؛، ويتم حفظه بواسطة متصفحك. يمكنك التحقق من ذلك بنفسك: افتح DevTools، وانتقل إلى علامة تبويب الشبكة، وقم بتحويل صورة - you&#39؛ ولن ترى أي تحميل. بمجرد تحميل الصفحة، يعمل التحويل مع إيقاف تشغيل شبكة Wi-Fi.

النسخة القصيرة

تعد لوحة المتصفح محولًا جيدًا وصادقًا للصور لثلاثة تنسيقات ومحولًا سيئًا لكل شيء آخر. داخل PNG وJPEG وWebP it&#39؛s فوريًا وخاصًا ومجانيًا، ويغطي التحويل الذي يهم الويب بالفعل: إيصال صورك إلى WebP. خارج هؤلاء الثلاثة، يمكن &#39؛ المساعدة، وI&#39؛ أفضل أن تقول ذلك بدلاً من السماح لك بمعرفة ذلك باستخدام مستطيل أسود على الصفحة الرئيسية للعميل &#39؛s.

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

ال محول تنسيق الصورة هنا. بالنسبة لبقية سير عمل الصورة، هناك &#39؛s ضاغط الصور، ال تغيير حجم الصورة الأداة، و- بالنسبة لقواطع الخلفية المسطحة - مزيل الخلفية. الصورة الأوسع موجودة في دليل أدوات الصورة و ال دليل ضغط الصور.