 |
|
Подготовка графических файлов для Интернета. Страница фотоальбома
Для Интернета используют графические файлы форматов jpg, png, gif. jpg и png - используются для многоцветных изображений ( в том числе фотографий ), а gif - для элементов оформления страницы с ограниченным количеством цветов и баннеров с анимацией.
Общая рекомендация при использовании графики в оформлении web-страниц - не перегружать страницы графикой. Чтобы страница быстро грузилась, ее общий "вес" не должен превышать 200 килобайт. Конечно, если пользователь Интернет сидит на скоростной линии - его не будет слишком волновать скорость загрузки, зато взволнует плата за трафик ( за количество скачанных из Интернета кило- и мегабайтов ) и, стало быть, рекомендация остается в силе.
Самый простой способ сжатия картинок - использование для этой цели программы Adobe Photoshop. При этом надо иметь в виду, что разрешение графических файлов для интернета - 72 пикселя/дюйм, максимальные размеры картинки, еще помещающиеся на экране - 760 пикселей ( ширина ) и 560 ( высота ). Конечно, экраны могут быть и побольше, но рассчитывать лучше на минимальные возможности посетителя странички. Задача сжатия картинки решается в два действия:
- выбрать в меню Редактирование/Размер изображения и выставить необходимые разрешение и ширину ( или высоту ). Галка в окошке "Сохранять пропорции" должна быть выставлена, тогда второе измерение изменится автоматически;
- выбрать в меню Файл/Сохранить для Web. В получившемся окне для форматов jpg, png можно ничего не менять, а для формата gif - можно уменьшить число цветов до минимально необходимого. Для формата jpg можно в следующем появившемся окне уменьшить качество, что приведет к уменьшению размера картинки.
Если приходится сжимать большое количество фотографий, удобнее применять программы для групповой обработки графических файлов. Из того, с чем приходилось сталкиваться лично, лучшие - плагин для Photoshop - Web Image Guru и программа Jpeg Imager. Они позволяют работать с большим количеством графических файлов одновременно, получая на выходе набор файлов с заданным качеством и размерами.
Теперь о размещении фотографий и картинок на Интернет-страницах. Очень раздражает просмотр фотографий по одной. Еще более убого будут выглядеть картинки в полноразмерном варианте по несколько штук на странице. Оптимально предъявлять фотографии в виде их копий уменьшенного размера ( preview, предосмотр ) по 15 - 30 штук на страничке. При таком способе для посетителя страницы облегчается выбор фотографий для просмотра и уменьшается вес страницы ( трафик ). При нажатии на превьюшку должна открываться новая страничка с соответствующей полноразмерной фотографией. Размер превьюшки, на мой взгляд, оптимально - 150 пикселей ( больший размер ).
Пример странички-фотоальбома:
<html>
<head>
<title>Gallery</title>
</head>
<body>
<center>
<table>
<tr>
<td align=center><a href="001.jpg" target="_blank"><img src="001p.jpg" border=1 alt="описание картинки" title="название картинки"></a></td>
<td align=center><a href="002.jpg" target="_blank"><img src="002p.jpg" border=1 alt="описание картинки" title="название картинки"></a></td>
<td align=center><a href="003.jpg" target="_blank"><img src="003p.jpg" border=1 alt="описание картинки" title="название картинки"></a></td>
<td align=center><a href="004.jpg" target="_blank"><img src="004p.jpg" border=1 alt="описание картинки" title="название картинки"></a></td>
<td align=center><a href="005.jpg" target="_blank"><img src="005p.jpg" border=1 alt="описание картинки" title="название картинки"></a></td>
</tr>
</table>
</center>
</body>
</html>
В этом фрагменте имеет смысл обратить внимание на следующее:
o в теге <a href...> параметр target="_blank" - указывает на то, что по этой гиперссылке страница открывается в новом окошке, старое окно остается открытым;
o в теге <img...> параметр alt в кавычках содержит описание картинки, показываемое при отключенной графике, параметр title в кавычках содержит наименование картинки, показываемое при наведении курсора на картинку.