Размеры вставляемых изображений

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

 
Но ни в программе-браузере, ни в программе Блокнот таких возможностей нет. Что же делать?

 
Неписанное правило гласит о том, что за возможность внедрения графических изображений в других программах "отвечают" функции графического интерфейса, в HTML же "отвечают" ключевые слова вместе с ихними параметрами. В ключевом слове <IMG> имеется два параметра, указывающих высоту и ширину картинки (width и height). Размеры этих величин прописываются в пикселях.


Приведем пример.

Возьмем изображение с размером 300x211 пикселей. Теперь посмотрим, что получится, если указать параметр width равным, к примеру 150? Каким же получится размер изображения? Кто-то может подумать, 150x211? И окажется неправ: изображение уменьшилось пропорционально так, что ширина этого изображения стала равной 150 пикселей. 


Однако стоит сказать, что это, не самое лучшее применение операторов width и height. Почему? Ведь эти параметры, кажется, только для того и придуманы? Все дело в том, что в данном случае настоящие размеры картинки, которая загружается в сети Интернет, не меняются. Изменяется только размер изображения, выводимого на монитор, но количество передаваемых килобайтов остается неизменным.

 

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

 

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


Правда, есть еще и другие, довольно таки полезные методы применения операторов height и width. Первое, что можно сделать, посредством этих параметров можно изменять пропорции картинки, удлиннять ее в длину и ширину. С помощью такого подхода можно получить довольно таки неплохие эффекты. 


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

 

Далее пропишем в ключевом слове <IMG> точные размеры предполагаемой картинки. Что теперь просматривается на экране? На экране можно будет увидеть прямоугольник с размерами точно соответствующими нашему изображению. Теперь давайте представим себе, что будет происходить с Интернет-страницей и изображением, которое пользователь переписывает из сети Internet на свой персональный компьютер при помощи медленного модема. Что будет первым грузиться на персональный компьютер и появится на экране? Конечно, то, что значительно важнее, что имеет больше информации. Как правило, это текст. Кстати, он и загружается с большей скоростью.

 

Пока грузится все остальное, пользователь, вместо того чтобы скучать, не зная чем ему заняться, сможет почитать этот текст. А как быть с изображениями? Пока программа- браузер их не получит, на экране вместо изображений будут такие же пустые прямоугольники, о которых мы рассказали ранее.

 

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

 

Если же прописать габариты картинки в ключевом слове <IMG>, то программа-браузер заранее "занимает" под это изображение место, и оформление Интернет-страницы не пострадает. И еще одна интересная ситуация. Что делать, если окно программы-браузера очень маленькое, и текст не может поместиться в нем? Можно ответить на этот данный вопрос таким образом: если текст не может поместиться по ширине, то он будет перенесен на другую строку. А если это не возможно или если текст не может поместиться по высоте, тогда появится полоса прокрутки.

 


Такая же ситуация наступает, если в окне не может поместиться изображение. Но имеется способ, дающий возможность управлять размерами изображения в зависимости от размеров окна программы-браузера. Этот способ заключается в задании ширины и высоты картинки в процентах. Если, к примеру, прописать width=100%, то при попытке изменить ширину окна размер картинки тоже изменится, и она всегда будет "вмещаться" в окно не обращая внимание на то, какие ее размеры.

 

Стоит обратить внимание, на тот факт, что если в процентах указать ширину картинки, а окно программы-браузера меняется по высоте, то размер изображения не изменяется. Точно так же, если в процентах указать высоту картинки, а окно программы-браузера меняется по ширине, то размер изображения не изменяется.