Изменение размера изображения

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

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

В первом случае изображение выводится с сохранением своих исходных размеров (253*190 пикселей). <img src="photo.png"> Во втором варианте высота изображения уменьшена до 100 пикселей. Обратите внимание, хотя явно задан только атрибут height, браузер автоматически отмасштабировал изображение и по ширине с сохранением исходных пропорций. <img src="photo.png" height="100"> В третьем варианте принудительно заданы оба атрибута, при этом высота уменьшена до 100 пикселей, а ширина оставлена на прежнем уровне. В этом случае автоматического масштабирования не производится, и изображение сжимается по вертикали. <img src="photo.png" height="100" width="253">

</body> </html>

Пример выполнения данного HTML-кода

Автоматическое масштабирование с заданием только одного из атрибутов довольно часто используется при необходимости вывода изображений различного формата в столбец (при этом для всех изображений задается одинаковым атрибут width) или в строку друг за другом (height).

Значение атрибутов height и width задается не только в пикселях, но и в процентах. Но в этом случае речь идет о выделенной под размещение изображения области. Это может быть все окно браузера или ячейка таблицы.

Ширина изображения в данном примере задана равной 100%. Изменяя размер окна браузера можно заметить, как изображение автоматически масштабируется, занимая всю ширину окна. <img src="photo.png" width="100%">

</body> </html>

Пример выполнения данного HTML-кода

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

При размещении изображений на Web-странице желательно придерживаться следующих рекомендации:

При размещении изображения на Web-странице независимо от исходного размера изображения желательно в явном виде задавать размеры области для отображения при помощи атрибутов height и width. В этом случае браузер еще до полной загрузки изображения получает информацию о его размерах и заранее резервирует место, благодаря чему весь текст на странице может быть размещен и отформатирован еще до загрузки изображений.
Желательно избегать предлагаемых браузерами возможностей масштабирования изображения (за исключением изображений заднего плана) и отображать полноразмерную графику. Для этого изображения должны быть соответствующим образом обработаны при помощи специальных графических пакетов (например, Adobe Photoshop). Это позволяет избегать искажений изображения вследствие масштабирования, уменьшает объем загружаемой информации при использовании изображения большего размера.
При необходимости размещения на Web-странице изображений большого размера (фотографии, сложные схемы, репродукции картин и т.п.) на первой странице желательно размещать уменьшенные копии изображений, при нажатии на которые будет показываться полноразмерное изображение. В этом случае необходимо использовать два различных варианта этого изображения: полноразмерное и изображение-иконку.

Можно пояснить эти рекомендации на следующем примере.

<html> <body>

В первом варианте в качестве изображения-иконки используется большое изображение, размер которого изменен при помощи атрибутов width и height. При нажатии на него исходная фотография будет отображена в полный размер. <a href="photo_big.png"><img src="photo_big.png" width="80" height="60" border="0"></a> Во втором варианте в качестве изображения-иконки используется специально подготовленное малое изображение, значения атрибутов width и height заданы для обеспечения правильного форматирования Web-страницы на этапе частичной загрузки. <a href="photo_big.png"><img src="photo_small.png" width="80" height="60" border="0"></a> Несмотря на то, что оба этих варианта с внешней точки зрения практически идентичны, во втором варианте объем загружаемой информации значительно ниже. Так объем большого изображения "photo_big.png" составляет более 1 Мб, в то время как "photo_small.png" - только 14 Кб. Очевидно, что при малой скорости подключения в Интернет пользователь может просто не дождаться конца загрузки страницы.

</body> </html>

Пример выполнения данного HTML-кода

Содержание раздела