best-of-best.narod.ru В место рисунка, на странице html можно поставить таблицу, которую внешне нельзя будет отличить от настоящего рисунка
Рисуем таблицами
Пусть нужно создать такой рисунок. Нарисовав его на листочке в клеточку увидим, из каких элементов он состоит:
 0   0   R   0   0 
 0   Y   Y   Y   0 
 L   L   L   L   L 
Этот рисунок можно получить, создав таблицу, имеющую три строка, каждая по пять столбцов

<table width=250 height=150 border=0>
<tr height=50>
<td width=50></td>
<td width=50></td>
<td width=50 bgcolor=red></td>
<td width=50></td>
<td width=50></td>
</tr>
<tr height=50>
<td></td>
<td bgcolor=yellow></td>
<td bgcolor=yellow></td>
<td bgcolor=yellow></td>
<td></td>
</tr>
<tr height=50>
<td bgcolor=lime></td>
<td bgcolor=lime></td>
<td bgcolor=lime></td>
<td bgcolor=lime></td>
<td bgcolor=lime></td>
</tr>
</table>
Добавив в тег table атрибут cellspacing (Задает расстояние между ячейками таблицы) и атрибут cellpadding (Задает расстояние между содержимым ячейки и ее рамкой) можно получить эффект дискретного или непрерывного рисунка
<table width=250 height=150 border=0 cellspacing=10 cellpadding=10>
<table width=250 height=150 border=0 cellspacing=0 cellpadding=0>
Полоска цвета lime состоит из пяти ячеек, поэтому вместо пяти записей <td bgcolor=lime></td> можно написать одну <td bgcolor=lime colspan=5></td> Здесь colspan=5 означает, что в данной ячейке объединено пять столбцов. Аналогично поступаем с полосками любой длинны и получим такую, более компактную таблицу <table witdh=250 height=150 border=0 cellspacing=0 cellpadding=0>
<tr height=50>
<td width=50></td>
<td width=50></td>
<td width=50 bgcolor=red></td>
<td width=50></td>
<td width=50></td>
</tr>
<tr height=50>
<td></td>
<td bgcolor=yellow colspan=3></td>
<td></td>
</tr>
<tr height=50>
<td bgcolor=lime colspan=5></td>
</tr>
</table>
Обратите внимание на то, что в таблице нужно оставить хотя бы одну строку, число тегов td в которой точно равно количеству столбцов, иначе таблица схлопнется и станут уже.
Ну вот картинка и готова, осталось только в место width=50 и height=50 поставить те значения, которые нужны в случае той картинки, которую нужно было получить это width=10 и height=10 Если поставить width=20 и height=10 то получим картинку в три раза шире
Описанным способом получена вот эта картинка
Она имеет размеры 32 на 32 пикселя. В ней width=1 и height=1 то есть ячейка имеет размер один пиксель, поэтому это полная аналогия с настоящей картинкой. Вот html код этой картинки. Скопируйте его в блокнот и сохраните как Name.html Объём этого кода составляет восемь килобайт. Для сравненья объём настоящей картинки в формате bmp или ico составляет четыре килобайт, а в формате gif один килобайт. Формат gif это сжатый формат. Если html код сжать в архив rar, то он будет иметь объём всего пол килобайта!!! Если в этом коде сделать замену width=1 и height=1 на width=2 и height=2 то получим картинку, в два раза больше:
Если информативная часть рисунка сосредоточена в небольшом кусочке, то нет смысла дробить весь рисунок на большое количество одинаковых кусочков и получать большой html код. Сделаем рисунок знамени в виде таблицы из трёх строк и трёх столбцов и в среднюю ячейку поставим таблицу - рисунок

<table cellspacing=0 cellpadding=0 width=270 height=150 border=0>
<tr height=20>
<td width=20 bgcolor=red></td>
<td width=50 bgcolor=red></td>
<td width=200 bgcolor=red></td>
</tr>
<tr height=30>
<td width=20 bgcolor=aqua></td>
<td width=50 bgcolor=aqua>
<table witdh=50 height=30 border=0 cellspacing=0 cellpadding=0>
<tr height=10>
<td width=10></td>
<td width=10></td>
<td width=10 bgcolor=red></td>
<td width=10></td>
<td width=10></td>
</tr>
<tr height=10>
<td></td>
<td bgcolor=yellow colspan=3></td>
<td></td>
</tr>
<tr height=10>
<td bgcolor=lime colspan=5></td>
</tr>
</table>
</td>
<td width=200 bgcolor=aqua></td>
</tr>
<tr height=100>
<td width=20 bgcolor=red></td>
<td width=50 bgcolor=red></td>
<td width=200 bgcolor=red></td>
</tr>
</table>
Автоматизировать процесс превращения картинки в таблицу можно с помощью программы BMP2TAB для этого
  1. Замените прозрачный цвет рисунка на другой, которого на нём точно нет (например на цвет fuchsia #FF00FF)
  2. Превратите рисунок в BMP
  3. В программе нажмите кнопку "Загрузить" и выберите свой рисунок
  4. Нажмите кнопку "Конвертировать"
  5. В открывшемся окне наберите имя файла Name.html и нажмите кнопку "Сохранить"
  6. В полученном файле html авто заменой удалите все двойные кавычки ( " ) и все записи bgcolor="#FF00FF" (если прозрачным был сделан цвет #FF00FF")
  7. Замените авто заменой все значения height="1" и width=1 на те, которые нужны
И в заключение приведу художественный приём. В картинку - таблицу можно превратить и шрифт


И заменив в нём cellspacing=0 на cellspacing=5 получим





Используются технологии uCoz