Современный мир нельзя представить без информационных технологий. Каждый день создаются все новые и новые шедевры, которые сложно понять людям, не работающим в сфере IT. Что бы все было максимально просто в понимании, предоставляются статьи различных видов, которые помогают разобраться в вопросах связанных с современными технологиями в короткие сроки.
Каждый день при поиске любой информации, люди делают миллионы запросов в своих браузерах, ищут картинки, фотографии, музыку, статьи и этот список можно продолжать бесконечно. Сегодня же остановимся на поисках изображений. Каждый из нас уже привык к тому, что после запроса, нужная картинка появляется на экране, но как это всё работает и что нужно для этого, мало кто знает.
Ну что, поехали? Сейчас речь пойдет об адаптивных изображениях. Адаптивные изображения - это прежде всего изображения которые лучше всех изображаются на различных цифровых устройствах. Каждый при создании изображения хочет только одного, что бы его картинка отлично смотрелась как на больших, так и на маленьких экранах.
Для загрузки изображения на просторы интернета используют два самых узнаваемых тега, а именно тег img или тег picture. Каждый из упомянутых тегов несет в себе своеобразную информацию и даже перечень правил, которые позже браузер использует, когда будет выбирать и загружать подходящую картинку.
Так есть ли вообще разница между img и picture? Если есть, то какая?
Конечно разница есть и сейчас поговорим о том, что же собственно различного между тегами, что есть в теге img такого чего нет в теге picture и наоборот.
Прежде чем приступить к работе, нужно задать некий метатег, который служит указателем для браузера. На что же он указывает? Все просто, его изначальное предназначение - это давать указание, что бы браузер выполнял масштабирования размеров экрана различных устройств. Данный метатег выглядит так:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
После того как задали метатег, можно поговорить и о теге img. Каждый из вас однозначно встречал эти три буквы. Так вот, по своей сути данный тег предназначен именно для того, что, бы показывать, отображать изображение на различных веб-страницах, используя графический формат такой как:
- GIF
- JPEG
- PNG.
Что бы найти изображение указывается адрес файла, в котором присутствует данная картинка. Все это задаётся через некий атрибут srcset.
Srcset назначен и служит для того, что бы указывать доступные размеры и URL каждого изображения. Данный атрибут имеет список, который несет в себе предназначение для указания набора именно источников изображения. Внешний вид списка состоит из строчек, бывает из нескольких либо же одной. Все эти строки разделяются запятыми и состоят из:
- Дескриптора ширины (предназначен показывать целое и только положительное число за которым идёт w, а также показывать браузеру для какой контрольной точки использовать данное изображение).
- URL изображения.
Что бы было понятно, как это выглядит при записи, предоставляется пример:
<img
src="bears-1920x1080.jpg"
alt="bears"
srcset="
bears-480x270.jpg 480w,
bears-960x540.jpg 960w,
bears-1920x1080.jpg 1920w
"
/>
Ознакомившись с данным примером, можно сразу сделать некие выводы. Цифры, которые идут вместе с символом w – это изображения которые имеют различную ширину, а именно: 480, 960, 1920. Важно отметить, что ширина любого изображения указывается только в пикселях. Исходя из этого, придём к логичному выводу, что атрибут srcset содержит три изображения различной ширины. Делая свою работу, браузер будет подбирать изображение исходя из плотности пикселей и ширины экрана.
Теперь переключим свое внимание на браузер. Он устроен таким образом, что будет представлять, что данное изображение занимает абсолютно всю ширину экрана. Для предотвращения ложного представления, существует такой атрибут как sizes, который указывает на то, какую максимальную ширину может занимать картинка при указанном размере экрана.
Выше упомянутый атрибут так же, как и его «напарник» srcset состоит из строк и запятых, которые их разделяют. Но в случае с sizes строки состоят из таких элементов как медиа выражения и ширины изображения.
Для лучшего понимания предоставлен иллюстрационный пример:
<img
src="bears-1920x1080.jpg"
alt="bears"
sizes="(max-width: 600px) 480px, (max-width: 1200px) 960px, 100vw"
srcset="
bears-480x270.jpg 480w,
bears-960x540.jpg 960w,
bears-1920x1080.jpg 1920w
"
/>
Будьте максимально внимательны, так как важно помнить, что атрибут sizes указывается, когда есть ограничения в размерах изображения сss стилями.
Что же будет если не указать данный атрибут?
Если вы каким-то способом забыли или просто решили не указывать атрибут, то он будет иметь значение sizes="100vw" и в этом случае браузер будет подразумевать, что изображение занимает всю ширину экрана.
Ознакомившись более детально с тегом img, пришло время поговорить об теге picture.
Этот тег служит некой копилкой, которая включает в себя различные теги source и один тег img.
Source можно охарактеризовать как некий в своем роде контейнер с изображениями. В нём хранится информация касаемо формата и размера изображений. Кроме этого, в нём хранятся правила по которым браузер может выбрать данный источник. Бывает, что при работе может оказаться что ни один источник не подходит, то преимущественно будет выбран файл, который указан в атрибуте srcset тега img. Может быть ситуация, когда подойдут одновременно несколько источников, так в этом нет проблемы, потому, что браузер выберет первый по порядку. Атрибуты sizes и srcset есть неотъемлемой частью тега source, а работают так же как идентичные атрибуты тега img.
К примеру, это выглядит так:
<picture>
<source
srcset="bears-480x270.jpg 480w, bears-960x540.jpg 960w, bears-1920x1080.jpg 1920w"
sizes="(max-width: 600px) 480px, (max-width: 1200px) 960px, 100vw"
/>
<img src="bears-1920x1080.jpg" alt="bears" />
</picture>
