Повторение фонового изображения сайта - размер в зависимости от скорости

Question

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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

Я хотел бы отметить, что из-за стоимости отправки нескольких дополнительных строк (только 1-2 примера здесь) .8k - 1.6kb (если вы можете уйти с 8-битным) больше как 2.4kb - 4,0 кб для 24 бит

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

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

Если фон сделан менее чем за секунду для модема 56.6k, я считаю, что он достаточно скудный.

Answer 3

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

Answer 4

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

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

Answer 5

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

Answer 6

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

Answer 7

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

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