HTML изображений

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

Тег картинки

Для загрузки изображений в документ HTML можно использовать тег картинки <img src="..." width="" height="" alt="..." /> . Заметим, что она является самостоятельным закрывающий тег, поэтому не забывайте пространстве и слэш в конце. По аналогии с HREF атрибута HTML Ссылки атрибуте SRC (источник) имеет абсолютный или относительный адрес файла изображения.

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

Атрибут Alt (Альтернативный текст) описывает содержание и изображения отображаются в случае, если изображение не загружается. Обратите внимание, что Alt требуется для каждого изображения тегов для того, чтобы быть действительным XHTML 1.0 Strict. Если вы не хотите, чтобы обеспечить Альт текст, который вы можете просто положить alt="" . Если возможно, всегда должны предоставить описание изображения так как это поможет людям с инвалидностью использовании программ чтения с экрана или поисковых системах как Google, чтобы знать, что ваш имидж о.

HTML изображений

Выходной

Графические ссылки

Рядом с текстовыми ссылками вы можете также использовать графические ссылки или сочетание того и другого.

HTML Image Link

Выходной

Форматы изображений

Хотя это лучше подходит в деталях для веб графики учебника, это всегда хорошо знать различные типы форматов изображения вы можете использовать. Большинство браузеров поддерживают следующие 3 типа изображений:

GIF

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

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

Они также поддерживают анимацию GIF хранения нескольких кадров и их последующее воспроизведение в виде последовательности. Это не так широко используется больше, хотя теперь, когда Flash довольно многое мейнстрима.

JPEG

Поддержка файлов JPEG 16,7 млн. цветов и, таким образом, лучше всего подходит для реалистичных фотографий. Качество изображения может варьироваться от больших до очень плохого в зависимости от настройки сжатия. Постарайтесь найти баланс между размером файла и качеством больших файлов вызовет ваш веб-сайт для загрузки медленно.

PNG

PNG файлов являются довольно новый формат в ландшафтном дизайне Сети и, как полагают заменить GIFs (если хорошо сжатый, палитровых PNG всегда должна быть меньше размера файла, чем его коллега GIF). Они поддерживают цветовые палитры, как GIF-изображения, а также 16,7 миллиона цветов, как JPEG, хотя в отличие от JPEG, PNG файлов используют сжатие без потерь, которая удерживает 100% от первоначального качества изображения.

Пожалуй, наиболее интересной особенностью является их поддержка альфа-прозрачности. Каждый пиксель может иметь свою собственную прозрачность в диапазоне от 0 до 100% (в отличие от формата GIF, где пиксель либо прозрачной или непрозрачной), позволяющий интересных эффектов, таких как сглаживание (гладкие границы против любой цвет фона). Это поддерживает все современные браузеры (Firefox, Opera, Safari, IE7). К сожалению IE6 изначально не признать, альфа-прозрачности, однако существует ряд приемлемых обходных путей.