Графика на WEB-странице в HTML. Размещение графики в документе Графика на web страницах распространяется в формате

usemap (разрешает использовать изображения, отдельные части которого связаны с картами, они используются совместно с элементом

Карты изображений.

Элемент

Элемент

Синтаксис:

Элемент

Элемент задает активные области карты, щелчком по которым можно осуществить ссылку. Элемент не имеет конечного тэга. С изображениями карт удобно работать в стандартном приложении для Windows - редакторе Paint , для него изображение должно быть трансформировано в формат BMP. Используя сетку в режимах увеличения нажатием Ctrl+G и выбрав инструмент Выделение, когда указатель мыши принимает вид тонкого крестика, координаты курсора можно определить с точностью до одного пикселя. Такая точность может очень пригодиться при задании координат активных областей карты. Элемент поддерживает различные атрибуты:

Синтаксис:

alt (задает альтернативный текст для браузеров, которые не поддерживают данный элемент).
Синтаксис:

title (задает альтернативный текст для браузеров, который всплывает при наведении курсора на данный элемент).

Cинтаксис :

shape (задает форму активной области на карте и её координаты, он может принимать значения: "circle" coords=X,Y,R, где X,Y,R - координаты центра круга и его радиус, "poly" coords=X1,Y1,X2,Y2,X3,Y3..., гдеX1,Y1,X2,Y2,X3,Y3... - координаты вершин многоугольника, если многоугольник - прямоугольник, то достаточно указать его верхнюю левую и правую нижнюю вершины "rect" coords=X1,Y1,X3,Y3).
Синтаксис: circle " coords=X,Y,R >

Пример изображения - карты:

В большинстве Web-страниц встречается графика. Она позволяет красочно и наглядно представить информацию. Во многих случаях лучше показать картинку, чем давать длинное текстовое описание.

Существуют два способа размещения графических изображений на странице:

• вставка отдельных картинок;
• заполнение фона картинкой.

В любом случае графическое изображение берется из файла.

Вставка графических изображений

Вставка на страницу графического изображения из файла графического формата производится с помощью тэга (от англ, image - изображение) с указанием адреса файла в качестве аргумента атрибута SRC:

< IMG SRC = "адрес_графического_файла" >

Адрес графического файла - этолибо URL-адрес, либо имя файла, возможно, с указанием пути. Например, для показа графического файла logotip.jpg следует написать тэг:

< IMG SRC = "logotip.jpg" >

Для увеличения скорости передачи графического изображения в тэге можно использовать атрибут (дополнительный параметр) LOWSRC, который принимает в качестве аргумента адрес графического файла. Вы можете создать два графических файла: один (например, пусть это файл logotip.jpg) содержит картинку, полученную с высоким разрешением, а другой (например, logotip.gif) - картинку, полученную с низким разрешением. Тогда тэг:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

…предпишет браузеру сначала загрузить файл logotip.gif, а затем по мере приема заменить его файлом logotip.jpg.

Другой способ ускорения загрузки графики заключается в задании размеров прямоугольной области, в которой будет размещено графическое изображение, с помощью атрибутов WIDTH (ширина) и HEIGHT (высота), измеряемых в пикселах. Если указать эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только потом загрузит графику. Заметим, что браузер сжимает или растягивает изображение, встраивая его в рамки указанного размера. Пример указания размеров изображения:

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Графика обычно используется вместе с текстом, поэтому возникает задача выравнивания текста и графического изображения. Эта задача решается с помощью атрибута ALIGN тэга с применением различных аргументов. Например, мы можем пожелать, чтобы текст обтекал картинку справа или слева. Обычно картинка встраивается вплотную с текстом, что может быть некрасиво. Во избежание этого, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов VSРАСЕ для верхнего и нижнего полей и НSPACE для боковых полей в тэге . Аргументы этих атрибутов указываются в виде чисел, определяющих размеры полей в пикселах. Для отмены обтекания графики текстом служит тэг
.

Следующий тэг задает обтекание графики из файла logotip.jpg справа (картинка будет находиться слева от текста):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Если требуется расположить картинку справа от текста, то нужно атрибуту ALIGN присвоить аргумент RIGHT :

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

Чтобы задать поля вокруг картинки, надо написать тэг вида:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Здесь числа 20 и 10 определяют размеры полей.

Рассмотрим пример совместного использования графики и текстов. Откройте Блокнот (текстовый редактор Notepad) Windows. Напишите в нем HTML-код с использованием рассмотренных выше тэгов. Ниже приводится программа, выводящая некоторый текст и графику. В качестве графического файла можно использовать любой из имеющихся у вас файлов. Здесь используется файл logotip.gif.

< HTML >

< HEAD >

< TITLE > Упражнение 1 < / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 > Текст обтекает графику справа < / H1 >

Широкие возможности точного позиционирования изображений (как и других элементов) на странице предоставляют таблицы и стили . Эти элементы HTML будут рассмотрены позже. Например, вы можете определить таблицу без видимых рамок, а в ячейках этой таблицы разместить картинки, тексты и другие элементы.

Графика на WEB ‑страницах

Введение

Безопасная палитра

Некоторые форматы записи графики на Web‑страницах

Типовые графические элементы Web‑страниц

Введение

Визуальное представление позволяет осуществлять наиболее быструю передачу информации, обеспечивая также быстрое её восприятие наблюдателем (читателем) как непосредственно, так и с использованием принятых в мировой культуре источников информации (книги, газеты, кино, телевидение, Интернет). Манипулируя цветом, контрастом и символами, можно за долю секунды вызвать у наблюдателя ощущение тепла либо холода, спокойствия или напряженности, а вместе с тем даже передать некоторые сведения. Важную роль в графической передаче информации играют ассоциации – определённые образы, всплывающие в сознании пользователя в моменты, когда он видит некоторые символы или систему графических объектов.

Стиль Интернет-сайта определяется сочетанием текста, графики и активных элементов (формуляры, диалоговые окна, мультимедиа). Существенным является также подбор компонентов, их свойств (размер, цвет) и способов размещения на странице.

Цвета

В настоящее время RGB является самым популярным способом задания цвета и практически в каждой графической программе существует возможность описания цвета этим форматом. Комбинация трёх однобайтовых значений (24 бита) позволяет определить 16,7 млн. цветов (точнее 2 24).

HSL (Hue, Saturation, Luminance, т.е. оттенок, насыщение, яркость) – это палитра красок, определяемых сочетанием не основных цветов (как это имеет место для RGB), а оттенка, насыщения и яркости. Этот условный способ описания цвета намного более интуитивен и близок естественному восприятию цветов человеком. Значительно легче изменить оранжевый цвет на жёлтый, изменяя оттенок, насыщение и яркость, чем подбирать нужное сочетание красного, зелёного и синего.

· CMY, CMYK

Палитра CMY (Cyan, Magenta, Yellow, т.е. сине-зелёный, пурпурный, жёлтый) – ещё один способ определения цвета. Он составляет альтернативу RGB. Палитра CMY, расширенная черным цветом, обозначается CMYK и повсеместно применяется печатающими устройствами.

Безопасная цветовая палитра

Безопасная цветовая палитра – это набор из 216 цветов, общих для всех инструментальных платформ. Каждый из них может быть задан однобайтовым кодом. Их 216 потому, что 8‑битовое определение позволяет задать 256 цветов (2 8). Однако принято, чтобы поле в 40 и цветов было зарезервировано для операционной системы, тогда 216 цветов остаются для применения в прикладных программах пользователей. Картинки, отображаемые на мониторах компьютеров, способных правильно передать 256 цветов (8-битовая графика), отображаются правильно (и предсказуемо) и при условии применения 216 безопасных цветов. Остальные краски передаются как смесь компонентов из безопасной палитры.

Вопрос адекватного отражения цветов имел большое значение несколько лет назад, когда в повсеместном использовании были компьютеры с 8-битовой графической картой. Хорошим тоном считалось применение на Web‑страницах именно безопасного цветового набора. Теперь же мы все пользуемся 24-битовой графикой. Поэтому кажется более целесообразным использовать всю полноту возможностей, представляемых современными компьютерами, и применять на Web‑страницах различные сочетания цветов, в том числе и тех, что выходят за рамки безопасной палитры.

Некоторые форматы записи графики на Web ‑страницах

GIF (GraphicInterchangeFormat – Графический формат обмена) – один из первых графических форматов. Он и сегодня продолжает оставаться самым часто применяемым форматом записи графики и простой анимации для Интернет-сайтов. Формат GIF разработан фирмой CompuServ (онлайновая информационная служба). В 1987 году вышла его первая версия GIF‑87. Дальнейшая работа над расширением возможностей записи изображений увенчалась созданием новой версии GIF‑89а. В этой новой версии появились возможности определения выбранного цвета как прозрачного, чересстрочной загрузки и записи анимации. Важным достоинством формата GIF является его универсальность – на сегодняшний день все Интернет-браузеры поддерживают отбражение картинок в формате GIF.

Графика, записанная в формате GIF, компрессируется с использованием алгоритмов LZW (Lempel-Ziv-Welch). Этот алгоритм безутратной компрессии (сжатия), основанный на устранении избыточности информации, поэтому картинка отображается на 100% в соответствии с оригиналом. Компрессия заключается в отыскании повторяющихся последовательностей точек и записи информации о размерах этой последовательности и месте её начала. Этот способ позволяет значительно снизить размер файлов при записи изображений, имеющих довольно большие одноцветные участки.

GIF‑89а состоит: из заголовка и блоков данных. В заголовке отображаются: версия формата GIF, предпочтительные параметры картинки – высота, ширина, размер палитры, разрешение, цвет фона. Отдельные байты содержат информацию о глобальной цветовой палитре – каждый цвет это 3-байтовое значение, которым задаётся цветовое сочетание RGB. За заголовком следуют контрольные блоки, блоки изображения и дополнительные блоки.

1) В контрольном блоке находится информация о продолжительности экспозиции (времени показа на экране) и способе перехода от картинки к картинке. Формат GIF‑89а позволяет записывать много изображений в одном файле и задавать значения экспозиции и цикличности анимации.

2) Блоки изображения (их может быть несколько, если в файле записана анимация) содержат детальное описание параметров картинки, локальную цветовую палитру (если она отличается от глобальной палитры) и компрессированные данные о последовательностях точек изображения.

3) Дополнительный блок содержит данные, которые не отображаются, например комментарий, связанный с данной картинкой.

Ограничением формата GIF является размер цветовой палитры – максимум 256 цветов, то есть цветовая палитра может иметь размер от 2 1 по 2 8 , или 2, 4, 8, 16, 32, 64, 128 и 256 цветов. На практике это означает, что если на картинке появляется 7 цветов, то при использовании палитры размером 16 цветов часть полей палитры остаётся не задействованными. В этом случае редукция цветовой палитры до величины 8 не приведёт к потере качества, но позволит уменьшить размер файла записи картинки. Операция сужения цветовой палитры – обычная опция записи файла в формате GIF.

Кодировка LZW позволяет воспроизвести компрессированное изображение точно таким, каким оно было до компрессии. Подобные алгоритмы компрессии называются «безутратными», в отличие от «утратных» алгоритмов, которые предполагают потерю части информации об изображении. Сжатие LZW уменьшает размер файла GIF так эффективно, что на практике становится невыгодной дополнительная архивация и компрессия файлов этого типа программами ZIP, ARJи т.п. сжатием изображения занимаются графические программы.

В 1990 году Объединенной группой экспертов в области фотографии (JointPhotographicExpertGroup, JPEG) была предложена схема сжатия, которая впоследствии завоевала всеобщее признание, как стандартный метод обработки неподвижных изображений. JPEG – это алгоритм сжатия изображений. Но общепринятым стало применение названия JPEG к файлам, записанным в формате JFIF (JPEGFileInterchangeFormat). JPEG (или JFIF) – это формат записи изображений, применяемых как на Интернет-сайтах, так и для типографской печати, а также в цифровой фотографии.

Процесс компрессии изображения в формате JPEG идет в несколько этапов:

1) Если нужно, то сначала происходит конвертация данных о точках изображения из системы RGB в систему YCbCr, которая аналогична HSL, позволяет выразить яркость цвета.

2) Уменьшение в два раза ширины шкалы Cb и Cr (свойства цвета) при сохранении оригинальной шкалы яркости Y. Сужение шкалы происходит путём усреднения значений Cb и Cr соседних пикселей.

3) Анализ блоков изображения: 8*8 пикселей. С помощью дискретного косинусного преобразования (ДКП) производится округление значений изменения яркости цвета.

4) Массив данных, которым приближённо описывается оригинальное изображение, может быть подвергнут очередной компрессии (на этот раз безутратной), поскольку в результате округления появилось много одинаковых значений.

Выгодой алгоритма компрессии, применяемого в формате JPEG, особенно ощутим при обработке больших многоцветных изображений (например, фотоснимков). Для малых изображений (иконок) или картинок с преобладанием одного цвета лучше применять формат GIF.

Формат JPEG не поддерживает чересстрочную загрузку, но здесь есть возможность записи файла в прогрессивной форме. Просмотр крупного файла, записанного в прогрессивной форме JPEG, предполагает быстрое отображение картинки худшего качества, постепенное улучшение которого происходит по мере считывания очередных порций файловой информации. Это имеет большое значение для тех, кто публикует фотоснимки, карты и т.п. Быстрый просмотр картинки немного худшего качества даёт возможность решить, стоит ли ожидать дальнейшей загрузки, или можно прервать передачу изображения в браузер.

Формат BMP (Bitmap, Битовая карта) является очень простым способом записи графики для применения в системе Windows.

Вообще, этот формат в Интернете не применяется. BMP – это внутренняя графическая система Windows. В частности, в этом формате записываются «копии экрана». Достаточно нажать клавиши , чтобы в системном буфере оказалось изображение, в данный момент находящееся на экране. В формате BMP не предполагается компрессия данных, вернее, могут быть скопрессированы только элементы 4- и 8-битовой графики. В таких случаях архивация данных происходит по принципу групповой компрессии – оттискивания соседних точек одинакового цвета и замещение последовательности идентичных данных парой значений, представляющих индекс цвета на палитре и количество пикселей данного цвета в последовательности. При отсутствии компрессии размер файлов, записанных в этом формате, очень велик. К тому же этот формат не поддерживается многими браузерами, а это значит, что часть интернавтов не увидит у себя на экране картинки, записанной в формате BMP. Этот формат конкретно поддерживает InternetExplorer. Существенный недостаток формата BMP – слишком большой размер создаваемых файлов.

На данный момент почти все изображения в Web, представлены в двух форматах: GIF и JPEG. Третий соперник, заслуживающий упоминания, формат PNG, борется за поддержку и внимание браузеров. Далее - краткий обзор "большой тройки" онлайновых графических форматов. Более подробная информация представлена в главах, посвященных каждому из форматов.

GIF - GraficInter change Format можно назвать традиционным форматом файлов Web. Он был первым форматом файлов, который поддерживался Web-браузерами, и по сей день продолжает оставаться основным графическим форматом Web.

Его свойства состоят в следующем:

• - поддерживает не более 256 цветов (меньше можно и часто нужно);
• - использует палитру цветов;
• - использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP, и, следовательно, GIF-файлы в дальнейшем практически не сжимаются);
• - поддерживает чересстрочную развертку;
• - является поточным форматом, т.е. показ картинки начинается во время перекачки;
• - позволяет назначить одному из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIFов;
• - имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIFов;
• - поддерживает возможность вставки в файл управляющих блоков, которые позволяют вставлять комментарии в файл (например, об авторских правах), осуществлять задержку между показами изображений и т.д.

А теперь немножко разъяснений - к чему эти свойства могут привести. Как мы написали, GIF поддерживает не больше 256 цветов, а это значит, что все изображения, которые мы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобы уложиться в этот лимит (разные программы с разным успехом). А отсюда вывод - если взять красивую фотографию с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже - оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид. Поэтому, если надо все-таки сохранить фотографию в формате GIF и передать все оттенки, то приходится идти на хитрости. Например, к фотографии можно применить какой-нибудь художественный фильтр и превратить ее в рисунок или применить тонирование. Зато нет никаких проблем с сохранением рисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и не содержат много цветов.

Вторым наиболее популярным графическим форматом в Web является JPEG - Joint Photographic Experts Group. Он содержит 24-разрядную информацию о цвете. Это 16,77 млн. цветов в отличие от 256 цветов формата GIF. В JPEG используется так называемое сжатие с потерями. Это означает, что некоторая информация об изображениях в процессе сжатия отбрасывается, но в большинстве случаев ухудшение качества изображения не наносит вреда и часто даже не заметно.

Фотографии или любые изображения с плавными градациями цветов лучше всего сохранять в JPEG-формате, потому что он предлагает более высокое качество изображений, вмещающихся в файл меньшего объема. Тем не менее, JPEG не является лучшим решением для графических изображений с одноцветными областями, поскольку этот формат имеет тенденцию испещрять цвета крапинками и конечный файл, как правило, будет несколько больше, чем GIF-файл для того же изображения.

Есть еще третий графический формат, конкурирующий за постоянное использование в Web. Это формат PNG - Portable Net work Graphic, который, несмотря на некоторые достоинства, с 1994 г. находится более или менее в тени. Только недавно браузеры начали поддерживать PNG как встроенную графику, но PNG имеет все шансы стать очень популярным форматом в Web. Именно поэтому он включен здесь в "большую тройку". PNG может поддерживать 8-разрядные индексированные цвета, 16-разрядные полутона или 24-разрядные полноцветные изображения, используя схему сжатия без потерь. Это обеспечивает более высокое качество изображений, а иногда и меньший объем файлов по сравнению с форматом GIF. Кроме того, файлы PNG имеют некоторые замечательные функции, например, встроенное управление коэффициентом гамма, и изменяемые уровни прозрачности (это позволяет показывать рисунок фона сквозь отбрасываемые мягкие тени).

Поскольку изображения Web существуют только на экране дисплея, будет технически правильно измерять их разрешение в пикселах на дюйм (ppi - pixelsperinch). Другая единица измерения разрешения - количество точек на дюйм (dpi - dotsperinch) относится к разрешению печатных изображений и зависит от разрешения печатающего устройства.

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

Практично создавать изображения с разрешением 72 ppi (это лучший вариант для представления на экране), обращая внимание только на общие размеры в пикселах. В процессе создания графики на Web можно вообще не использовать дюймы. Важен размер изображения по сравнению с другими изображениями на странице и общего размера окна браузера.

Например, многие пользователи по-прежнему используют 14-дюймо-вые дисплеи с разрешением 640x480 пикселов. Чтобы гарантировать заполнение графической заставкой всего пространства экрана, лучше сделать его шириной не более 600 пикселов (учитывая, что часть пикселов справа и слева будет использована для окна и для полосы прокрутки). Размер остальных кнопок и изображений на странице следует измерять в пикселах относительно банеpa, имеющего ширину 600 пикселов.

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

В этом отношении для Web-дизайнера существует единственное наиболее важное правило: размер файла графического изображения должен быть минимально возможным! Создание изображений, предназначенных для передачи по сети, возлагает ответственность на разработчиков серьезно относиться к проблеме времени загрузки.

Именно благодаря графике на Web-страничках WWW стала самым популярным сервисом Internet, именно ей мы обязаны всему этому многообразию страничек.

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

Для использования в Web-сайтах применяется два основных формата файлов - GIF и JPG. Сейчас продвигается новый формат для web-графики под названием PNG (произносится "пинг"), но он пока еще мало распространен, и не все браузеры его понимают, поэтому с этим форматом мы пока разбираться не будем.

Итак, приступим к разбору форматов GIF и JPG, опишем их основные свойства и особенности.

Формат GIF

Поддерживает не более 256 цветов (меньше можно и часто нужно);

Использует палитру цветов;

Использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP, и, следовательно, GIF-файлы практически не сжимаются);

Поддерживает чересстрочную развертку;

Является поточным форматом, т.е. показ картинки начинается во время перекачки;

Позволяет назначить одному из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIF-ов;

Имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIF-ов;

Поддерживает возможность вставки в файл управляющих блоков, которые позволяют вставлять комментарии в файл (например, об авторских правах:), осуществлять задержку между показами изображений и т.д.

А теперь немножко разъяснений - к чему эти свойства могут привести. GIF поддерживает не больше 256 цветов, а это значит, что все изображения, которые мы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобы уложиться в этот лимит (разные программы с разным успехом). А отсюда вывод - если нужно разместить красивую фотографию с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже - оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид. Поэтому, если необходимо все-таки сохранить фотографию в формате GIF и передать все оттенки, то приходится идти на хитрости. Например, к фотографии можно применить какой-нибудь художественный фильтр и превратить ее в рисунок или применить тонирование. Зато нет никаких проблем с сохранением рисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и не содержат много цветов. А теперь рассмотрим свойства и особенности второго популярнейшего формата в сети.

Формат JPEG

Позволяет сохранять полноцветные изображения с количеством цветов 16,7 млн. цветов (или 24bpp), причем, если в рисунке меньше цветов, то перед сохранением файла он все равно преобразуется в полноцветное изображение; Использует сжатие с потерями информации, за счет чего достигает диких степеней сжатия файлов; Поддерживает прогрессивную развертку, т.е. изображение появляется вначале с плохим качеством, и в процессе загрузки постепенно улучшается. Пожалуй, это все преимущества формата JPG, и основное его предназначение - хранение изображений фотографического качества.

Оптимизация графики

Вся работа по обработке графики делается в промежуточном формате

Рассмотрим некоторые особенности работы с графикой. Несмотря на то, что мы сохраняем изображения в GIF-файле с поддержкой 256 цветов или в JPG-файле с 16,7 млн. цветов, работать с изображением нужно в каком-нибудь промежуточном формате, который позволяет сохранять картинку без искажений и без потери глубины цвета (например, TIFF и внутренние форматы редакторов типа PSD). Дело в том, что в процессе работы понадобится многократно изменять или искажать изображение, что, в конце концов, приводит к многократной перезаписи файла. Многократная запись в формате GIF приведет к тому, что потеряются оттенки изображения, а в формате JPG - каждая новая перезапись файла будет вносить новые искажения, и через некоторое время фотография будет выглядеть ужасно. Поэтому всю работу по обработке графики делается в промежуточном формате (хотя он и обладает большими размерами файла) и только на самом последнем этапе преобразуется изображение в нужный формат (часто - одновременно с оптимизацией размера файла).

Для web-страниц очень важным является вопрос размера фотографии. Какого размера их делать? Не будут ли они слишком долго грузиться? При оптимизации можно уменьшить размер файла, но вряд ли стоит оптимизировать фотографию, не несущую смысловой нагрузки. Самый первый этап оптимизации - выделение в фотографии главного (с отбрасыванием всего остального) и акцентирование на иллюстрируемом элементе. Это достигается при помощи операции кадрирования и нахождения наиболее выразительной части, передающей смысл фотографии. После этой операции уже можно оптимизировать изображение, и в этом случае оно действительно будет иметь наименьший размер.

А с размерами фотографий нужно придерживаться определенного компромисса - не делать их слишком мелкими, на которых даже под лупой ничего не разглядишь, и не стоит делать их слишком огромными, чтобы время не растягивать в вечность. Хотя, разумеется, есть исключения: правильно оптимизированная большая фотография может занимать время пересылки, эквивалентное времени пересылки обычной фотографии и, наоборот, дурно оптимизированный маленький рисунок будет грузиться до конца дней. Под обычной фотографией можно считать фотографию размером примерно 250x300 пикселей и занимающую порядка 6-10 килобайт. Это не значит, что все фотографии должны иметь такие размеры, но площадь фотографии должна быть ей эквивалентна. Эти рекомендации относятся к "иллюстрирующим" текст фотографиям и не относятся к рисункам, выполняющим функции элементов навигации.