HTML & CSS для начинающих (Часть 09): Графика для веба (01)

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



Если вы хотите представить изображение на своем веб-сайте, вам предстоит выбор из трех форматов.

• GIF

• JPEG

• PNG

Но какой формат следует выбрать для какой цели? Что лучше использовать для фотографий: GIF или PNG? Сначала давайте кратко рассмотрим возможности каждого формата.

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

Фотографии

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

Скриншоты/Диаграммы

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

Шрифты/Логотипы

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

Прозрачность

Если речь идет о отображении прозрачных областей, JPEG отпадает с самого начала. Остаются GIF и PNG. Но какой из этих форматов следует использовать, если дело касается прозрачности? Хотя GIF в принципе способен работать с прозрачностью, результаты часто оказываются нечеткими. Пиксель в формате GIF может быть либо полностью видимым, либо полностью прозрачным. В PNG такого явления не происходит. Этот формат обладает дополнительным альфа-каналом, благодаря которому можно получить более точные результаты в отношении прозрачности.

Встраивание изображений

Графику можно встраивать с помощью элемента img. (Обратите внимание, что изображения сейчас часто встраиваются с использованием CSS. Подробная информация о CSS, разумеется, будет представлена позже. Однако показанный путь HTML абсолютно соответствует стандартам и можно использовать в HTML5 без проблем.)

<img src="logo.png" alt="PSD-Tutorials.de" />

Элемент img является самостоятельным. С помощью соответствующих атрибутов можно более подробно описать изображение. Самым важным атрибутом является безусловно src. Ведь именно через него указывается изображение, которое должно быть вставлено. В приведенном примере я исхожу из того, что изображение logo.png находится в том же каталоге, где был определен элемент img.

Чтобы изображения действительно отображались, нужно правильно указать путь к ним. HTML предоставляет различные варианты ссылок.

• Абсолютные пути

• Абсолютные пути, относительно базового адреса

• Относительные пути, относительно базового адреса

Сначала рассмотрим абсолютные пути. Этот вариант обычно используется тогда, когда изображение находится не на вашем сервере. Предположим, вы хотите вставить на свой веб-сайт известного бабочку от PSD-Tutorials.de. Тогда вы можете теоретически загрузить его напрямую с сервера, на котором он находится. Сначала определите путь к изображению. Проще всего это сделать,щелкнув правой кнопкой мыши на изображение в браузере и затем выбрав «Копировать URL изображения».

То, что было загружено в буфер обмена, должно в конечном итоге выглядеть так:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Это полный адрес изображения. Этой информации уже достаточно для встраивания изображения.

<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />

Мы присваиваем атрибуту src полный путь к изображению.

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





Поэтому абсолютная ссылка должна быть действительно исключением.

Абсолютные пути относительно базового адреса

Этот вариант всегда подходит, когда изображение находится на том же компьютере/сервере, что и файл HTML, и доступно по текущему протоколу. Звучит сложно, но на самом деле это не так.

Пример:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Это полный адрес. Следующая часть - абсолютный путь.

wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Этот абсолютный путь относится к базовому адресу http://4eck-media.de.

Относительные пути относительно базового адреса

Представленный сейчас вариант, безусловно, наиболее распространен. В этом случае всегда выбирается текущий путь в качестве точки отсчета для адресации. Вот еще некоторые примеры. Предположим, есть файл index.htm, в который вы хотите вставить изображение. Кроме того, на том же уровне существует каталог images, в котором находится это изображение.

index.htm
images
--logo.png

Вызов в атрибуте src в этом случае выглядел бы так:

src="images/logo.png"

Но как это будет выглядеть, если изображение находится в каталоге, находящемся выше файла HTML?

projekt
--images
-----logo.png
--archiv
-----index.htm

В этом случае index.htm находится на один уровень ниже изображения для вставки logo.png.

src="../images/logo.png"

Итак, синтаксис здесь означает: поднимитесь на один уровень, перейдите в каталог images и покажите logo.png.

projekt
--images
----logo.png
----2013
------januar
--------index.htm

Здесь синтаксис будет таким:

src="../../images/logo.png"

Изображение logo.png в данном случае находится на два уровня выше index.htm в каталоге images.

Преимущество относительных путей заключается в их гибкости. Вы можете, например, разработать проект локально и затем скопировать его на "реальный" сервер. Пути останутся неизменными.