Повторяющееся фоновое изображение веб-сайта: размер и скорость

Question

Мне было интересно, проводил ли кто-нибудь какие-либо тесты с фоновыми изображениями.Обычно мы создаем фон, который повторяется хотя бы в одном направлении (x или y или оба).

Пример
Допустим, у нас есть градиентный фон, который повторяется в направлении X.Высота градиента — 400 пикселей.У нас есть несколько возможностей.Мы можем создать как можно меньшее изображение (шириной 1 пиксель и высотой 400 пикселей) или создать изображение большего размера с высотой 400 пикселей.

Наблюдение
Поскольку высота градиента составляет 400 пикселей, мы, вероятно, не будем выбирать формат GIF, поскольку он может хранить только 256 адаптивных цветов.Возможно, этого будет достаточно, если наш градиент тонкий, поскольку его не так много, но в противном случае мы, вероятно, предпочтем сохранить изображение как 24-битное изображение PNG, чтобы сохранить полную детализацию градиента.

Дилемма
Должны ли мы создать изображение размером 1×400 пикселей, которое будет повторяться? н раз по горизонтали или нам следует создать изображение размером 100×400 пикселей, чтобы ускорить рендеринг в браузере и иметь больший размер файла изображения.

Так. Размер изображения по сравнению сскорость рендеринга? Какой из них победит?Кто-нибудь хочет это проверить?Что касается скорости рендеринга браузера и возможного мерцания при перерисовке небольшого изображения...

Answer 1

Скорость рендеринга здесь является узким местом, поскольку в кеш браузера можно поместить плитки большего размера.

На самом деле я пробовал это для основных браузеров, и, по крайней мере, некоторые из них отображались заметно медленно на очень маленьких плитках.

Поэтому, если увеличение размера растрового изображения не приводит к смешно большие размеры файлов, я бы определенно согласился с этим.Проверьте сами и убедитесь.(Не забудьте включить IE6, так как многие люди все еще используют его).

Возможно, вам удастся найти хороший баланс между размером растрового изображения и размером файла, но в целом я бы попробовал 50x400, 100x400, 200x400 и даже 400x400 пикселей.

Answer 2

Я обнаружил, что может быть огромная разница в производительности рендеринга браузера, если у вас есть фоновое изображение шириной 1 пиксель и повторяется.Лучше иметь фоновое изображение немного большего размера.Таким образом, изображение шириной 100 пикселей работает в браузере намного лучше.Это особенно важно, когда вы используете повторяющееся фоновое изображение в перетаскиваемом слое на своем веб-сайте.Производительность перетаскивания довольно плохая из-за часто повторяющегося фонового изображения.

Answer 3

Я хотел бы отметить, что стоимость отправки нескольких дополнительных строк (здесь только пример 1-2) составляет 0,8 – 1,6 КБ (если вам удастся обойтись 8-битной версией), примерно 2,4 – 4,0 КБ для 24бит

На 2 столбца пикселя больше означает, что необходимые итерации, необходимые для копирования фона, сокращаются до 1/3 для размера до 1,6 КБ (8-бит) или 4 КБ (24-бит).

даже 1 дополнительный столбец сокращает вдвое требуемую перепечатку до половины ширины элемента.

Если фон делается менее чем за секунду для модема 56,6k, я считаю, что этого достаточно.

Answer 4

Если небольшие размеры изображения отрицательно влияют на рендеринг, я уверен, что любой приличный браузер несколько раз скопировал бы изображение, прежде чем разбить его на плитки.

Тем не менее, я обычно не использую размеры изображения в 1 пиксель, поэтому я могу четко видеть изображение, не изменяя его размер.В большинстве ситуаций сжатие PNG достаточно хорошее, чтобы справиться с этой задачей при очень небольших затратах на размер файла.

Answer 5

Я бы вложил деньги в то, что узким местом является загрузка изображения, а не механизм рендеринга, выполняющий мозаику, поэтому выберите вариант шириной 1 пиксель.

Кроме того, 24-битный PNG является избыточным, поскольку вы по-прежнему получаете только 8 бит на канал (красный, зеленый и синий).

Answer 6

Обычно я предпочитаю использовать промежуточный вариант: ширина в 1 пиксель, вероятно, сделает ваш градиент немного нечетким, но вы можете сделать что-то вроде ширины в 5 пикселей, что дает достаточно места для градиента, чтобы поддерживать согласованность и четкость на странице.но я бы посоветовал вам добавить больше узоров и изображений к одному изображению, а затем использовать позиционирование фона (css спрайты), чтобы расположить их, потому что загрузка одного изображения, скажем, размером 50 КБ займет меньше времени по сравнению с 5 изображениями по 40 КБ, поскольку браузер делает меньше запросов к серверу...

Answer 7

Я не сравнивал это, но готов поспорить, что на большинстве современных компьютеров рендеринг не будет проблемой, тогда как вы всегда хотите сэкономить на времени загрузки изображения.Я часто использую графику размером 1 пиксель.