إضافة التحميل الكسول للرموز التعبيرية

يتم تحميل صور الملف الشخصي وعناصر الصور في المنشورات بكسل عن طريق تعيين السمة loading="lazy".
الرموز التعبيرية تفوت هذا. :sloth:

<img src="https://emoji.discourse-cdn.com/twitter/sloth.png?v=12" title=":sloth:" class="emoji" alt=":sloth:">

لم أتمكن من العثور على الموقع في المصادر حيث يتم إنشاء علامات الرموز التعبيرية.
هل الرموز التعبيرية “مخبوزة” في المنشورات؟

إعجاب واحد (1)
3 إعجابات

هل يمكنك التوسع في سبب إضافة عرض وارتفاع ثابتين؟ لماذا لا يكون حل CSS الخاص بنا جيدًا بما فيه الكفاية هنا؟

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

علاوة على ذلك، تستخدم المتصفحات هذه المعلومات الإضافية حول حجم الصورة لحساب aspect-ratio قبل تحميل ملف الصورة - وقبل تحليل CSS.

في هذه الحالة، يتم استخدام الرموز التعبيرية في العديد من الأماكن المختلفة - وفي بعض الأحيان يتم تخطي تحديد الأحجام عبر CSS عن طريق الخطأ.
على سبيل المثال، انظر crawler view لـ هذا الموضوع نفسه على PageSpeed

إعجابَين (2)

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

إعجاب واحد (1)

تم دمج طلب السحب هذا الآن، شكرًا على المساهمة @rrit!

إعجابَين (2)