تحطيم بودكاست الحلقة 39 مع آدي عثماني: تحسين الصورة

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

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

وتظهر الملاحظات

• "تحسين الصورة" ، آدي عثماني
• آدي على تويتر
• موقع Addy الشخصي

تحديث اسبوعي

• Meet: لديه ، محدد رئيسي CSS أصلي (والمزيد)
  كتبه أدريان بيسي
• ثلاث أدوات تدقيق أمامية اكتشفتها مؤخرًا
  كتبه ستيفان جوديس
• ألواح الغلايات الأمامية المفيدة ومجموعات المبتدئين
  كتبها كوزيما ميلكي
• تم تصميم الويب بشكل جيد: الاستفادة من الصوت
  بقلم فريدريك أوبراين
• عندما لا تكون CSS كافية: متطلبات JavaScript للمكونات التي يمكن الوصول إليها
  بقلم ستيفاني إيكلز

نسخة طبق الأصل

درو ماكليلان: إنه مدير هندسي يعمل على Google Chrome ، حيث يركز فريقه على السرعة ، مما يساعد في الحفاظ على سرعة الويب. مكرسًا لمجتمع المصدر المفتوح ، تشمل مساهماته السابقة Lighthouse و Workbox و Yeoman و Critical و to do NVC. لذلك نحن نعلم أنه يعرف طريقه نحو تحسين أداء الويب. لكن هل تعلم أنه يريد أن يفوز بجائزة أوسكار لأفضل ممثلة في دور مساعد بسبب خطأ كتابي؟ أصدقائي المحطمون ، يرجى الترحيب بأدي عثماني. مرحبًا آدي. كيف حالك؟

آدي عثماني: أنا محطمة.

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

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

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

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

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

درو ماكليلان: لذا فإن جمع كل ذلك في كتاب واحد مدروس جيدًا من مصدر موثوق هو أمر هائل حقًا.

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

آدي عثماني: لكن مشهد الصورة قد تطور كثيرًا ، حتى في العام الماضي. لقد رأينا دعم WebP يتجاوز أخيرًا خط النهاية في معظم المتصفحات الحديثة. دعم صور AVIF في Chrome ، قادم إلى Firefox ، JPEG XL ، التحميل البطيء. وبشكل عام ، رأينا تحسينات في كيفية استخدام الصور على الويب بشكل ملموس في المتصفحات. ولكن مرة أخرى ، هناك الكثير من الأشخاص ليبقوا في القمة.

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

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

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

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

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

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

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

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

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

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

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

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

درو ماكليلان: لكن تصوري في الصناعة هو أننا لا نرى نفس النوع من الإقبال على مستوى القاعدة الشعبية. هل ما زال WebP ينتظر يومه في المستقبل؟

آدي عثماني: أعتقد أنني سأقول أن WebP قادم. كان الكثير من الأشخاص ينتظرون دعم Safari و WebKit حتى يتحقق ، وقد حصلنا عليه أخيرًا. ولكن عندما نفكر في تنسيقات الصور الجديدة ، من المهم جدًا أن نفهم ما يعنيه الدعم في الواقع. هناك دعم للمتصفح لفك تشفير تلك الصور. نحتاج أيضًا إلى دعم أدوات جيد حقًا بحيث سواء كنت في بيئة عقدة ، صورة CDN ، إذا كنت في CMS ، لديك القدرة على استخدام تنسيقات الصور هذه.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

آدي عثماني: هذا سؤال ممتاز. إذن JPEG XL هو تنسيق صورة من الجيل التالي ، من المفترض أن يكون للأغراض العامة وهو ترميز من لجنة JPEG. لقد بدأت ببعض الجذور في تنسيق الموافقة المسبقة عن علم من Google ثم تنسيق FUIF الخاص بشركة Cloudinary. كان هناك الكثير من التنسيقات على مر السنين التي تم دمجها نوعًا ما في هذا الجهد ، ولكنها أصبحت أكثر بكثير من مجرد نوع مجموع أجزائها الفردية وبعض مزايا JPEG XL هي رائعة للحصول على دقة عالية الصور ، جيدة حقًا لعدم فقدها ، فهي تدعم فك التشفير التدريجي ، وتحويل ترميز JPEG بدون فقدان ، وهي أيضًا نوع من الضجة وخالية من حقوق الملكية ، وهي بالتأكيد فائدة. أعتقد أن JPEG XL قد يكون مرشحًا قويًا حقًا. لقد تحدثنا سابقًا ، إذا كنت ستختار واحدًا فقط ، فما الذي ستستخدمه؟ وأعتقد أن JPEG XL لديه القدرة على أن يكون ذلك.

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

درو ماكليلان: أخبرنا عن AVIF ، هذا واحد آخر لست على دراية به.

آدي عثماني: حسنًا. لذلك ذكرنا في وقت سابق قليلًا أن AVIF ربما يكون مرشحًا أفضل إذا كنت بحاجة إلى الانتقال إلى معدلات بت منخفضة وتهتم بعرض النطاق الترددي أكثر من دقة الصورة ، كمبدأ عام ، يأخذ AVIF زمام المبادرة حقًا في ضغط منخفض الدقة وعالي النداء. و JPEG XL ، يجب أن تتفوق في الدقة المتوسطة إلى العالية ، لكنها تنسيقات مختلفة قليلاً في حقوقها الخاصة. نحن في مكان يتمتع فيه AVIF بدعم جيد للمتصفح بشكل متزايد ، لكن دعني أتراجع خطوة إلى الوراء وأتحدث أكثر قليلاً عن التنسيق. لذا يستند AVIF نفسه إلى برنامج ترميز الفيديو AV1 ، والذي تم توحيده بواسطة Alliance for Open Media ، وهو يحاول الحصول على مكاسب ضغط كبيرة للأشخاص عبر JPEG ، عبر WebP ، وهو ما تحدثنا عنه سابقًا. وعلى الرغم من أن المدخرات الدقيقة التي يمكنك الحصول عليها من AVIF ستعتمد على المحتوى وأهداف الجودة الخاصة بك ، فقد رأينا الكثير من الحالات التي يمكن أن توفر فيها أكثر من 50٪ من التوفير مقارنةً بـ JPEG.

Addy Osmani: إنه يحتوي على الكثير من الميزات الجيدة ، إنه قادر على منحك دعمًا للحاوية لميزات جديدة مثل النطاق الديناميكي العالي والتدرجات اللونية الواسعة ، وتوليف حبيبات الفيلم. ومرة أخرى ، على غرار الحديث عن المواجهة للأمام ، فإن أحد الأشياء اللطيفة حول علامة الصورة هو أنه يمكنك تقديم ملفات AVIF للمستخدمين في الوقت الحالي وستظل تعود إلى WebP أو JPEG في الحالات التي لا يتم دعمها فيها بالضرورة . لكن بالعودة إلى مثالك حول Photoshop Save For Web ، يمكنك أخذ JPEG بحجم 500 كيلو بايت ، وحاول التصوير بجودة مماثلة لـ Photoshop Save For Web وباستخدام AVIF ، أود أن أقول إنك ربما تكون قادرًا على الوصول إلى نقطة حيث يكون حجم الملف حوالي 90 كيلو بايت ، أي 100 كيلو بايت لذلك هناك الكثير من التوفير مع عدم وجود خسارة حقيقية ملحوظة في الجودة.

Addy Osmani: ومن الأشياء الرائعة في هذا الأمر أنك لن ترى قدرًا كبيرًا من فقدان النسيج في أي صور تحتوي على تفاصيل غنية. لذلك إذا كان لديك صور للغابات أو المعسكرات أو أي من تلك الأنواع من الأشياء ، فلا يزال من المفترض أن تبدو غنية حقًا باستخدام AVIF. لذلك أنا متحمس جدًا للاتجاه الذي يتبعه AVIF. أعتقد أنه يحتاج إلى مزيد من العمل فيما يتعلق بدعم الأدوات. لذلك تركت تغريدة حول هذا الأمر في اليوم الآخر ، لدينا عدد من الخيارات لاستخدام AVIF الآن ، بالنسبة للصور الفردية ، لدينا Squoosh ، squoosh.app ، والذي كتبه فريق آخر في Chrome ، لذا اصرخ إلى Surma و Jake للعمل على Squoosh. يحتوي Avif.io على عدد من الخيارات الجيدة للأشخاص الذين يحاولون استخدام AVIF اليوم ، بغض النظر عن مجموعة التقنيات التي يركزون عليها ، تدعم Sharp AVIF أيضًا.

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

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

آدي عثماني: نعم ، هذا صحيح.

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

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

آدي عثماني: إذن ، هل هناك طرق أخرى يمكننا من خلالها معالجة هذه المشاكل؟ لا أريد بيع الأشخاص كثيرًا على شبكات CDN للصور ، أريدهم أن يقفوا بمفردهم. ولكن هذا أحد تلك الأماكن حيث يمكن لفكرة تسمى التفاوض على المحتوى أن تقدم لك بالفعل مسارًا مثيرًا للاهتمام. لذلك ، تحدثنا قليلاً عن علامة الصورة حيث يتعين عليك إنشاء مجموعة من الموارد المختلفة وتحديد ترتيب التفضيل ، الصحيح ، HTML الإضافي. مع تفاوض المحتوى ، ما يقوله هو أننا نقوم بكل هذا العمل على الخادم. لذلك يمكن للعملاء إخبار الخادم بالتنسيقات التي يدعمها مقدمًا عبر قائمة أنواع MIME عبر رأس قبول HTTP. بعد ذلك ، يمكن للخادم القيام بكل الأعمال الشاقة المتمثلة في إنشاء وإدارة الموارد النهائية وتحديد الموارد التي سيتم إرسالها إلى العملاء. وأحد الأشياء القوية هنا هو إذا كنت تستخدم صورة CDN ، فيمكنك الإشارة إلى مورد واحد.

Addy Osmani: لذلك ربما إذا كان لدينا صورة جرو مثل puppy.JPEG ، فيمكننا إعطاء الأشخاص عنوان URL لـ puppy.JPEG وإذا كان متصفحهم يدعم WebP أو يدعم AVIF ، فيمكن للخادم أن يصبح ذكيًا حقًا في تقديم الخدمة على اليمين صورة لهؤلاء المستخدمين اعتمادًا على شكل دعمهم ، ولكن بخلاف ذلك ، تراجع دون الحاجة إلى القيام بالكثير من العمل الإضافي بنفسك. الآن ، أعتقد أن هذه فكرة قوية. هناك الكثير الذي يمكنك القيام به على الخادم ، نتحدث أحيانًا عن عدم تمكن الجميع من الوصول إلى جودة شبكة قوية حقًا ، ويمكن أن يكون نوع اتصالك الفعال مختلفًا حقًا اعتمادًا على مكان وجودك.

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

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

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

Addy Osmani: وبعد ذلك يمكنك استخدام ذلك كمطور كإشارة لتقول ، "حسنًا ، المستخدم مقيد إلى حد ما ، ربما سنتصفحه أسفل الصور الأصغر أو الصور ذات الجودة الأقل بكثير." لكنهم ما زالوا قادرين على رؤية بعض الصور على الإطلاق ، وهو أفضل من انتظارهم لوقت طويل جدًا حتى يتم تقديم شيء أكثر ثراءً. تتمثل الفوائد الأخرى لهذه الأنواع من الإشارات في أنه يمكنك استخدامها لتقديم الوسائط بشكل مشروط. لذلك ربما تكون هناك حالات يكون فيها النص هو أهم شيء في تلك الصفحة ، ربما يمكنك إيقاف تشغيل تلك الصور إذا اكتشفت أن المستخدمين في بيئة مقيدة نوعًا ما. سأقضي 30 ثانية فقط في هذا ، لكن يمكنك حقًا دفع هذه الفكرة إلى أقصى الحدود. بعض الأشياء المثيرة للاهتمام التي يمكنك القيام بها باستخدام Save-Data ربما تؤدي إلى إيقاف تشغيل الميزات المكلفة جدًا المطبقة في JavaScript.

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

درو ماكليلان: من المحتمل ، أعتقد أنه يمكن أن يؤدي إلى ترقيم الصفحات ويمكنك إرجاع 10 نتائج على الصفحة بدلاً من 100 وهذه الأنواع من الأشياء أيضًا. هناك الكثير من القدرات الشيقة والمثيرة للاهتمام. أعتقد أننا جميعًا على دراية بالعملية المحبطة المتمثلة في تجهيز موقع جديد ، وتحسين جميع صورك ، وتسليمها إلى العميل ، ومنحهم نظام إدارة المحتوى لإدارة المحتوى واكتشاف أنهم يستبدلون كل شيء بـ الصور المحسنة بشكل سيء. أعني ، مرة أخرى ، أن صورة CDN ، على ما أعتقد ، ستكون حلاً مناسبًا حقًا لذلك ، ولكن هل هناك حلول أخرى ، هل هناك أشياء يمكن أن يقوم بها CMS على الخادم للمساعدة في ذلك أم أنها صورة CDN على الأرجح طريقة للذهاب؟

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

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

Addy Osmani: So I think the image CDNs can definitely play a role in helping out here. Ultimately, the thing that's important is making sure you have a solution in place between people, stakeholders who might be uploading those images, and what gets served down to users. If it's an image CDN, if it's something you've rolled yourself, if it's a built step, just needs to be something in place to make sure that you are not serving down something that's very, very large and inefficient.

Drew McLellan: Talking about animated GIFs, they're surprisingly popular. They're fun, we love them, but they're also huge. And really, it's a case where a file format that was not designed for video is being used for video. Is there a solution to that with any of these image formats? ماذا نستطيع ان نفعل؟

Addy Osmani: Oh, gosh. The history of GIFs is fascinating. We saw a lot of the formats we know and love or have been around for a while were originated in the late '80s to early '90s, and the GIF is one of those. It was created in 1987. I'm about as old as the GIF.

Addy Osmani: As you mentioned, it wasn't originally created necessarily for use case. I think it was Netscape Navigator which in mid '90s maybe added support for looping GIFs and giving us this kind of crazy fun way to do memes and the like, but GIFs have got so many weaknesses. They're kind of limited in many cases to a very finite color palette; 256 colors, in many cases. They're a bitmapped raster format with pixel value stored in image files.

Addy Osmani: They're very inefficient, for a number of reasons. And you mentioned that they're also quite large. I think that we've gotten into this place of thinking that if we want a short segment of video or animation that's going to be looping, the GIF is the thing that we have to use. And that's just not the case.

Addy Osmani: While we do see that there are modern image formats that have support for animation, I think that the most basic thing you can do these days is make sure you're serving a video down instead of a GIF. Muted auto-play videos combined with HD64, HD65, whatever video you're going to use, can be really powerful, and significantly smaller for use cases where you need to be showing a sequence of images.

Addy Osmani: There are options for this. AVIF has got image sequences in there, potentially. Other formats have explored these ideas as well. But I think that one thing you can do is, if you're using GIFs today, or you have users who are slightly less technical who are using GIFs today, try to see if you can give them tools that will allow them to export a video instead, or if your pipeline can take care of that for them, that's even better.

Addy Osmani: I have plenty of conversations with CMS providers where you do see people uploading GIFs. They don't know the difference between a video and a GIF file. But if you can just, whether it's with an image CDN or via some built process, change the file over to a more efficient format, that would be great.

Drew McLellan: We talked briefly about tools like ImageOptim that manage to strip out information from the files to give us the same quality of result with a smaller file size. I'm presuming that's because the file formats that we commonly deal with weren't optimized for delivery over the Web in the first place, so they're doing that step of removing anything that isn't useful for serving on the Web. Do these new formats take that into consideration already? Is something like ImageOptim a tool that just won't be required with these newer formats?

Addy Osmani: I'm anticipating that some of the older formats… Things that have been around for a while, take a while to phase out or to evolve into something else. And so I can see tools like ImageOptim continuing to be useful. Now, what are modern image formats doing that are much better? Well, I would say that they're taking into account quite a few things.

Addy Osmani: They're taking into account, are there aspects of the picture that the human eye can't necessarily make out a difference around? When I'm playing around with different quality settings or different codecs, I'm always looking for that point where if I take the quality down low enough, I'm going to see banding artifacts. I'm going to see lots of weird looking squares around my buildings or the details of my picture.

Addy Osmani: But once those start to disappear, I really need to start zooming in to the image and making comparisons across these different formats. And if users are unlikely to do that, then I think that there are good questions around is that point of quality good enough? I think that modern image formats are pretty good at being able to help you navigate, filtering out some of those details pretty well. Keeping in mind what are the needs of color, because obviously we've got white gamut as a thing right now as well.

Addy Osmani: Some people might be okay with an amount of changing your color palette versus not, depending on the type of images that you have available, but definitely I see modern formats trying to be resilient against things like generational loss as well. Generational loss is this idea that… We mentioned memes earlier. A common problem on the Web today is you'll find a meme, whether it's on Facebook or Instagram or Reddit or wherever else, you'll save it, and maybe you'll share it around with a friend. Maybe they'll upload it somewhere else. And you suddenly have this terrible kind of copy machine or fax effect of the quality of that image getting worse and worse and worse over time.

Addy Osmani: And so when I see something get reshared that I may have seen three months ago, now it might not be really, really bad quality. You can still make out some of the details, but image formats, being able to keep that in mind and work around those types of problems, I think are really interesting.

Addy Osmani: I know that JPEG XL was trying to keep this idea of generational loss in mind as well. So there's plenty of things that modern codecs and formats are trying to do to evolve for our needs, even if they're very meme focused.

Drew McLellan: Let's say you've inherited a project that has all sorts of images on it. What would be the best way to assess the state of that project in terms of image optimization? Are there tools or anything that would help there?

Addy Osmani: I think that it depends on how much time you've got to sink into the problem. There are very basic things people can try doing, like obviously batch converting those images over to more modern formats at the recommended default quality and do an eyeball check on how well they're doing compared to the original.

Addy Osmani: If you're able to invest a little bit more time, there are plenty of tools and techniques like DSSIM and other ways of being able to compare what the perceptual quality differences are between different types of images that have been converted. And you can use that as a kind of data-driven approach to deciding, if I'm going to batch convert all of my old images to WebP, what is the quality setting that I should be relying on? If I'm going to be doing it for AVIF or JPEG XL, what is the quality setting that I should be relying on?

Addy Osmani: I think that there's plenty of tools people have available. It really just depends on your time sink that's possible. Other things that you can do, again, going back to the image CDN aspect, if you don't have a lot of time and you're comfortable with the cost of an image CDN, you can just bulk upload all of those images. And there are CDNs that support this idea of automatic quality setting. I think in Cloudinary it's q_auto, or something like that.

Addy Osmani: But the basic idea there is they will do a scan of the image, try to get a sense of the type of content that's in there, and automatically decide on the right level of quality that you should be using for the images that are getting served down to users. And so you do have some tooling options that are available here, for sure.

Drew McLellan: I mean, you mentioned batch processing of images. Presumably you're into the area of that generational loss that you're talking about, when you do that. When you take an already compressed JPEG and then convert it to a WebP, for example, you risk some loss of quality. Is batch converting a viable strategy or does that generational loss come too much into play if you care about the pristine look of the images?

Addy Osmani: I think it depends on how much you're factoring in your levels of comfort with lossy versus lossless, and your use case. If my use case is that I've inherited a project where the project in question is all of my family's photos from the last 20 years, I may not be very comfortable with there being too much quality loss in those images, and maybe I'm okay with spending a little bit more money on storage if the quality can remain mostly the same, just using a more modern format.

Addy Osmani: If those are images for a product catalog or any commerce site, I think that you do need to keep in mind what your use case is. Are users going to require being able to see these images with a certain level of detail? And if that's the case, you need to make those trade-offs in mind when you're choosing the right format, when you're choosing the right quality.

Addy Osmani: So I think that batch is still okay. To give you a concrete idea of one way of seeing people approach this at scale, sometimes people will take a smaller sample of the images from that big collection that they've inherited, and they'll try out a more serious set of experiments with just that set. And if they're able to land on an approach that works well for the sample, they'll just apply it to the whole batch. And I've seen that work to varying degrees of success.

Drew McLellan: So optimizing file size is just sort of one point on the overall image optimization landscape. And I'd like to get on to talking about what we can do in our browsers to optimize the way the images are used, which we'll do after a quick word from this episode sponsor.

Drew McLellan: So we've optimized and compressed our large files, but now we need to think about a strategy for using those in the browser. The good old faithful image tag has gained some new powers in recent times, hasn't it?

Addy Osmani: Yeah, it has. And maybe it's useful for folks… I know that a lot of people that ask me about images these days also ask me to frame it in terms of metrics and the Core Web Vitals. Would it be useful for me to talk about what the Core Web Vitals are and maybe frame some of those ideas in those current terms?

Drew McLellan: Absolutely, because Core Web Vitals is a sort of initiative from Google, isn't it, that we've seen more recently? We're told that it factors into search ranking potentially at some level. What does Core Web Vitals actually mean for us in terms of images?

Addy Osmani: Great question. As you mentioned, Core Web Vitals is an initiative by Google, and it's all about trying to share unified guidance for quality signals. That can be pretty key to delivering a great user experience on the Web. And it is part of a set of page experience signals Google Search may be evaluating for ranking purposes, but they can impact the Core Web Vitals in a number of ways.

Addy Osmani: Now, before I talk about what those ways are, I should probably say, what are the Core Web Vitals metrics? There's currently three metrics that are in the Core Web Vitals. There's largest contentful paint, there's cumulative layout shift, and there's first input delay. Now, in a lot of modern Web experiences we find that images tend to be one of the largest visible elements on the page. We see a lot of product pages where we have a big image that's the main product item image. We see images in carousels, in stories and in banners.

Addy Osmani: Now, largest contentful paint, or LCP, is a Core Web Vitals metric that tries to measure when the largest contentful element, whether it's an image text or something else, is in a user's viewport, such that we're able to tell when that image becomes visible. And that really allows a browser to determine when the main content of the page has really finished rendering.

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

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

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

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

Addy Osmani: الآن ، إذا كان الأمر كذلك ، إذا وجدت نفسك في مكان يتم فيه طلب الصورة في وقت متأخر جدًا ، يمكنك الاستفادة من ميزة المتصفح التي تسمى link rel preload للتأكد من أن المتصفح يمكنه اكتشاف هذه الصورة في وقت مبكر بقدر الإمكان. الآن ، التحميل المسبق هو حقًا قدرة قوية. إنه أيضًا أمر تحتاج إلى الاهتمام به كثيرًا. في هذه الأيام ، من السهل جدًا الوصول إلى مكان ربما تسمع فيه أننا نوصي بالتحميل المسبق لمفتاحك-

Addy Osmani: ربما تسمع أننا نوصي بالتحميل المسبق لصورة البطل الرئيسية ، بالإضافة إلى البرامج النصية الرئيسية ، بالإضافة إلى الخطوط الرئيسية. ويصبح هذا مجرد محاولة كبيرة وضخمة للتأكد من أنك تقوم بترتيب الأشياء بالترتيب الصحيح. لذا فإن صور LCP هي بالتأكيد مكان رئيسي واحد يستحق أن يؤخذ في الاعتبار لهذا الغرض.

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

Addy Osmani: ثم فيما يتعلق بتنسيقات الصور الحديثة ، تحدثنا عن التنسيقات مسبقًا ، ولكن ضع في اعتبارك WebP و AVIF و JPEG XL. تجنب إضاعة وحدات البكسل. من المهم حقًا أن يكون لديك استراتيجية جيدة للجودة. وأعتقد أن هناك الكثير من الحالات التي قد تكون فيها الجودة الافتراضية أحيانًا أكثر من اللازم. لذلك سأجرب محاولة خفض معدل البت الخاص بك ، وخفض إعدادات الجودة الخاصة بك ، وأرى إلى أي مدى يمكنك أخذ الأشياء لمستخدميك مع الحفاظ على الحدة.

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

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

درو ماكليلان: افعلها ، أجل.

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

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

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

Addy Osmani: ما هو قديم أصبح جديدًا مرة أخرى. أود أن أقول إن الأمر يستحق بالتأكيد تعيين أبعاد على صورك. تعيين الأبعاد على إعلاناتك ، وإطارات العين ، وأي محتوى ديناميكي يمكن أن يتغير في الحجم يستحق تعيين الأبعاد عليه.

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

Addy Osmani: وبعد ذلك ، أخيرًا ، يعد آخر Core Web Vital هو تأخير الإدخال الأول. هذا شيء لا يفكر فيه الناس دائمًا عندما يتعلق الأمر بالصور. لذلك من الممكن في الواقع للصور أن تحظر عرض النطاق الترددي للمستخدم ووحدة المعالجة المركزية عند تحميل الصفحة. يمكن أن يعيقوا كيفية تحميل الموارد الهامة الأخرى ، لا سيما في الاتصالات البطيئة حقًا أو على الأجهزة المحمولة ذات النهاية السفلية التي يمكن أن تؤدي إلى تشبع النطاق الترددي.

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

درو ماكليلان: هل هناك أي شيء يمكننا فعله مع الصور لمنعهم من منع العرض؟ هل يمكننا إزالة تحميل المتصفح في تلك المرحلة الأولية بطريقة ما لتمكيننا من التفاعل بشكل أسرع؟

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

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

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

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

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

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

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

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

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

درو ماكليلان: لقد تعلمت كل شيء عن تحسين الصورة. ما الذي كنت تتعلم عنه مؤخرًا يا آدي؟

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

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

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

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

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

درو ماكليلان: إذا كنت ، عزيزي المستمع ، ترغب في سماع المزيد من Addie ، فيمكنك العثور عليه على Twitter حيث هوAddieOsmani والعثور على جميع مشاريعه المرتبطة من AddyOsmani.com. كتاب "تحسين الصورة" متاح ماديًا ورقميًا من Smashing الآن على موقع smashingmagazine.com. شكرا لانضمامك إلينا اليوم ، آدي. هل عندك كلمات فراق؟

آدي عثماني: أي كلمات فراق؟ لدي القليل من التاريخ الذي سأشاركه مع الناس. قام Tim Berners-Lee بتحميل أول صورة على الإنترنت في عام 1992. لست متأكدًا مما إذا كان بإمكانك تخمين ما كانت عليه ، ولكن من المحتمل أن تفاجأ. درو ، هل لديك أية تخمينات؟

درو ماكليلان: أنا أخمن قطة.

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