صور مثل مربعات - ما بالداخل؟ تقرير في ياندكس

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

تحدثت بولينا غورتوفايا من شركة Evil Martians في مؤتمر I   Frontend في فبراير. بمساعدة التجربة ، اكتشفت بولينا كيفية تحويل الصور البسيطة إلى "صور فعالة" باستخدام المقاييس. الأدوات التي يمكن أن تفعل ذلك بالنسبة لنا ، فحص بولينا أقرب إلى نهاية التقرير. كانت النتيجة رحلة رائعة إلى داخل ومبادئ تشغيل التنسيقات المختلفة: من PNG و JPEG إلى AV1 والغريبة.


- تحية للجميع. اسمي بولينا ، أنا الواجهة في شركة "Evil Martians".

ربما تعرف المريخ من مصادرنا العديدة المفتوحة. سأخبركم عنه قليلاً لاحقاً. وربما يجب أن أقول أننا ما زلنا نطور منتجات ، وليس مجرد رؤية مفتوحة المصدر.



ستكون مواد التقرير متاحة لك من خلال رابط رائع في المستودع على GitHub.



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

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



لنلقي نظرة على مثال. لدي قطة بتنسيق PNG. أعتقد أننا بحاجة إلى تحسينه. ماذا افعل؟ أقوم بإنشاء إصدار WebP وأضع الصورتين بعناية في علامة <picture>. هل تعتقد أنني أحسنت هنا أم لا؟ لماذا يوجد عدد قليل من اليدين؟ أنا حقا أحسنت!

لقد فعلت كل شيء بشكل صحيح ، لكن إصدار WebP تحول إلى كيلوبايت أكثر من الإصدار الأصلي. هذا ليس ما أردت.




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

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



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



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



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

أفادت Pengashka أنها PNG ، أول ثماني بايت في الحاوية. مكتوب عليه "PNG". علاوة على ذلك - مرة أخرى ، هذه هي سمة أي حاوية - لديك بعض تصميم القطع. أي أن المعلومات معبأة في أجزاء ، يتم ترتيبها بطريقة أو بأخرى. كيف - تحدد الحاوية. في PNG ، يبدو كالتالي: لديك أربعة بايتات مسؤولة عن الطول وأربعة بايتات مسؤولة عن نوع القطعة. ما أنواع - سنتحدث بعد ذلك بقليل. 

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



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




حسنًا ، لقد قطعناها ، سنرى ما سيحدث. لدينا عدة أنواع من القطع ، وهي مميزة جدًا لأي تنسيق تقريبًا. الأول يسمى IHDR. هناك عدد من القطع تسمى IDATs. قد تبدو هذه الأسماء غريبة بعض الشيء بالنسبة لك ، ولكننا سنكتشف الآن ما هي. عندما ينتهي كل شيء ، نرى الجزء النهائي.



دعونا نلقي نظرة فاحصة داخل القطع. إن IHDR عبارة عن مقطع meta-chunk ، وتقريباً أي صورة تحتوي على مقطع meta-chunk. يطلق عليه بشكل مختلف ، يتم ترتيبه بشكل مختلف ، ولكن على الأرجح. بدونها ، لا يستطيع برنامج فك الضغط الخاص بك - وهو شيء يظهر لك peengeshki أو non-peengeshki - أن يظهر لك أي شيء. ما يكمن في هذه القطعة؟ مرة أخرى ، المحتوى نموذجي لمعظم التنسيقات. هذا هو الارتفاع والعرض. يتم خياطة الارتفاع والعرض في ملفك ، ويأتي إليك. التالي هو علامات البانتشي النموذجية: bitDepth و colorType و interlacing. 



قبل أن نتحدث عن ما تعنيه هذه الأعلام ولماذا هي مهمة جدًا جدًا بالنسبة لنا ، فلنرى كيف نقوم بتخزين البكسل في pangshes. في الفول السوداني ، يتم تخزين وحدات البكسل داخل قطعة تسمى IDAT. في السيناريو الجيد ، تمثل وحدات البكسل عددًا معينًا من الأرقام التي يتم تعبئتها في مقطع ، ويتم ضغط هذه القطعة بواسطة خوارزمية ضغط الانكماش. من استخدم خوارزمية ضغط الانكماش؟ حسنًا ، متى كانت آخر مرة قمت فيها بضغط شيء؟ هل تعلم أن الانكماش هو gzip؟ لذلك أعتقد - استخدمه الكثيرون.

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

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

إذا كان لديك نفس اللون في خطك ، فسيكون لديك جميع الأصفار ، كل شيء مضغوط تمامًا ، هذا رائع جدًا.



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

ما الخيارات المتاحة؟ الأول هو True Color و alpha. لدينا ثلاث قنوات وثلاثة ألوان وثلاثة أرقام لكل لون. بالإضافة إلى قناة مسؤولة عن الشفافية.

حجم هذا الرقم في البتات هو bitDepth ، وهو نفس العلم الذي رأيناه في مقطع IHDR. كلما كان حجم البت أقل ، كلما كان حجم الملف أصغر ، ولكن كلما قلت الألوان التي يمكنك تقديمها لهم. رقم نموذجي هو 8. كم هو؟ في رأيي ، سيكون هناك 16 مليون مع شيء.

حسنًا ، التحسين الأول الذي يمكنك القيام به هو التخلص من قنوات ألفا في peengesh الخاص بك. سيكون هذا لونًا مختلفًا.

يمكنك التحسين بشكل أفضل واستخدام رقم واحد فقط بدلاً من أربعة أرقام. لكن المشكلة هي أنه يجب أن يكون peengeshka باللونين الأبيض والأسود.

إذا كنت لا تزال تريد رقمًا واحدًا فقط ، وترك الألوان ، فيمكن القيام بذلك أيضًا. ماذا يجري هنا؟ تأخذ كل الألوان داخل peengeshka وتقطعها إلى قطعة منفصلة. سمها لوحة. علاوة على ذلك ، داخل العينة ، المسؤولة عن البكسل داخل قطعة IDAT ، ما عليك سوى تخزين فهرس هذه اللوحة. إذا كان لديك أي لقطة شاشة بدون خلفية معقدة أو بعض الرسم ، فإن هذا الشيء يأتي بشكل مثالي. انها تضغط peengeshki نجاح باهر الحق!

شيء آخر مهم يمكن قوله عن التداخل. ما هو التداخل؟ هذا عندما تقوم بشحن peengeshka تدريجيًا. ليس لديك peengeshka واحد ، ولكن عدة صور. كل صورة تسمى مسح.



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

لكن يبدو هذا. لست متأكدًا مما إذا كنت تريد أن يرى المستخدمون هذا ، على الرغم من أنه قد يكون مفيدًا لمهمتك.

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



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

إذا كنت تريد أن ترى كيف تعمل برامج الترميز الرهيبة ، استخدم المتصفح. كيف يتم ذلك؟ خذ ملف PNG ، وارسمه على القماش ، ثم انقر فوق حفظ ومقارنة ما حدث بما حدث. بشكل عام ، سيزيد Chrome حجم ملفك بمقدار 2.5 مرة ، Firefox - بنسبة 1.6.

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



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

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



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

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

هناك قناتان أخريان مسؤولتان عن اللون. هذه هي CB و CR. مع هذه القنوات يمكننا بالفعل الحصول على القليل من المرح. هنا مع هذه القنوات ، ننتج مثل هذا الإجراء الرائع المسمى Downsampling. نأخذ ونخفض دقة هذه القناة. بالنسبة لـ JPEG ، من المعتاد أن تنخفض إلى النصف. هذا ، في الواقع ، تحصل على ثلاث صور - واحدة أصلية ونصفها بنفس القدر. مرحى!

ما التالي؟ نحن لا نضغط JPEG ، وليس مثل ملف كامل. نكسرها إلى كتل ونضغط بشكل أكبر ، نحن بالفعل نبدأ كتل. يبلغ حجم كتل JPEG 8 × 8 وانظر ماذا يحدث لها. دعونا ننظر فقط إلى القناة Y. CB و CR.



لذا ، فإن الكتلة ليست صورة ، بل أرقام. نحن بحاجة إلى تكبد خسائر في JPEG. هذه الكتلة هي 8 × 8 ، 64 بكسل ، أي واحد يجب التخلص منه؟ واحد على اليسار ، واحد على اليمين ، واحد في المنتصف؟ غير واضح. ولكن هناك الرياضيات الرائعة التي تسمح لنا بحل هذه المشكلة.

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

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

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

نظرًا لأن الأرقام كبيرة في الجزء الأيمن السفلي من اللوحة ، فلن يكون هناك سوى أصفار.



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



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

بعد ذلك ، تحتاج إلى البحث عن قطعتي meta. لماذا اثنان؟ لأن JPEG هي مجموعة كبيرة جدًا من المعايير المختلفة. ما نسميه JPEG هو ، قياسيًا ، JIFF. هذا امتداد خاص لمعيار JPEG. لن أكمل المزيد - بشكل عام ، هناك قطعتا تعريفية ، ثق بي فقط. تحتوي هذه القطع التعريفية على معلومات حول عرض ملفك وارتفاعه وإصدار JPEG. تخيل ، JPEG لديه المزيد من الإصدارات! وإلى جانب ذلك ، هل هو JPEG تقدمي؟ هذا علم مهم. يتحدث عن كيفية توزيع الكتل الخاصة بك بشكل أكبر.

إذا لم يكن JPEG تقدميًا ، فما الذي تحتاجه لفك تشفير الكتل الخاصة بك؟ جودة JPEG ، هذه اللوحة بالذات. إن اللوحة التي تقسم الكتل فيها هي الجودة. لكن JPEG لها صفتان. الجودة الأولى هي المسؤولة عن القناة Y ، والثانية - عن القنوات CB و CR ، وهذا ما يحدد اللون. نظرًا لأننا وضعنا الجودة في ملف وضغطناها جميعًا باستخدام خوارزمية ضغط بدون فقد ، فإننا ما زلنا بحاجة إلى قاموس Huffman Tables خاص لتوسيع هذا.

بعد ذلك تأتي كتلك ، ثم ينتهي JPEG الخاص بك.



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



حول JPEG انتهينا ، يمكنك الزفير ، كل شيء على ما يرام. دعنا نتحدث عن شيء مثير للاهتمام مثل JPEG 2000. هل يستخدم أي منكم في الإنتاج JPEG 2000؟ حسنًا ، من سمع بهذا؟ وأي منكم قد قرأ في المنارة - "استخدم الأشكال الحديثة"؟

بشكل عام ، يعد JPEG 2000 تنسيقًا رائعًا ومثيرًا للاهتمام ، وهو أولاً أكثر فعالية من JPEG. ثانيًا ، لن تصدق ذلك ، فهو في بعض الحالات أكثر فعالية من WebP ، والذي سنتحدث عنه لاحقًا.

يعرف كيف يكون شفافاً ، يعرف كيف يضغط بدون خسارة. مجرد تنسيق مثالي. ولكن للأسف ، نعم ، إنه يعمل فقط في Safari.

من الجدير بالذكر أن JPEG 2000 تم تصميمه بطريقة معقدة للغاية ويعمل على الرياضيات الرائعة التي تسمى تحويل الموجات. إذا كنت مهتمًا فجأة ، google ، وسنذهب إلى أبعد من ذلك.



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

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

كل ما سنتحدث عنه الآن هو ضغط الإطارات الرئيسية والداخلية. هكذا تضغط صورة داخل إطار رئيسي.

دعونا ننظر إلى برنامج ترميز تجريدي في فراغ ومقارنته مع JPEG. حتى الآن يبدو - لماذا تفعل ذلك؟ كل شيء سيصبح أكثر وضوحا ، ثق بي.



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

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

والأحدث - الحد الأقصى لحجم الكتلة ، مرة أخرى ، خاص ببرنامج الترميز الخاص بك. التشفير هو جزء من برنامج الترميز ، ليتم فهمه في المصطلحات. هنا ما زلنا على غرار JPEG.



ما لا يبدو مثل JPEG هو الترميز التنبئي. تحدثنا عنه جزئيا عن peengeshki. ضغط الفيديو الداخلي رائع وفعال فقط بسبب هذا. ماذا يجري هنا؟

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

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



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



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



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



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



لطالما رغبت في تسمية برامج الترميز المجردة في فراغ بأسمائها المناسبة. رحلة تاريخية صغيرة. ماذا حدث في 20 سنة؟ أنا أتحدث فقط عن برامج ترميز الفيديو تلك التي يتم دعمها على الأقل بطريقة ما على الويب. H.264 هو برنامج ترميز يدعم كل شيء وكل شخص. هذا هو الحل الافتراضي للفيديو بأكمله. بعد فترة زمنية معينة ، بعد بضع سنوات ، يظهر برنامج ترميز الفيديو VP8.

هنا تبدأ الحروب البرية ، holivars حول موضوع أي من برامج الترميز هذه أفضل. لقد غوغل لفترة طويلة جدا - لا توجد إجابة. لقد تم كتابة مقالات علمية رائعة حول هذا ، ولكن في المتوسط ​​، إذا قلت نفس الشيء الآن ، ستطير لي الطماطم. لكن ، حسنا ، إنهم نفس الشيء. معدل. ثم لماذا نحتاج ثانية؟

والثاني مطلوب لأنه مجاني. إذا كنت تستخدم H.264 ، فأنت بحاجة إلى حمل أموال MPEG في بعض الظروف. بالنسبة إلى VP8 ، لا تحتاج إلى حمل المال. إنه جيد. لذا ، إطار المفتاح VP8 - هذا هو WebP. في الواقع ، لماذا يجب علينا اختراع تنسيق صورة جديد؟ نأخذ الإطار الرئيسي ، حاولنا بجد ، ضغطنا كل شيء. نسميها كل شكل جديد من الصور ، وفويلا!

ماذا حدث بعد ذلك؟ ثم بعد عدد من السنوات ، يظهر برنامجان آخران لترميز الفيديو ، من MPEG ومن Google ، في وقت واحد تقريبًا. من Google - VP9 ، من MPEG - H.265. بجوار H.265 يوجد معيار صورة جديد يسمى HEIF. لا يدعمه المتصفحات ، وليس واحدًا على الإطلاق. ولكن يتم دعمه من قبل أجهزة Apple الخاصة بك. معيار HEIF مثير للاهتمام بجنون ، لأنه مجرد تجريد لهذه الفكرة. في حاوية HEIF ، يمكنك وضع إطار رئيسي من أي برنامج ترميز تقريبًا. أي أن VP8 ليس تنسيقًا حديثًا. لكن HEIF حديث.

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

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



كيف يتم ذلك في صفحة الويب؟ WebP ، كما قلت ، هو إطار رئيسي VP8 معبأ في حاوية تسمى riff. يوجد مثل هذا الرأس في حاوية riff. هناك ، لا تصدقوا ، مكتوب أن هذا هو WebP. من يشك في ذلك. تقول PNG أنها PNG WebP ، وهناك.

لكن WebP لديه ميزة مثيرة للاهتمام: يمكن أن يكمن الإطار الرئيسي VP8 بداخله ، وهذا ما يسمى عادة WebP. ولكن قد لا يكون الإطار الرئيسي VP8. بشكل عام ، يدعم WebP الضغط دون فقدان. WebP lossless هو تنسيق مختلف تمامًا ولا علاقة له بـ VP8 ، والضغط المفقود ، وما إلى ذلك. لذلك ، عندما يخبرك شخص ما أن WebP أكثر فعالية من أي شيء آخر ، فإن أول سؤال يجب طرحه هو ما هو شيء ويب؟ لأنه إذا تحدثنا عن ضغط بدون فقد ، فهناك ممر طبيعي يمكننا أن نسعى إليه. هذه الاختلافات ، "أكثر فاعلية بنسبة 60٪ من ..." ، هي على الأرجح ليست ضائعة ، ولكن WebP مع خسائر.

حسنًا ، نظريًا كافيًا ، سئمت منه ، فلنلقِ نظرة على شيء بالفعل. ^{_{قابل للنقر}}




لنبدأ بهذا. نلتقط صورة تم التقاطها بواسطة كاميرا احترافية. قص قطعة 1000 × 1000 بكسل منه. هذا ، بالمناسبة ، يبدو رائعًا جدًا على جهاز العرض. نبدأ في النظر في التفاصيل الصغيرة. في الوقت نفسه ، نضغط هذه القطعة حتى نحصل على 15 كيلوبايت بالضبط. ^{_{قابل للنقر}} انظر ماذا يحدث. انخفض JPEG إلى كتل على الفور. في الواقع ، جودة منخفضة ، توقعنا ذلك. هذا ما يبدو عليه WebP. سقطت أيضًا في كتل ، لكن هذه الكتل ليست مرئية بوضوح. عند استخدام برنامج تشفير WebP والتحكم فيه بيديك ، يمكنك التحكم في قوة المرشح المستخدم في WebP. وإذا قمت بفك هذا الفلتر بقوة أكبر ، فيمكنك التخلص من عدد كبير من القطع الأثرية. لذلك ، من الناحية النظرية البحتة ، يمكن أيضًا إزالة هذه الكتل.








وهنا AV1. دعونا فقط نعجب بصمت. انظر كم هو رائع AV1 مدعوم في Firefox ، في Chrome ، لذا يمكنك استخدام فيديو AV1 بدلاً من الصورة إذا أردت فجأة. ^{_{قابل للنقر}} هناك مفسد ، عبثا أضفته. الحالة عندما يهزم PNG WebP. نعم ، PNG في هذه الحالة أكثر فعالية من WebP. هذا لأنني استخدمت WebP مع فقدان. ^{_{قابل للنقر}} ماذا فعلت مع peengeshka؟ لقد صنعت وضع الألوان المفهرس ، أي ، قمت بقص اللوحة ، في رأيي ، إلى 16 لونًا. إنه فعال للغاية لصورة أبيض وأسود. اتضح بشكل جيد ، فقد تقلص كثيرًا. لجودة WebP الضائعة ، حصلنا على حجم أكبر. ومع ذلك ، بالنسبة للخسارة ، فمن المتوقع أن يكون أكثر كفاءة من peengeshka. لقد حصلنا على فوز.











أنا ألخص. يمكن أن تهزم pangshes الرائعة جدًا تنسيقات الضغط الضائعة ولا تهزم WebP بدون فقدان. للأسف ، للأسف. ^{_{قابل للنقر}} ربما تعذبك السؤال: لماذا تفعل هذا ، هل نعرف ما هو SVG؟ وأنا أعلم ، ولكن PNG أكثر فعالية لبعض الأحجام. تبين أن هذه الصورة أكثر فعالية من SVG لأحجام مثل 200 × 200. ثم يفوز SVG بالطبع. ^{_{قابل للنقر}} الآن دعونا نلقي نظرة على مايك. هذا مايك. أبعاده 3000 × 3000 بكسل. JPEG مقابل WebP. كان من الواضح هنا أن JPEG كان يفوز. ولكن في هذه الحالة ، حصلت على حوالي ستة بالمائة من النصر مقابل نفس الجودة البصرية. هذه ميزة في الصورة وكيف قمت بإعداد هذه الصورة. يمكنك بعد ذلك أن تسألني كيف فعلت ذلك.












^{_{قابل للنقر.}}

ومع ذلك ، يعتمد كل شيء إلى حد كبير على معلمات برنامج التشفير. إذا حاولت بجد وفك معلمات التشفير بطريقة خاصة ، فسيبدأ JPEG في هزيمة WebP في الحجم بنفس الجودة المرئية. أود أن أستنتج أن القطط تتقلص بشكل أفضل من JPEG ، ولكن لا. هذا مجرد مثال لكيفية فكها بالطريقة التي تريدها إذا أردت. ^{_{قابل للنقر}} هذه جودة منخفضة للغاية. ينخفض ​​JPEG إلى كتل. هذا واضح بشكل خاص على جهاز العرض - تحول الأنف إلى اللون الأزرق عند الكلب ، وأصبح مربعًا. WebP ليس مريضًا جدًا. يبدو أن كل شيء رائع وجيد ، ولكن الشيء هو أنه بالنسبة للصفات المنخفضة للغاية ، يوفر WebP نوعين تقريبًا ، أو ربما ثلاثة أضعاف حجم الملف من JPEG. لذا هنا تحتاج أيضًا إلى التفكير في الجودة التي تريدها. ^{_{قابل للنقر}}









هذه هي المقارنة الأكثر صدقًا. لذا عليك المقارنة ، لأن H.264 و WebP متشابهان. من تعتقد فاز هنا؟ H.264. ولكن لنكون صادقين ، لم تكن التجربة نظيفة تمامًا. بطريقة جيدة ، في كل من WebP و H.264 ، يكون إطار الفيديو واضحًا تقريبًا. ^{_{قابل للنقر}} ولكن مع AV1 ، كل شيء واضح تمامًا. فوز 30 في المئة على نفس الجودة البصرية. مرحى! ^{_{قابل للنقر من}} المهم جدًا فهم نوع الصورة التي تضعها وكيف يستجيب هذا التنسيق أو ذاك لجودة الصورة. هنا يزن الكلب بتنسيق WebP 79 كيلوبايت بجودة حوالي 75٪ مقابل 56 كيلوبايت في JPEG. لماذا يحدث هذا؟











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

لذا ، فإن الصور شيء معقد. هل يمكنهم إبطاء واجهتك؟ سؤال مهم وجيد.



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



إذا كنت ترغب حقًا في جعلها صفقة ، افتح Chrome ، وابحث عن سلاسل التنقيط المقابلة وحدث فك تشفير الصورة ، ستجدها.



إذا كنت فضوليًا جدًا ، يمكنك الانتقال إلى علامة تبويب التتبع ومشاهدة التفاصيل مع ما يحدث عند فك تشفير صورة.

أدوات التحسين

أهم شيء هو أدوات التحسين. نحن نعرف الآن تقريبًا ما نريد. يبقى أن نفهم كيف نقوم بذلك.



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


^{_{رابط من الشريحة}}

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



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



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

علاوة على ذلك ، إذا كنت تريد تغيير الحجم ، فعندئذٍ في عنوان url مباشرة ، قم بتمرير معلمات تغيير الحجم. إذا كنت ترغب في تحسين - نفس الشيء. ما عليك سوى نقل العنوان الأصلي لصورتك.



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



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

إذا كنت تريد القيام بذلك في متصفح ، من فضلك. ربما تحتاج إلى ربط مكتوب على الأرجح في الإيجابيات أو في C. ولكن ما الذي يمنعك من تجميع كل هذا في WebAssembly؟ هناك تطبيق رائع يسمى Squoosh. يفعل ذلك بالضبط. يمكنك أيضا ، حاول ، سيكون باردا. انا فعلا احب.

شكرا لكم جميعا على اهتمامكم. مواد التقرير - بالإشارة .