اختر أبعاد الصورة المفيدة للشاشات عالية الكثافة

يمكن للبطاقة المعروضة بعرض 800 CSS بكسل استخدام صورة مرشح بعرض 1600 بكسل كمثال 2x. قد يختار المتصفح مصدرًا مناسبًا بناءً على التخطيط وكثافة الجهاز والظروف الأخرى عندما يوفر موقع الويب ترميز صورة سريع الاستجابة. لا يعني الملف 1600 بكسل أن البطاقة يجب أن تشغل 1600 بكسل CSS على الصفحة.

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

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

إذا كان المصدر فقط 700 بكسلات واسعة ، وكتابة أ 1600- تصدير Pixel لا ينشئ تفاصيل أصلية أكبر. استخدم مصدرًا أفضل أو اقبل مرشحًا أصغر. قارن شحذ الضوء بعد تغيير حجمه وفحص القوام الناعم حسب حجم العرض المقصود. لاستخدام الرسومات الشفافة PNG بدلا من ذلك ، منذ التيار WebP التصدير هنا معتم. احتفظ بالتصميم أو الصورة الأصلية حتى تتمكن من إنشاء مرشحين مختلفين لاحقًا.

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

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

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