2011-01-06 2 views
0

У меня есть новый макет сайта от нашего Клиента. Но макет содержит 1280X1795pxs Пейзаж в качестве фонового изображения. И Клиент не хочет менять этот фон.тег теги предпосылка предпосылки требуется

Теперь Мой вопрос в том, что будет лучше всего использовать это изображение в качестве фона?

Чтобы оптимизировать скорость страницы и оптимизировать время загрузки.

Большое спасибо.

+1

Ну, насколько величен размер файла изображения? Помимо изменения сжатия, используемого на изображении для его уменьшения, нет ничего разумного в HTML/CSS, который вы можете сделать. Просто позвольте браузеру кешировать его. –

ответ

0

ЕСЛИ вы используете PHP для своего веб-сайта, затем используйте механизм кэширования apc для хранения изображений в кеше или используя любой механизм использования каркасов по умолчанию для кеширования.

Sanil S

0

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

Если у вас есть хороший образец, попробуйте найти, где он повторяется, и обрезайте изображение до такого размера. Затем, в вашем КСС вашей странице, просто добавьте к телу:

body { background: url("pattern.jpg") repeat-all; } 

Если у вас есть модель, которая повторяется только в одном направлении, например, «столбик» шаблон, который должен только повторить вниз, а затем использовать

body { background: url("column.png") repeat-y #your-background-rgb-colour; } 

И это заставит его повторить страницу, но не через. То же самое касается повторения изображения на странице, просто используйте repeat-x.

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

  1. .jpg Используйте это для изображений, которые должны быть фото-реалистичные, без какой-либо цвета вырезки. Для веб-просмотра, как правило, вы можете использовать около 70% качества.
  2. .gif Для изображения, которому требуется только определенное количество цветов. Изображения Gif могут быть очень маленькими, но за счет потери ненужных цветов из изображения.
  3. .png (ограниченная палитра) Этот формат png работает так же, как и gif, который я описал выше, но в некоторых случаях это может привести к меньшему результату.
  4. .png (Full-bit) Подобно jpg, этот формат png позволяет использовать все цвета и фотореалистичные изображения. Однако он обычно обеспечивает большее изображение, чем jpg, но с меньшим артефактом сжатия (блочные биты на изображении).

Просто поиграйте с настройками сжатия, и вы найдете что-то приятное.

Nathan C.

Смежные вопросы