Работа с изображениями на сайте

Современный сайт невозможно представить без изображений. Сегодня они все больше используют графику. Некоторым интернет ресурсам, например, магазинам, социальным сетям, порталам, посвященным дизайну, фотографии и т.п. графика и вовсе жизненно необходима. С растущим разнообразием различных устройств для просмотра сайтов, растет и необходимость правильного отображения и эффектной “подачи” изображений конечному пользователю. В данной статье будут рассмотрены некоторые технические приемы, как правильно разместить изображения на страницах сайта.

Как правило, изображения на страницу могут попасть двумя путями:

  • В качестве элемента страницы через html тег <img/>
  • В качестве фонового изображения какого – либо элемента той же страницы через css свойство background-image

Рассмотрим первый из них.

Необходимый минимум для вывода изображения на страницу выглядит так: <img src="http://example.com/image.jpg" />

Данный код выведет изображение из файла image.jpg. На первый взгляд все предельно просто, но это только на первый взгляд. Для начала добавим к изображению описание и альтернативный текст, он будет показан в случае отключения у пользователя возможности показа изображений. Да, бывает и такое. Самый распространенный пример – это мобильные почтовые клиенты. Они не показывают изображения пока пользователь их принудительно не загрузит, в этом случае пользователь видит содержимое атрибута alt. Описание будет отображаться при наведении на изображение указателя мыши:

<img src="http://example.com/image.jpg" alt="Наше тестовое изображение" title="Описание нашего изображения" />

Или еще вариант, если мы хотим сразу показать описание:

Опять вроде бы все просто, но у изображений есть размеры, и эти размеры фиксированы.

А если ширина изображения гораздо больше ширины страницы?

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

Самое интересное начинается когда вы понимаете, что изображение будет показываться на совершенно разных дисплеях. На сайт могут зайти как с обычного ноутбука, так и с планшета или со смартфона. А еще у этих устройств может быть разная плотность пикселей, вы же не хотите огорчать их владельцев не четкими фотографиями! Здесь приходят на помощь атрибуты srcset и size, а также тег picture, суть их действия заключается в предоставлении браузеру выбора вариантов изображения, браузер сам определит какую версию загружать и выводить на экран, важно также и то, что браузер выбирает подходящее изображение до его загрузки. Атрибут srcset содержит небольшую приставку к имени файла, называемую дескриптором, с его помощью и задается условие выбора этого файла. Например, мы можем показать более четкое изображение (image_600x600) для экранов с более высокой плотностью пикселей, а для остальных оставить стандартное, но более легкое (image_300x300):

или более широкое для экранов с различной шириной:

Самым продвинутым способом задать разные изображения для разных экранов является тег <picture>. С его помощью можно манипулировать изображениями практически неограниченно. Тег состоит из нескольких тегов <source> и тега <img/> оставленного для совместимости, он будет работать в случае если <picture> не поддерживается браузером.

Работа с изображениями на сайте 1
A WordPress Commenter – 

Hi, this is a comment. To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard. Commenter avatars come from Gravatar.

Comments are closed