Основы работы с HTML


Изменение размера изображения - часть 2


</body> </html>

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

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

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

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

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

<html> <body>

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

</body> </html>

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




Начало  Назад  Вперед



Книжный магазин