Разделы

Изменение размера рисунка

Метки:

Для изменения размеров рисунка средствами HTML у тега <IMG> предусмотрены параметры width (ширина) и height (высота). В качестве значения используются пикселы, при этом аргументы должны совпадать с физическими размерами картинки. Например, на рис. 1 показано изображение, которое имеет размеры 100 на 111 пикселов.

Рис. 1. Картинка исходного размера

Соответственно, HTML-код для размещения данного рисунка, приведен в примере 1.

Пример 1. Размеры рисунка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Размер изображения</title>
 </head>
 <body>
  <p><img src="sample.gif" width="100" height="111" alt="Пример изображения"></p>
 </body>
</html>

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

Рис. 2. Размеры картинки не указаны и она еще не загрузилась

Рис. 3. Картинка загружена, текст переформатирован

Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее.

На рис. 4 приведено то же изображение, что показано на рис. 1, но с увеличенной в два раза шириной и высотой.

Рис. 4. Вид картинки, увеличенной в браузере

Код для такого рисунка останется практически неизменным и показан в примере 2.

Пример 2. Изменение размера рисунка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Размер изображения</title>
 </head>
 <body>
  <p><img src="sample.gif" width="200" height="222" alt="Пример изображения"></p>
 </body>
</html>

Такое изменение размеров называется ресемплированием, при этом алгоритм браузера по своим возможностям уступает графическим редакторам. Поэтому увеличивать таким способом изображения нужно только в особых случаях, а то слишком ухудшается качество картинки. Лучше воспользоваться какой-нибудь графической программой. Исключением являются рисунки, содержащие прямоугольные области. На рис. 5 приведен файл узора, который занимает 54 байта и имеет исходный размер 8 на 8 пикселов, увеличенных до 150 пикселов.

Рис. 5. Увеличенное изображение

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

Разделы

Термины

Изменение размера рисунка