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

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

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

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

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

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

Ответ 1

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

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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