Повторение фонового изображения веб-сайта - размер по сравнению со скоростью
Установить все через терминал:
npm install lodash --save
tsd install lodash --save
Добавить пути в index.html
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
paths: {
lodash: './node_modules/lodash/lodash.js'
}
});
System.import('app/init').then(null, console.error.bind(console));
</script>
Импортировать lodash в верхней части файла .ts
import * as _ from 'lodash'
6 ответов
Узким местом здесь является скорость рендеринга, поскольку большие тайлы могут быть помещены в кеш браузера.
Я действительно пробовал это для основных браузеров, и по крайней мере некоторые из них отображались заметно медленнее на очень маленьких тайлах.
Так что, если увеличение размера растрового изображения не приводит к смехотворно размерам файлов, я определенно соглашусь с этим. Проверьте сами и убедитесь. (Не забудьте включить IE6, так как многие люди все еще застряли на нем).
Вы можете найти хороший баланс между размером растрового изображения и размером файла, но в целом я бы попробовал 50x400, 100x400, 200x400 и даже 400x400 пикселей.
Если небольшие размеры изображения оказывают негативное влияние на рендеринг, я уверен, что любой приличный браузер перевернет изображение внутренне несколько раз перед мозаичным отображением.
Тем не менее, я не использую размеры изображения в 1 пиксель, поэтому я могу ясно видеть изображение, не меняя его размера. В большинстве случаев сжатие PNG достаточно хорошо, чтобы справиться с этим при очень небольших затратах на размер файла.
Я обычно предпочитаю переходить между ними, ширина в 1 пиксель, вероятно, сделает ваш градиент немного неясным, но вы можете сделать что-то вроде ширины 5 пикселей, которая дает достаточно места для градиента, чтобы сохранить согласованность и ясность по всей странице ... но я бы хотел Предполагается, что вы можете добавить больше рисунков и изображений к одному изображению, а затем использовать фоновое позиционирование ( css sprites ), чтобы расположить их, потому что загрузка одного изображения, скажем, 50 КБ, потребует меньше времени на сопоставление с 5 изображениями 40 КБ, так как браузер делает меньше запросов к серверу ...
Я не проверял это, но готов поспорить, что на большинстве современных компьютеров рендеринг не будет проблемой, в то время как вы всегда хотите сэкономить на времени загрузки изображения. Я часто использую графику 1px.
Я обнаружил, что может быть огромная разница в производительности рендеринга браузера, если у вас есть фоновое изображение шириной 1 пиксель и оно повторяется. Лучше иметь фоновое изображение чуть большего размера. Таким образом, изображение шириной 100 пикселей работает в браузере намного лучше. Это особенно важно, когда вы используете повторяющееся фоновое изображение в перетаскиваемом слое на вашем веб-сайте.
Я бы положил деньги на то узкое место, которое является загрузкой изображения, а не с механизмом рендеринга, выполняющим мозаику, поэтому выберите вариант шириной 1 пиксель.
Также 24-битный PNG является избыточно, поскольку вы по-прежнему получаете только 8 бит на канал (красный, зеленый и синий).