) وتوقع أن يقوم AlphaImageLoader بعمل هذا في Internet Explorer كما ينبغي. تذكر أن AlphaImageLoader يقوم بإدراج صورتك بين الخلفية والمقدمة للكائن. لذلك ، في حين أنها ستحمل صورتك بكل جمالها الشفاف ، فإنها ستستمر أيضًا في تحميلها كصورة خلفية CSS ، وبدون وحدات البكسل الشفافة الرائعة.

الاستخدام الحقيقي لـ AlphaImageLoader

دعنا نعود إلى أحد الأمثلة السابقة ونحاول تحميله بشكل صحيح في Internet Explorer. تذكر القناة 49 ، محطة تلفزيون في توبيكا؟ بالتأكيد - نعم. يوضح الشكل 5-21 كيف يبدو الموقع في Internet Explorer 6.

  الشكل 5-21
  العنوان 49abcnews.com ، معروض في Internet Explorer 6 لنظام التشغيل Windows ، مع شفافية PNG البكر.

يبدو أن HTML للأعلى المتعلق بالطقس قد خمنته بالفعل:

ترى الصورة ، وبالتأكيد هي PNG ، حتى أن Internet Explorer يقوم بتنزيلها بلا عيوب. العنصر السري لهذا هو جافا سكريبت. في الواقع ، استخدمت القليل من برمجة DOM لإزالة عنصر img على الطاير واستبداله بعنصر div ، والذي - حسب تخمينه - يستخدم AlphaImageLoader. يتم وصف JavaScript داخل التعليقات الشرطية ؛ تم تضمين لغة أخرى متاحة ولكن غير موحدة تمامًا من Microsoft في Internet Explorer. تسمح لك التعليقات الشرطية باستخدام التعليمات البرمجية فقط لإصدار معروف سابقًا من Internet Explorer. يتم تجاهل الرمز من قبل جميع المتصفحات الأخرى ، لذلك لا يؤثر عليهم بأي شكل من الأشكال. في العنصر   الموقع الإلكتروني www.49abcnews.com ، ستجد:

بفضل السطر الأول ، إذا كان lte IE6 ، فلن يتم تضمين هذا البرنامج النصي في المستند المرسوم إلا إذا تم عرضه في إصدار Internet Explorer أقل من أو يساوي (يشار إليه بواسطة lte) 6. ستتجاهل جميع المتصفحات الأخرى ، بما في ذلك Internet Explorer 7 الجديد هذا تمامًا .

فماذا في ملف جافا سكريبت fixWeatherPng.js؟ الق نظرة:

Window.attachEvent ("onload"، fixWeatherPng) ؛ function fixWeatherPng () (var img \u003d document.getElementById ("weatherImage")؛ var src \u003d img.src؛ img.style.visibility \u003d "hidden"؛ var div \u003d document.createElement ("DIV")؛ div.style. filter \u003d "progid: DXImageTransform.Microsoft. AlphaImageLoader (+ src +" "، sizing \u003d" scale ")"؛ // تم حذف بعض أنماط CSS الخاصة بـ 49abcnews.com للإيجاز.   img.replaceNode (div) ؛ )

دعونا نحلل ، خطوة بخطوة ، ما يفعله البرنامج النصي. أولاً ، نخبر المستعرض أننا نريد تنفيذ وظيفة fixWeatherPng عند تحميل الصفحة. باقي النص هو الوظيفة نفسها.

نبدأ ، أولاً نبحث عن صورة سنعمل بها من خلال سمة معرف ونحفظها في متغير img. نحفظ سمة src (عنوان URL لملف الصورة) في متغير src. ثم نخفي عنصر img بتعريض خاصية رؤية CSS إلى إخفاء.

نتيجة لذلك ، نستبدل عنصر img الأصلي (المخفي) بعنصر div الذي تم إنشاؤه حديثًا ، والذي تم إرفاقه بنجاح AlphaImageLoader.

استخدام البرمجة النصية DOM لإدراج AlphaImageLoader الخاص بك - بت الترشيح سريع - له جانب غير سار ولكنه ضروري - CSS غير صحيح. علاوة على ذلك ، سيتم تضمين عناصر div غير الدلالية خارج ترميز HTML (X). وبينما يتم وصف كل هذا داخل التعليقات الشرطية ، لا توجد فرصة لتلف المتصفحات الأخرى بواسطة كود Microsoft. (handyblogger: هنا يحاول Jeff الإشارة بمهارة إلى حل Microsoft الخرقاء)

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

في الختام

يوفر تنسيق PNG ، بصيغة رسوم بيانية ، العديد من المزايا التقنية إلى جانب تلك المستخدمة على نطاق واسع في ملفات GIF. في الواقع ، الفوائد كبيرة جدًا لدرجة أن PNG ، منذ فترة طويلة - كان يمكن أن تتخذ منذ فترة طويلة موقعًا مهيمنًا كتنسيق رسومي غير مرتبط بصور الصور. يؤدي عدم دعم Internet Explorer لبعض ميزات PNG الأكثر أهمية ، مثل شفافية قناة ألفا ، إلى تخويف العديد من مطوري الويب. ولكن هناك سببان جيدان جدًا لعدم تخوفك من PNG.

أولاً: حتى Internet Explorer 6 وإصداراته السابقة تدعم PNG بشكل كامل تقريبًا فيما يتعلق بما يمكن أن يقوم به GIF (بالطبع ، باستثناء الرسوم المتحركة). يعرض PNG دائمًا تقريبًا أحجام ملفات أصغر ، مما يسمح لهم بالتحميل بشكل أسرع واستهلاك موارد أقل.

ثانيًا: يقدم Internet Explorer 7 الدعم الكامل لشفافية PNG alpha. التأثيرات التي يمكن الحصول عليها مع النطاق الكامل للخيارات الشفافة تكاد تكون بلا حدود. أتوقع أن المصممين الذين يجدون طرقًا مثيرة للاهتمام لاستخدام شفافية PNG ، وفقًا لمبدأ تلك الموضحة في هذه المقالة ، سيفتحون الأبواب أمام مستوى جديد من الأنماط لم نرها من قبل. لقد قدمت لك أفكارًا مفيدة حول ما يمكنك إنشاؤه باستخدام شفافية PNG ، ولكن لا تتوقف عند هذا الحد. ابحث عن نفسك!

مقتطفات من إبداع معايير الويب من كاميرون آدامز ، ومارك بولتون ، وآندي كلارك ، وسيمون كوليسون ، وجيف كروفت ، وإيثان ماركوت ، وديريك فيذرستون ، وإيان لويد ، ودان روبين ، وروب ويشرت ؛ نشره أصدقاء ED. حقوق النشر Jeff Croft 2007. تُستخدم بإذن من Apress، Inc.

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

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

الطريقة الأولى: عارضات الصور

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

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

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

الطريقة الثانية: أداة Windows القياسية

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

إذا كنت بحاجة إلى فتح جميع صور PNG من خلال عارض صور Windows القياسي ، فاتبع الخطوات التالية:

الآن ، بشكل افتراضي ، سيتم فتح جميع ملفات PNG باستخدام عارض الصور القياسي. لتغيير البرنامج لفتحه ، ما عليك سوى اتباع نفس الخطوات ، واختيار برنامج مختلف.

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

أنت هنا لأن لديك ملفًا له ملحق ملف ينتهي بـ .png. ولا يمكن تشغيل الملفات ذات امتداد الملف .png إلا بواسطة تطبيقات معينة. من المحتمل أن تكون ملفات .png ملفات بيانات بدلاً من المستندات أو الوسائط ، مما يعني أنه ليس من المفترض أن يتم عرضها على الإطلاق.

ما هو & nbsp.png & nbspfile؟

ملفات PNG هي ملفات صور نقطية مضغوطة يتم تنفيذها عادةً للعناصر المرئية الموجودة في موقع ويب بين رسومات الويب الأخرى. يتكون محتوى الصورة لملفات .png من ألوان فهرس مدمجة بواسطة صور نقطية ، كما أن مواصفات ضغط الصور الرقمية وترميزها التي يتم تنفيذها في ملفات .png مماثلة لمعايير الضغط المدمجة في ملفات GIF. يُعرف أيضًا باسم رسومات الشبكة المحمولة ، وقد تم تطوير تنسيق PNG لرفع القيود المفروضة على صور GIF ، من حيث دعم الألوان وترخيص براءات الاختراع. تم تحسين قناة الشفافية لملفات PNG هذه لدعم 8 بت. لا يتوفر دعم CMYK في ملفات PNG هذه.

كيفية فتح ملف. png.

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

التطبيقات التي تفتح ملف .png

Adobe Photoshop CS6 لنظام التشغيل Microsoft Windows

Adobe Photoshop CS6 for Microsoft Windows هو برنامج لتحرير الصور وإدارته يمكن تنزيله على أجهزة الكمبيوتر التي تعمل بنظام Windows ، وبالتحديد Windows 7 (بدون SP ومع SP1) و Windows XP مع SP3. يأتي هذا البرنامج مع ميزات وأدوات جديدة لتحرير الصور الرقمية بسهولة وسرعة ومتعة ومتقدمة. إحدى الميزات التي تجعل هذا البرنامج موثوقًا به لتحرير الصور هو Adobe Mercury Graphics Engine ، وهي تقنية محرك توفر أداءً أسرع وعالي الجودة. أدوات Content-Aware هي ميزات جديدة مصممة لتنميق الصور بسهولة حيث يمكنك اقتصاص الصور بدون أي تأثير ، أو ضبابية التصحيح التلقائي أو انحناءات العدسة واسعة الزاوية ، وإزالة العين الحمراء ، وضبط توازن الألوان مثل السطوع والتباين. يحتوي محرر الصور هذا أيضًا على ميزة الاسترداد التلقائي التي يمكنها عمل نسخة احتياطية من أي صور غير محفوظة وخيار حفظ الخلفية ومعرض التعتيم وأداة الاقتصاص وإنشاء الفيديو وغير ذلك الكثير. مع كل هذه الميزات الجديدة المحسنة وواجهة مستخدم سهلة الاستخدام الحديثة ، فإن تحرير الصور الرقمية لن يكون أبداً ممتعًا وسهلاً بدون Photoshop CS6.

Adobe Photoshop CS6 لنظام التشغيل Mac

Adobe Photoshop CS6 لنظام التشغيل Mac

   Adobe Photoshop CS6 for Mac هو إصدار برنامج "Creative Suite" - برنامج إدارة الصور المصمم حصريًا لأجهزة كمبيوتر Mac ، خاصة Mac OS X الإصدار 10.6 إلى 10.7 في الإصدار 64 بت. تم دمج برنامج تحرير الصور هذا مع مجموعة جديدة من الميزات والأدوات ، مثل محرك Mercury Graphics Engine الذي طورته نفس الشركة للحصول على أداء سريع وعالي الجودة لتحسين الصورة ، وميزات Content-Aware ، وأدوات إعادة تصميم بديهية لتصميم الأفلام ، ومهام سير العمل ، معرض Blur ، أداة Crop والمزيد. يعمل Adobe Mercury Graphics Engine بطريقة تجعل مهمة التحرير سهلة وسريعة. يسمح هذا أيضًا بمشاركة الصور وترحيلها مع خيارات الاسترداد التلقائي وحفظ الخلفية. تم تصميم أدوات Content-Aware الجديدة من أجل طريقة سهلة ويمكن التحكم فيها لإعادة لمس أو تحسين الصور التي تؤدي إلى إخراج أكثر إرضاءً. إنه يتيح لأي مستخدم بشكل أساسي تصحيح الصور تلقائيًا واقتصاصها وتصحيح انحناءات العدسة واسعة الزاوية.

لوحة ACD Systems 14

لوحة ACD Systems 14

شركة ACD Systems International Inc. هو مطور ACD Systems Canvas 14 ، وهو برنامج حل رسومات فنية ، يتيح للمستخدمين تحليل البيانات وتحسين الرسومات ومشاركة جميع المعلومات بسهولة وسرعة. تم تصميم هذا البرنامج بأدوات كاملة المواصفات تساعد المستخدمين في عمل الرسومات الفنية والرسوم التوضيحية بدقة. يتكون من أدوات تحرير تختلف من تحرير الصور إلى أدوات الرسم التوضيحي للكائن. تقدم أي نتائج تم إنشاؤها بواسطة هذا البرنامج عروض تقديمية جيدة للمشاريع والمقترحات والأغراض الأخرى لأي خط عمل يتعلق بالرسومات والهندسة. المزيد عن الميزات ، يمكن للمستخدمين العمل مع الصور النقطية والرسومات المتجهة باستخدام نفس الملف مع خيار التحرير عن طريق تغيير حجم الكائنات وقياسها ، ورسم الأشكال ، بالإضافة إلى إدراج أحبار السكتة الدماغية وتعبئة الأحبار أو العروض. هناك أيضًا أداة لإضافة نصوص أو ملصقات وأبعاد التنسيق ، بالإضافة إلى إنشاء الرسوم البيانية. مع هذا البرنامج ، يمكن للمستخدمين مشاركة المشاريع النهائية من خلال العروض التقديمية أو المنشورات.

أنظمة ACD ACDSee 15

أنظمة ACD ACDSee 15

   ACD Systems ACDSee 15 هو برنامج للتصوير الفوتوغرافي يتميز بمنظم للصور ، وعارض ، وبرنامج RAW / محرر الصور لأنظمة Microsoft Windows و Mac OS X 10.6 (Windows XP مع Service Pack 2 ، Vista ، 7 & 8 ؛ Mac OS X 10.5 ، 10.6 ، 10.7 وجبل الأسد). تم تطويره من قبل ACD Systems International، Inc. وتم توزيعها في الأصل كتطبيق 16 بت تمت ترقيته لاحقًا بإصدار 32 بت. هذا الحد الأدنى من متطلبات الأجهزة لهذا التطبيق هو معالج Intel Pentium III / AMD Athlon أو ما يعادله مع 512 ميجابايت من ذاكرة الوصول العشوائي (مع مساحة خالية على القرص الصلب تبلغ 310 ميجابايت) ، ومحول عرض عالي الألوان بدقة 1024 × 768 ، وناسخ أقراص مضغوطة / أقراص DVD. تدير ACDSee وتدعم ملفات الفيديو والصوت بتنسيقات تشمل GIF و BMP و JPG و PNG و MP3 و PSD و WAV و MPEG و TIFF. يمكن للمستخدمين عرض وتحرير وإضافة تأثيرات وتنظيم مجموعات الصور والفيديو التي يمكن مشاركتها عبر الإنترنت. يمكن تنظيم الصور حيث يتم استيرادها من الكاميرا أو جهاز تخزين آخر. كما يتميز بعرض الخريطة ودعم وضع العلامات الجغرافية التي تمكن المستخدمين من عرض موقع الصور من الكاميرات التي تدعم نظام تحديد المواقع العالمي (GPS). تعمل ميزات مثل التصفح السريع والمسح الضوئي والتحرير وخيارات النسخ الاحتياطي على تسهيل فرز الصور حسب التاريخ والحدث ، وتخزين النسخ الاحتياطية على الأقراص المضغوطة وأقراص DVD و Blu-Ray.

ملف PNG - صورة نقطية محفوظة بتنسيق Portable Network Graphic. تحتوي كل صورة PNG على لوحة - مجموعة من الألوان المستخدمة. لتقليل حجم الملف ، يتم استخدام الضغط بدون خسارة بواسطة خوارزمية الانكماش. يتم استخدامه بشكل رئيسي على الإنترنت كصور لصفحات الويب. تم تطوير التنسيق ليحل محل ملف GIF ، والذي ، بالإضافة إلى عيوبه ، حتى عام 2004 كان له قيود للاستخدام في البرمجيات الحرة. حل تنسيق PNG الجديد هذه المشاكل. على وجه الخصوص ، تنفذ دعمًا لقناة ألفا 8 بت ودعم أعماق الألوان حتى 48 بت. بينما في تنسيق GIF ، فقط الشفافية الكاملة ممكنة ، ولوحة الألوان تقتصر على 256 لونًا فقط (8 بت). ومع ذلك ، على عكس سابقتها ، لا يدعم هذا التنسيق الرسوم المتحركة. لهذا الغرض ، تم إنشاء تنسيق MNG آخر. في ملفات PNG ، من المستحيل أيضًا استخدام لوحة CMYK ، لأن هذا التنسيق غير مخصص للعمل الاحترافي مع الرسومات. يمكن فتح ملفات PNG في أي متصفح وفي أي برنامج تقريبًا لعرض الصور وتحريرها. في Windows ، يمكن فتح ملف بملحق PNG بنقرة مزدوجة.

ملحق ملف .png هو صورة PNG. يمكن عرض صورة نقطية ومعالجتها بتنسيق PNG باستخدام البرامج التالية: Microsoft Windows Photos و Microsoft Windows Photo Viewer و Microsoft Paint و Adobe Photoshop CC. أيضا ، يمكن للبرامج المدرجة تحويل الصور والصور والرسومات من هذا التنسيق.

يتم فتح ملف PNG ببرامج خاصة. لفتح هذا التنسيق ، قم بتنزيل أحد البرامج المقترحة.

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

ملف بامتداد ملف PNG هو ملف رسومات الشبكة المحمولة. يستخدم التنسيق ضغطًا بدون فقدان وعادة ما يعتبر بديلاً لملف GIF. ولكن على عكس GIF ، لا يتم دعم الرسوم المتحركة في ملفات PNG.

يتوفر تنسيق PNG في الصور الملونة والرمادية على حد سواء ؛ يتم دعم الطبقات الشفافة. عادةً ما يكون ضغط PNG أفضل من الضغط المستخدم في ملفات GIF. تتمتع JPG في بعض الأحيان بمزايا أكثر من PNG ، ولكن بعد حدوث مثل هذه العيوب في الضغط قد تحدث في الصور التي بها نص أو حول مناطق عالية التباين.

كيفية فتح ملف PNG

لفتح ملفات PNG ، يمكنك استخدام أي متصفح إنترنت أو محرر صور. يحتوي كل من نظامي التشغيل Windows و Mac OS على آليات مضمنة لعرض هذه الصور.

ما هو تنسيق PNG المقصود؟

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

جميع المتصفحات (مثل Chrome و Firefox و Internet Explorer  وما إلى ذلك) سيتصفح تلقائيًا ملفات PNG التي تفتحها على الإنترنت ، مما يعني أنك لست بحاجة إلى تنزيل كل ملف PNG تريد رؤيته على جهاز الكمبيوتر الخاص بك. يمكنك أيضًا استخدام متصفح لفتح ملفات PNG بالفعل على جهاز الكمبيوتر الخاص بك باستخدام اختصار لوحة المفاتيح Ctrl + O. كما تدعم معظم هذه البرامج السحب والإفلات ، بحيث يمكنك ببساطة سحب وإسقاط ملف PNG في المتصفح لفتحه.

هناك أيضًا العديد من الخيارات المستقلة لفتح مثل هذه الصور - وهي محررات رسومية خاصة. بعض تلك الشعبية - XnView , إيرفانفيو , عارض الصور FastStone , محرك جوجل , عين جنوم وإبهام. لتحرير ملفات PNG ، يمكنك استخدام أي من البرامج والتطبيقات المدرجة تقريبًا الطلاء  و Paint.net، أداة GIMP الشائعة ، بالإضافة إلى Adobe Photoshop المعروف.

تحويل PNG

يمكن تحويل ملفات الصور بطرق مختلفة ، على سبيل المثال ، تحويلها من وإلى png باستخدام برامج وخدمات مختلفة على الإنترنت. على سبيل المثال ، هذا يسمح لك بعمل محرر Png - Photoconverter.

ملف صورة يتم تخزينه بتنسيق Portable Network Graphic (PNG). يحتوي على مصفوفة صغيرة من الألوان ويستخدم ضغطًا بدون فقدان بالقرب من ملف .GIF ، ولكن بدون قيود النسخ. يشيع استخدامه لتخزين الرسومات على صور الويب.

تم إنشاء تنسيق PNG (اقرأ بصيغة PNG) استجابة لقيود تنسيق GIF ، وذلك في المقام الأول لزيادة دعم الألوان وتوفير تنسيق صورة بدون ترخيص براءة اختراع. بالإضافة إلى ذلك ، بينما تدعم ملفات GIF فقط وحدات البكسل غير الشفافة أو الشفافة بالكامل ، يمكن أن تتضمن صور PNG قناة شفافية 8 بت تسمح لك بتغيير الألوان من غير شفافة إلى شفافة.

لا يمكن أن تكون صور PNG متحركة كصور GIF. لكن يمكن تنسيق تنسيق .MNG المرتبط. لا توفر صور PNG دعم CMYK لأنها غير مخصصة للاستخدام في الرسومات الاحترافية. تدعم معظم متصفحات الويب صور PNG.

يقوم Mac OS X 10.4 والإصدارات الأحدث بتخزين لقطات الشاشة كملفات PNG. يخزن Ubuntu Linux أيضًا لقطات شاشة مطبوعة بتنسيق PNG.

نوع MIME: image / png

تنزيل البرنامج للتنسيق PNG

في هذه المقالة ، أود أن أتحدث عن ميزة واحدة غير سارة للغاية في Photoshop ، والتي تتجلى عند حفظ الصور الشفافة في PNG24. التقط الصورة الأصلية وانسخ بعض الأجزاء إلى PNG24. لقد فعلت ذلك بهذه الطريقة: باستخدام أداة Polygonal Lasso ، اخترت جزءًا ، وقمت بنسخه ولصقه في مستند جديد ، ثم حفظه من خلال Save for Web:

PNG24 ، 456 كيلوبايت

كما اكتشفنا في الجزء الأول ، في PNG24 ، تتكون الصورة بشكل أساسي من طبقتين: RGB ، التي تحتوي على بيانات حول لون كل بكسل ، وقناة ألفا بمعلومات عن شفافيتها.

تنسيق PNG الرسومي: المعالجة والعرض

من المنطقي الافتراض أنه في المناطق الشفافة تمامًا يجب أن يكون هناك لون واحد من أجل حزم الصورة بشكل أكثر كفاءة. ومع ذلك ، إليك ما حفظه Photoshop في طبقة RGB (رأيته من خلال محرر Seashore):

وبالعين المجردة يمكنك أن ترى أن هناك أجزاء كبيرة من المعلومات غير الضرورية على الإطلاق:

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

1. افتح المثال في Photoshop وحدد الصورة في الطبقة: Ctrl + انقر على الصورة الصغيرة للطبقة في لوحة الطبقات.

2. انتقل إلى وضع القناع السريع (Q).

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

4. اخرج من وضع القناع السريع (Q) وعكس التحديد (حدد ← معكوس أو Ctrl + Shift + I). تم تحديد وحدات البكسل الشفافة تمامًا فقط.

5. املأ المنطقة المحددة باللون الأسود (هناك العديد من الطرق ، على سبيل المثال ، من خلال Edit → Fill).

6. عكس التحديد مرة أخرى وإضافة قناع إلى الطبقة (أيقونة في لوحة الطبقات).

7. الآن نقوم بالحفظ للويب ونشاهد كيف "فقدت الوزن" بأعجوبة بمقدار 122 كيلوبايت.

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

يتبع.

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

دعنا نحاول معرفة المزايا التي يوفرها هذا التنسيق لتتعلم كيفية استخدامها عند إعداد الرسوم التوضيحية للويب.

لنبدأ بالمصطلحات. أفترض أن غالبية القراء يستخدمون Photoshop ووجدوا أسماء PNG-8 و PNG-24 هناك. هذان ليسا تنسيقين مختلفين ، ولكن مجرد اختلافات في PNG نفسه. يتيح لك التنسيق تخزين ثلاثة أنواع من الصور: تدرج الرمادي (يتم استخدام قناة واحدة لوصف الصورة - أبيض) ، والألوان المفهرسة (يتم استخدام لوحة الألوان ، كما هو الحال في GIF) وحقيقي الألوان (يتم استخدام ثلاث قنوات - RGB).

أهم ميزة لصيغة PNG هي ، بالطبع ، خوارزميات الضغط الجديدة. هل يتذكر الجميع أن GIF يضغط بشكل فعال فقط على المساحات الأفقية أحادية اللون؟ الآن يمكنك نسيان هذا القيد:

GIF ، 2568 بايت

PNG-24 ، 372 بايت

الميزة الثانية المهمة هي تصفية المسح الضوئي ، أو مرشحات دلتا ، وبفضلها يمكن أن تحصل أداة تعبئة PNG على بيانات أكثر ملاءمة للضغط.

دعونا نلقي نظرة على مثال لكيفية عملهم. التقط صورة 5 × 5 بكسل بتدرج أفقي وأظهر بشكل تخطيطي كيف يمكن حفظها في ملف (كل رقم هو لون فريد).

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

يظهر الرقم 2 أمام كل سطر. هذا هو الفلتر الذي تم تطبيقه على الخط. في هذه الحالة ، هو مرشح Up ، الذي يخبر مفكك التشفير: "بالنسبة للبكسل الحالي ، خذ قيمة البكسل أعلاه وأضف القيمة الحالية إليه." في حالتنا ، هذا هو 0 ، لأن ألوان البكسل الحالية والعليا لا تختلف. ويمكن تعبئة هذه البيانات بشكل أكثر كفاءة إذا كانت لدينا صورة كبيرة بما فيه الكفاية.

لماذا كتبت قد؟؟؟ لأنه في حالتنا المثالية سيكون مثل هذا المخطط أكثر فعالية:

هنا يتم تطبيق المرشح 1 ، المسمى Sub ، الذي يخبر مفكك التشفير: "خذ قيمة البكسل إلى يسار الرمز الحالي وأضف القيمة الحالية إليه". في هذه الحالة ، 1.

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

تحقق من تشغيل الفلاتر:

قد يلاحظ القارئ اليقظ أن المرشحات لا تطبق على الملف بأكمله ، ولكن على الأسطر.

ملف PNG - ما هو؟

هذا يعني ذلك كل  قد يكون السلسلة له  مرشح اتضح أنه يمكن أن تكون هناك 5 طرق لتصفية صورة واحدة. بشكل عام ، فإن مهمة التشفير الجيد هي تحديد قيم المرشح التي يكون حجم الملف عندها ضئيلاً. لسوء الحظ ، لا يقوم Photoshop دائمًا بعمله بشكل جيد ، لذلك فإن العديد من الأدوات مثل OptiPNG و PNGCrush تأتي لإنقاذها ، والتي في عدد كبير من التمريرات تحدد طرق تصفية مختلفة واستراتيجيات ضغط البيانات ، وبالتالي تقلل بشكل كبير من كمية بعض الصور المعقدة. ومع ذلك ، تجدر الإشارة إلى أن هذه البرامج لا تضمن خفضًا في حجم كل ملف ، فهي تحاول فقط العثور على أفضل طريقة لترميز البيانات.

لقطة مؤلمة أخرى لـ Photoshop لأنه لا يعرف كيفية حفظ الصور في وضع تدرج الرمادي ، أي أنه لا يعرف كيفية خفض عمق اللون. هنا ، ستوفر لنا الأدوات المذكورة أعلاه مرة أخرى ، والتي ، إذا أمكن ، تقلل من عمق الألوان ، دون المساس بجودة الصورة.

PNG-24 (فوتوشوب ← تروكولور) ،   8167 بايت

PNG-24 (Photoshop + OptiPNG → تدرج الرمادي) ،   6132 بايت

مزايا التدرج الرمادي على اللون الحقيقي واضحة: على سبيل المثال ، يتم تسجيل اللون الأبيض في الحالة الأولى (في العلامة العشرية) بالرقم 255 ، وفي الحالة الثانية - 16777215.

الآن ، مسلحين بالمعرفة حول تخزين بيانات PNG ، يمكننا استخدامها في إعداد الصور للويب. عن ذلك - في المقالات التالية.

PNG (Portable Network Graphics) ، وينطق "ping" - تنسيق نقطي لتخزين المعلومات الرسومية التي تستخدم ضغطًا بدون فقد. تم إنشاء PNG لتحسين واستبدال تنسيق GIF بتنسيق رسومي لا يتطلب ترخيصًا لاستخدامه. PNG هو معيار دولي (ISO IEC 15948: 2003) وموصى به رسميًا بواسطة W3C.

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

تم تصميم تنسيق PNG ليحل محل تنسيق GIF المتقادم والبسيط ، وأيضًا إلى حد ما لاستبدال تنسيق TIFF الأكثر تعقيدًا.

إذا كنا نتحدث عن تصميم الويب ، فإن المقارنة مع GIF لها المزايا الرئيسية التالية:

ضغط محسّن: في معظم الحالات ، يكون حجم صورة PNG أصغر مما هو عليه في تنسيق GIF.
- المزيد من الألوان في الصورة: عدد غير محدود من الألوان في الصورة ، بينما الحد الأقصى لـ GIF هو 256.
- دعم قناة ألفا الاختيارية: بينما يدعم GIF فقط الشفافية الثنائية ، تسمح لك PGN بتحقيق عدد غير محدود من تأثيرات الشفافية من خلال دعم قناة ألفا.

العيب بالطبع هو عدم وجود دعم للرسوم المتحركة ، مثل GIF. على الرغم من وجود معيار مماثل للرسوم المتحركة يسمى رسومات شبكة الصور المتعددة (MNG) ، إلا أنه ليس واسع الانتشار ، وبالتالي ، لا يدعمه المتصفحات الحديثة بشكل كبير.