تكرار صورة خلفية الموقع - حجم vs السرعة

Question

كنت أتساءل ما إذا كان أي شخص قد فعل أي اختبارات مع صور الخلفية. نحن عادة إنشاء خلفية تتكرر على الأقل في اتجاه واحد (X أو Y أو كليهما).

مثال
دعنا نقول أن لدينا خلفية تدرج تكرر في الاتجاه X. ارتفاع التدرج هو 400 بكسل. لدينا العديد من الاحتمالات. يمكننا إنشاء صورة صغيرة قدر الإمكان (عرض 1 بكسل و 400 بكسل أعلى) أو يمكننا إنشاء صورة أكبر مع ارتفاع 400 بكسل.

ملاحظة
نظرا لأن التدرج هو ارتفاع 400 بكسل، فربما لن نختار تنسيق GIF، لأنه يمكن فقط تخزين 256 لونا التكيف. ربما هذا enaough إذا كان التدرج الخاص بنا خفية، لأنه لا يحتوي على الكثير من ذلك، ولكن بإخلال سنقوم بلعب الصورة كصورة PNG 24 بت للحفاظ على تفاصيل التدرج الكامل.

ورطة
يجب أن نخلق صورة من حجم 1 × 400 PX سيتم تكرارها ن الأوقات أفقيا أو يجب أن ننشئ صورة من حجم 100 × 400 PX لتسريع العرض في المتصفح والحصول على حجم ملف صور أكبر.

لذا. حجم الصورة مقابل تقديم السرعة؟ أي واحد يفوز؟ أي شخص يهتم اختبار هذا؟ فيما يتعلق بسرعة تقديم المتصفح وصورة صغيرة محتملة الخفقان Redraw ...

Answer 1

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

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

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

قد تكون قادرا على تحقيق توازن جيد بين حجم الصورة النقطية وحجم الملف، ولكن بشكل عام سأحاول 50 × 400 و 100x400 و 200 × 400 وحتى 400 × 400 بكسل.

Answer 2

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

Answer 3

أود أن أشير إلى أنه من أجل تكلفة إرسال صفوف قليلة إضافية (1-2 مثال فقط هنا) .8k - 1.6kb (إذا كنت تستطيع الابتعاد عن 8 بت) أشبه 2.4kb - 4.0kb ل 24bit.

2 أعمدة بكسل أكثر تعني أن التكرارات المطلوبة المطلوبة لخفض الخلفية يتم قطعها إلى 1/3 لمدة تصل إلى 1.6 كيلو بايت (8 بت) أو 4 كيلو بايت (8 بت)

حتى 1 أعمدة إضافية نصفي الخلاصة المطلوبة إلى نصف عرض العنصر.

إذا تم القيام بالخلفية في أقل من ثانية لمودم 56.6k، فأأحي بالأمر الهزيل بما فيه الكفاية.

Answer 4

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

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

Answer 5

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

أيضا PNG 24 بت غير زائدة عن الحاجة لأنك لا تزال تحصل فقط على 8 بت لكل قناة (أحمر، أخضر وأزرق).

Answer 6

أفضل ما يفضل الدخول بين ما بين 1 ظهرا، من المحتمل أن يجعل 1Pixel متدرجا الخاص بك يبدو غير واضح بعض الشيء ولكن يمكنك القيام بشيء ما مثل عرض 5pixel الذي يعطي مساحة كافية إلى التدرج للحفاظ على الاتساق والوضوح عبر الصفحة .. لكنني أقترح عليك أضف المزيد من الأنماط والصور إلى صورة واحدة ثم استخدم وضع الخلفية (CSS Sprites.) لوضعها لأن تنزيل صورة واحدة من القول 50KB سيستغرق وقتا أقل كومابارت إلى 5 40 كيلو بايت من الصور لأن المتصفح يجعل عدد أقل من الطلبات إلى الخادم ...

Answer 7

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