Подготовить картинку для WEB-публикации несложно. Файлы картинок, предназначенные для сайта, должны быть небольшого размера для ускорения их загрузки по низкоскоростным модемным каналам. Обычный размер 15-25 Кбайт. Формат jpeg (jpg) для графических файлов позволяет передать всю палитру цветов с небольшой потерей качества, что вполне приемлемо для WEB, так как современные мониторы не воспроизводят изображение с разрешением большим, чем 96 dpi (96 точек на дюйм). И, самое главное, файлы при этом получаются небольшого размера. Отсюда задача ясна - получить графический файл необходимого размера в формате jpg с разрешением не более 96 dpi. Можно, например, использовать рекламный буклет в качестве исходного изображения. Файл в формате tif развернутого листа рекламного буклета в моем примере имеет следующие характеристики: размер файла 102.6 Mb, число пикселей по ширине и высоте 6142х4378 с глубиной цвета 32 бита. Если готового файла с нужным изображением нет, получить файл можно, сосканировав изображение буклета с возможно большим разрешением и глубиной цвета.
         Откроем файл буклета в каком-либо графическом редакторе, например, Adobe Photoshop 6.0 Rus. Включим инструмент Прямоугольная область, если он еще не включен. Выделим левой кнопкой мыши нужный фрагмент изображения. Фрагмент выделится прямоугольником из пунктирных линий. Выберем в меню Редактирование пункт Копировать. Изображение копируется в буфер обмена. Создадим новый документ (Файл -> Новый). Откроется окно с предлагаемым названием Без имени-1 и размерами рисунка, например, 2616х1409 пикселей и разрешением 400 dpi. Согласимся с этим, нажав Ok. Adobe Photoshop создает окно с этими размерами и прозрачным фоном. Вставим в него наш фрагмент (Редактирование -> Вставить). В окне появляется наша картинка. Выберем в меню Изображение пункт Размер изображения. В окне Размер рисунка сразу же изменим разрешение: вместо 400 dpi введем 96 dpi. Программа пересчитывает размеры картинки - теперь они будут 628х338 пикселей. Допустим, размеры картинки нас не устраивают, тогда изменим один из размеров, например, ширину. Установим ее равной 300 пикселям. Высота картинки автоматически пересчитывается и станет равной 162 пикселя. Нажмем Ok, если размеры именно те, которые нам нужны.
          Полученную картинку сохраним в формате jpeg. В меню Файл выберем Сохранить для WEB.Откроется окно Save for WEB. В полях Settings вместо предлагаемого по умолчанию формата gif выберем jpeg (jpg). Выберем качество Maximum. Внизу окна появится размер получаемого jpeg-файла, например, 26.99К. Если размер файла устроит, жмем Ok. В противном случае придется ухудшить качество картинки, установив его High, Medium или Low, пока не получим файл нужного размера и качества. В следующем окне введем имя файла (тип файла должен быть jpeg) и нажмем Сохранить. Все - задача решена. Теперь нужно в html-файле вашей WEB-странички в нужном месте указать имя файла картинки, ее ширину и высоту в пикселях, к примеру:
<img src="ppn3_2.jpg" width="300" height="162">
Можно изменить размеры картинки, указав в html-файле другие высоту и ширину, но при этом пострадает качество картинки, четкость изображения снизится, возможно искажение пропорций.
В заключение один прием использования html-таблицы для вывода графики на WEB-страницу.
Таблицы в html-файлах широко используются для вывода информации на WEB-страницу. Но таблицы также можно использовать и для создания составных изображений. Приведу пример использования таблицы для создания изображения из двух картинок, сдвинутых друг относительно друга, с добавлением текста в одну из ячеек. Этот прием использован для показа машины с двух разных сторон и вывода текста (марки машины).

 

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align=right rowspan=2>
<img src="ppn3_2.jpg" width="175" height="120" border=1 alt="">
</td>
<td align=center>
<h1 align=left><font color="#2a7146"><br> ППН3A </font></h1>
</td>
</tr>
<tr>
<td align=left rowspan=2>
<img src="ppn3_1.jpg" width="180" height="145" border=1 alt="">
</td>
</tr>
</table>
Для окаймления картинок можно использовать бордюр шириной в 1-2 пикселя.

P.S. Небольшое замечание, не относящееся к теме статьи. Часто требуется скопировать какую-либо таблицу с сайта и вставить в документ WORD. В Firefox или Opera обычно таблица превращается в набор строчек, в которых слова слипаются друг с другом. Internet Explorer, который часто ругают, с этим справляется гораздо лучше. Таблица вставляется в нормальном виде с рамками и ячейками. На странице сайта выделяем нужную таблицу, нажимаем Ctrl+C, открываем WORD и нажимаем Ctrl+V. Все, таблица вставлена.

Дополнил статью 10.06.2012