Файл: Уроки HTML.docx

Оптимальные размеры изображений

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

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

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

Максимальный размер файла. Лично я стараюсь ограничить любые изображения на своих сайтах. Придерживаюсь нормы 15-20 килобайт. Такие изображения достаточно подробны, но посетители не начинают грызть ногти в ожидании, пока они загрузятся. Ограничение в 15-20 килобайт очень приблизительно. Чуть позже я расскажу о пиктограммах, и вы убедитесь, что большинство из них очень малы (0.5-5 килобайт) и быстро загружаются. Если вы встретили потрясающее изображение, занимающее больше 20 килобайт, скокойно используйте его. Просто помните, что если вы вставите слишком много таких изображений, время ожидания посетителей существенно возрастет.

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

Существует ряд профессиональных пакетов, таких как Adobe Photoshop, позволяющих изменять размеры изображений. О том как пользоваться Photoshop'ом я расскажу в другом разделе рассылки. Паралельные уроки Photoshop'у я начинаю со следующего выпуска... решено! Вообще Photosop - самое универсальное средство для всех. Если интересно знать подробней, читайте следующую главу рассылки.

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

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

Миниатюры очень популярны, поскольку дают посетителям возможность выбирать только те изображения, которые они хотят увидеть. Я покажу вам сейчас как можно использовать миниатюры:

Миниатюра полное изображение

Алтернативный текст

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

Торопливые посетители часто командуют браузерам прекратить загрузку иозображений с WWW. Поскольку загрузка изображений отнимает львиную долу времени, они предпочтут ускорить процесс, не дожидаясь полной загрузки всех изображений. Для таких посетителей полезен альтернативный текст - тогда они смогут прочесть короткое описание того, что предоставлено на рисунке, и при желании просмотреть его.

В описаных выше случаях полезно использовать ключевое словов ALT тега <img>. ALT выводит заданный текст в той части экрана, где должно быть (или будет) изображение.

Задание альтернативного текста, описывающего изображения домашней страницы, считается правилом вежливости. Альтернативный текст является частью тега <img>. Просто добавьте к тегу ключевое слово ALT="..." и наберите текст в кавычках после знака "равно". Данный тег с альтернативным текстом, к примеру с dc72.gif, выглядет так:

Посмотрите, что мы добавили:

Есть еще один плюс у альтернативного текста. Подведя курсор мыши к картинке где есть ключевое слово ALT="...", вы увидите всплывающее окошко с самим альтернативным текстом. Попробуйте подвести к бабочке чуть выше.

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

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

Продолжая тему об изображениях перехожу к следующей процедуре. Есть несколько способов выравнивать изображения на странице по отношению к тексту. Ключевое слово align нам в этом поможет. С его помощью вы можете задавать место изображения на экране и вид оборки его текстом. Сейчас я приведу вам 8 опций ключевого слова align.

Давайте будем избегать тегов TEXTTOP, ABSMIDDLE и BASELINE, они могут вас просто запутать. Чтобы задать выравнивание картинки бабочки по левому краю, зададим следующую команду:

Посмотрите, что получится: