Советы - All for web

Советы по графическому изображению.

Быстрая загрузка страниц сайта - важнейшая задача для вебмастера. Наличие многочисленной графики улучшает внешний вид ресурса, но есть и свои минусы: увеличивается время загрузки. Перед нами встают задачи:

увеличить скорость загрузки;
правильно разместить графику на странице;
оптимизировать внешний вид при загрузке.

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

<table align="center" border="1" cellpadding="0" cellspacing="0">
	<tr>
		<td><img src="images/1.jpg" width="87" height="132"></td>
		<td><img src="images/2.jpg" width="87" height="132"></td>
	<td><img src="images/3.jpg" width="87" height="132"></td>
		<td><img src="images/4.jpg" width="87" height="132"></td>
	</tr>
	<tr>
	<td><img src="images/21.jpg" width="87" height="132"></td>
		<td><img src="images/22.jpg" width="87" height="132"></td>
		<td><img src="images/23.jpg" width="87" height="132"></td>
		<td><img src="images/24.jpg" width="87" height="132"></td>
	</tr>
</table>

Не забудьте у таблицы убрать границы(border="0")

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

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

Это между тегами< HEAD>и </HEAD>

<script language="javascript">
function vision() {
if(document.all) {
document.all.loading.style.visibility="hidden";
}
else {
document.layers.loading.visibility="hide";
}
}
</script>

Не забудьте добавить в тег <BODY> onload=vision();

Это между тегами<BODY>и </BODY>

<div id="loading" style="position:absolute; left:0; top:0; width:100%; height:835">
<table width=100% height="835" bgcolor="6666ff">
<tr><td bgColor=6666ff align="center" valign="top">
</td></tr>
</table>
</div>