Сегодня: 16 сентября 2024 г., понедельник Время:

Online-учебник по HTML

Автор учебника: Евгений Андросов

Урок 9. Картинки, фотографии (продолжение)

К тегу <img> всегда должен «прилагаться» атрибут "src", который указывает браузеру, где находится изображение. Помимо него есть и другие атрибуты, которые могут понадобиться при работе с изображениями.

Атрибут "alt" используется для альтернативного описания изображения, если, по каким-то причинам, оно не показано пользователю. Развитие Интернета и скоростей, с которыми он передается, делает применение этого атрибута не актуальным, но есть еще пользователи с очень медленным Интернетом, у которых картинки могут загружаться очень медленно или даже вообще не загружаться. Именно для них используется атрибут "alt":

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

Два других важных атрибута - "width" и "height":

Width – ширина, height – высота. Эти атрибуты можно не указывать, но для корректного отображения вашего изображения любыми браузерами это необходимо!

Кроме того, эти атрибуты удобны, когда вы используете одну и ту же картинку несколько раз в разных размерах. Вам не надо делать несколько ее копий, просто каждый раз вы указываете требуемый в данном ее местоположении размер и программа сама уменьшает ее до этого размера.

Например, вот как будет выглядеть один и тот же файл изображения, если в атрибутах указать его размеры по разному:

При этом важно знать и помнить!

Первое: Если вы не хотите, чтобы изображение подверглось искажению при изменении его размеров с помощью атрибутов, например вот так:

Отображение в браузере:

необходимо менять эти размеры, соблюдая пропорции. Это легко сделать, если изображение квадратное – просто указываете одинаковую ширину и высоту: 32х32 или 100х100 или 250х250 – пропорции сохраняются. А как быть, если изображение имеет, например, оригинальный размер 131х58, как сохранить его пропорции при изменении размера? В этом случае нужно:

...либо вручную вычислять его пропорции с помощью простого уравнения, взяв за основу один из параметров – либо высоту, либо ширину. Например: если требуется ширина в 100 пикселей (вместо 131), то уравнение будет выглядеть следующим образом:
131 – 100
58 - х
х = 100х58:131

Результат: при ширине в 100 пикселей высота будет равна 44,28 пикселя, при этом пропорции будут сохранены.

...либо пользоваться программой Photoshop, в которой есть возможность уменьшать изображения с заданными пропорциями.

А лучше всего заранее делать изображения с такими параметрами, которые можно легко изменять в пропорциях, например: 200х100 или 500х250.

Второе: Неплохо помнить, что реальный размер файла изображения в килобайтах останется неизменным, и этот файл будет занимать то же время для загрузки, как и раньше, хотя и будет выглядеть на экране маленьким. Следовательно, никогда не уменьшайте размер изображения атрибутами width и height, если только данное изображение не используется вами на сайте много раз. Если вы хотите использовать изображение один раз – сделайте его сразу того размера, который нужен.

Третье: Увеличивать изображения с помощью атрибутов категорически не рекомендуется. Так как изображения для Интернета делаются заведомо «легкими», они не имеют запаса в качестве и любое увеличение размера повлечет за собой резкое ухудшение качества! Наглядный пример. Я увеличиваю в два раза изображение, имеющее исходный размер 100х100 пикселей:

И вот, что мы получаем в браузере:

Четвертое и последнее: Чем меньше размер файла изображения, тем он быстрее будет загружаться браузером. Обычно, размер изображения на Интернет-странице не превышает 50-70 Кб. Исключения составляют отдельные уникальные фотографии, в которых вам важно показать именно их качество. Но даже в этом случае, размер файла не должен быть больше 200 Кб, иначе никто не увидит этой уникальности – люди просто будут переключаться на другие страницы или сайты, не желая ждать, пока ваша уникальность загрузится.

Предыдущий урок | К началу урока | К оглавлению | Следующий урок

Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментариев к этому уроку пока нет

Задать вопрос

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