تحسين الصور باستخدام WebP وAVIF والتحميل عند الحاجة
· PoolByte Technology
غالبًا ما تشغل الصور الحصة الأكبر من الحجم الإجمالي لصفحة الويب؛ ولهذا السبب يعد التحسين البصري أحد أكثر نقاط البداية كفاءة للعمل بسرعة. إذا لم يتم إعداد صورة الغلاف الكبيرة ومعارض المنتجات وصور المدونة الموجودة على الصفحة الرئيسية بشكل صحيح، فقد تظل الصفحة على اتصال الهاتف المحمول لمدة ثوانٍ. علاوة على ذلك، عادةً ما يكون أكبر عنصر مرئي في الصفحة عبارة عن صورة، وتؤثر سرعة ظهور هذا العنصر بشكل مباشر على LCP من مقاييس Core Web Vitals.
لا يقتصر تحسين الصورة على ضغط الملف فقط. إن التنسيق الصحيح والدقة المناسبة للحجم الذي سيتم عرضه به وأولوية التحميل الصحيحة وبعض القواعد المضافة إلى عملية النشر ستؤدي إلى نتائج.
ابحث عن أثقل الصور أولاً
افتح علامة التبويب "الشبكة" في أدوات مطور المتصفح، وحدد عامل التصفية بالصور، ثم قم بفرز القائمة حسب الحجم. قارن بين الصورة وعدد الكيلوبايت وعدد وحدات البكسل التي تظهر فعليًا على الصفحة. كما توفر التوصيات الواردة في تقرير Lighthouse بشأن تغيير حجم الصور بشكل صحيح وتقديمها بتنسيقات حديثة قائمة بداية جيدة.
عادةً ما تشكل بعض الملفات الجزء الأكبر من الوزن الإجمالي. إن بدء التحسين المرئي بدءًا من هذه الملفات، بدلاً من إعادة صياغة الموقع بأكمله، يوفر أسرع مكاسب من حيث الجهد. لقياس المكونات الأخرى لسرعة الصفحة، يمكنك الرجوع إلى دليل مؤشرات الويب الأساسية .
اختر التنسيق بناءً على المحتوى
لا يوجد تنسيق واحد صحيح لكل صورة:
- بالنسبة للصور، يوفر WebP بشكل عام ملفات أصغر من JPEG ويدعمها معظم المتصفحات الحالية.
- غالبًا ما يقدم AVIF ضغطًا أعلى على الصور؛ ومع ذلك، فإن وقت الترميز طويل وقد لا يكون مدعومًا على بعض الأجهزة القديمة.
- بالنسبة للشعارات والأيقونات والرسوم التوضيحية البسيطة، يظل SVG واضحًا في أي دقة، وغالبًا ما يكون صغيرًا جدًا.
- لا يزال من الممكن استخدام PNG لالتقاط لقطات الشاشة التي تتطلب الشفافية؛ لكن WebP يدعم أيضًا الشفافية.
يمكنك استخدام <picture> لخدمة التنسيقات المختلفة معًا. يقوم المتصفح باختيار المصدر الأول الذي يدعمه، وإذا لم يكن كذلك، فإنه يعود إلى الصورة القياسية في السطر الأخير.
<picture>
<source srcset="kapak.avif" type="image/avif">
<source srcset="kapak.webp" type="image/webp">
<img src="kapak.jpg" alt="Ofiste toplantı yapan ekip" width="1200" height="675">
</picture>إنتاج الصورة بالحجم الذي سيتم عرضه
الخطأ الأكثر شيوعًا هو عرض صورة بدقة 4000 بكسل تم التقاطها بهاتف في منطقة بحجم 800 بكسل. يقوم المتصفح بتنزيل وحدات البكسل الإضافية ولكنه لا يستخدمها. غالبًا ما يكون عرض الصورة ضعف عرضها الأوسع على الصفحة كافيًا لشاشات العرض عالية الكثافة.
قم بتوفير أحجام متعددة باستخدام سمات srcset وsizes لعروض الشاشة المختلفة. لذا يقوم الهاتف بتنزيل الملف الصغير، وتقوم الشاشة العريضة بتنزيل الملف الكبير. تأكد من تضمين السمات width وheight؛ يخصص المتصفح مساحة قبل تحميل الصورة ولا يتم تمرير محتوى الصفحة.
تحقق بصريًا من جودة الضغط
لا توجد علاقة خطية بين إعداد الجودة وحجم الملف. بالنسبة لمعظم الصور، سيؤدي إعداد الجودة المتوسطة والعالية إلى تقليص الملف بشكل ملحوظ، مع فقدان غير محسوس. قم بتصدير الصورة نفسها بعدة إعدادات جودة مختلفة وقارنها جنبًا إلى جنب؛ على وجه الخصوص، تعد درجات لون البشرة والانتقالات السماوية والنصوص الصغيرة هي المناطق الأكثر عرضة للتشويه.
قم أيضًا بمسح معلومات EXIF من الصور. بالإضافة إلى تكبير الملف، قد تتضمن هذه المعلومات أيضًا موقع موقع التصوير.
استخدم التحميل عند الحاجة على الصور الصحيحة
تضمن السمة loading="lazy" عدم تنزيل الصور الموجودة خارج المنطقة المرئية من الشاشة حتى يقترب المستخدم من تلك المنطقة. إنه فعال جدًا لقوائم المنتجات الطويلة وصفحات المدونات.
ومع ذلك، فإن إضافة التحميل عند الحاجة لصورة الغلاف التي تظهر فورًا عند فتح الصفحة له تأثير معاكس ويزيد من وقت LCP. بالنسبة لهذه الصورة الرئيسية، يمكنك استخدام fetchpriority="high" بشكل عكسي لإخبار المتصفح بطلب هذا الملف أولاً. باختصار: يجب تحميل الصور الموجودة على الشاشة الأولى فورًا، ويجب تحميل الصور التالية عند الضرورة.
إضافة قواعد لعملية النشر
إذا قمت بتحسين الصورة مرة واحدة وتركتها، فستعود المشكلة مع الصور التي تم تحميلها حديثًا. قم بتعيين قواعد بسيطة مع فريقك: الحد الأقصى للعرض، والتنسيق المفضل، وتسمية الملفات، ومتطلبات النص البديل. تقوم أنظمة مثل WordPress تلقائيًا بإنشاء أحجام مختلفة للصورة التي تم تحميلها؛ تأكد من أن هذه الأبعاد متوافقة مع الحقول الموجودة في القالب الخاص بك.
والأهم من ذلك هو وضع معيار منفصل لصور المنتجات على مواقع التجارة الإلكترونية. دليل صفحة منتجات التجارة الإلكترونية لدينا يشرح جانب التصوير والتحضير. إن عرض الصور من خلال شبكة CDN وإعطاء أوقات ذاكرة تخزين مؤقت دقيقة يحدث أيضًا فرقًا في الزيارات المتكررة.
الأسئلة المتداولة
هل يجب أن أحذف ملفات JPEG القديمة عند التبديل إلى WebP؟
من الممارسات الجيدة الاحتفاظ بالملفات الأصلية في نسخة احتياطية. عندما تحتاج إلى إنتاج حجم أو تنسيق مختلف في المستقبل، يمكنك البدء من جديد من مصدر الجودة.
هل من المضر إضافة التحميل عند الحاجة لجميع الصور؟
نعم، عند إضافتها إلى العناصر المرئية التي تظهر على الشاشة الأولى. يؤدي التحميل المتأخر لهذه الصور إلى تأخير الإكمال المرئي للصفحة. استخدم التحميل عند الحاجة فقط على الصور التي تظهر عند التمرير.