картинки встречаются на каждом веб-сайте в интернете и зачастую под капотом на уровне кода разработчики используют обычные теги emg с одним лишь атрибутом src Однако возможности современного Веба для работы с изображениями гораздо шире чем кажется в этом видео мы разберём малоизвестные HTML атрибуты и теги а также современный форматы изображений благодаря которым картинки на твоих сайтах будут загружаться гораздо оптимальнее для начала рассмотрим стандартную картинку которая сделана в разметке через обычный тег IMG у этого элемента сейчас всего два атрибута src и Alt но какая остаётся проблема с этим изображением если файл картинки весит много или же если у пользователя просто медленный интернет для этого я симулирует devtools Network слабую скорость интернета допустим Slow 3G то в таком случае при загрузке страницы мы увидим как до появления морды кошки параграфы из текстом визуально идут друг за другом а как только котейка прогружается второй параграф улетает куда-то вниз то есть происходит эдакий скачок всего контента А если бы изображений было несколько то подобные коллизии продолжались бы до тех пор пока все картинки на странице не прогрузка элементу emg атрибуты wids и Hide здесь мы всегда указываем размеры изображения в пикселях но без указания единицы измерения то есть пишем просто числа притом Если вы верста ете по макету указывать нужно размеры картинки с десктопной версии макета смотрим результат при прогрузки страницы браузер резервирует под картинку столько места сколько мы указали в атрибутах Ви H поэтому никакого скачка не происходит все элементы находятся на том же месте как до прогрузки изображения так и после мы указали в атрибутах размер 960 на 12280 пикселей Однако это не значит что на мобильных устройствах браузеры будут резервировать под картинку точно такое же пространство если мы в Tools включим эци допустим iPhone SE с шириной экрана 375 пикселей то мы заметим что картинка вполне влезает в экран и занимает точно уж не 960 на 1280 пикселей Почему так браузеры самостоятельно пропорционально уменьшают указанные в атрибутах вици H размеры так чтобы картинка влезал в экран Ну и дополнительно чтобы всё это работало необходимо чтобы было такое правило у AMG Max Wiz 100% и h a также стоит отметить что если нам в дальнейшем потребуется на уровне CSS переопределить размеры изображения то мы можем спокойно это сделать атрибуты vits и He в разметки нам не помешают далее рассмотрим вопрос оптимизации картинки под экраны с разной плотностью пикселей экраны современных устройств особенно смартфоны стараются уместить больше пикселей на одну точку и чем у экрана больше плотность пикселей тем качественнее картинку он может показать есть такой сайт mydevice.io зайдя на него можно увидеть пикселей экрана вашего устройства у моего ноутбука CSS Pixel ratio коэффициент 2 А если бы я зашёл на этот сайт со своего телефона то увидел бы здесь число три Что всё это значит если эта картинка по макету должна занимать 360 пикселей по ширине то для моего текущего устройства с коэффициентом плотности пикселя 2 было бы здорово если бы размеры подгружает были бы буквально в два раза больше чем 360 пикселей в ширину то есть 700 20 пикселей Ну а для моего телефона с коэффициентом плотности пикселей 3 отлично подошла бы картинка в три раза больше оригинальной то есть с шириной 1080 пикселей мы как разработчики можем предоставить браузеру самому выбрать нужную вариацию картинки в зависимости от плотности пикселя экрана на котором открыт веб-сайт когда я для вот этой вот демонстрации выгружал кота из макета я экспортировала файл с этой картинкой с дефолтным параметрами Однако мы можем на этой панели выгрузки фигмы в первом селекте выбрать коэффициент размера допустим 2x сохраним этот файл в ту же папку проекта Где находилась оригинальные изображение назовём его также но в конце до расширения с точкой добавим суффикс символ подчёркивания 2x это рекомендуемое правило от Гугла по именовани картинок увеличенных в два раза и Давайте дополнительно выгруженные Итак теперь у нас в папке images лежат три версии изображения обычная увеличенная в два раза и увеличенная в три раза теперь возвращаемся в HTML разметку и элементу IMG сразу после атрибута src добавляем атрибут src Set в его значении Мы указываем через запятую набор изображений с разными параметрами плотности пикселей идём от меньшей картинки к большей сначала указывается путь до затем Через пробел или через несколько пробелов указывается дескриптор плотности пикселей число коэффициента и буква X далее ставится запятая и по такой же схеме пишутся правила для остальных картинок Так как в атрибуте src уже указан путь до файла с оригинальной картинкой то первую запись в src Set с дескриптора Узер будет обрабатывать с бум src при чтении разметки браузер по порядку обработает информацию о каждом изображении в нашем случае браузер будет ориентироваться только по коэффициенту плотности пикселей Ну и по итогу браузер выт первую подходящую ему картинку ЕС же бзр очень старый и атрибут src не поддерживается то браузер его про игнорирует и успешно обработает стандартный атрибут src но справедливости ради стоит сказать что у современных браузеров проблем с атрибутам src нет он поддерживается отлично несмотря на незначительные нюансы работы с Safari Итак давайте теперь в de Tools браузера перейдём во вкладку Network и здесь в фильтрах выберем emg чтобы в списке загружаемых ресурсов отображались только файлы картинок перезагружаем страницу и видим как браузер загружает файл с названием Cat 2x то есть увеличенную в два раза версию изображения Если же мы включим эмуляции допустим iPhone 4 Pro Max с коэффициентом плотности пикселей X3 откроем Network Перезагрузи страницу мы увидим как браузер теперь подгружает C подчёркивание 3X то есть увеличенную в три раза картинку таким образом браузер под экраны с разной плотностью пикселей подбирает наилучший по его мнению вариант картинки вся эта схема хорошо работает для картинок которые в вёрстке имеют всегда фиксированные размеры в нашем случае картинка кота что на десктопе что на мобилке имеет одинаковую ширину 360 пикселей Однако чаще всего размер картинки на десктопе визуально больше а на мобилке меньше Ну и размер файлов этих картинок совершенно разный Ну так зачем же нам на мобилках грузить полноразмерную версию изображения мы можем это оптимизировать с помощью атрибута src с другим дескрипторов нужно будет указывать Медиа запросы но детально разбирать этот синтаксис мы не будем так как есть способ лучше через связку из тегов Picture и Source Итак я выгрузил из макета эту картинку в двух вариациях для десктопа и для мобилки назвал их Cat Desktop и Cat Mobile соответственно в разметке я использую элемент pict внутри которого расположены элемент Source и элемент emg у emg здесь указываются лишь атрибуты src Alt wids и Hide в src прописывается путь до картинки десктопной версии А вот у элемента выше у Source задаётся два атрибута уже знакомый нам src Set и необычный для HTML атрибут Media в src Set указан путь до изображения Cat Mobile после указания пути в src Set не указываются никакие дескрипторы элементу Source это не требуется А вот в атрибуте медиа в привычном нам CSS формате указывается Медиа запрос при котором изображение из соседнего src Set будет загружаться элементов Source на самом деле может быть несколько у нас вполне мог бы быть дополнительный файл с картинкой для планшетных Ширин А в атрибуте медиа можно было бы указать Медиа запрос допустим mawi 1000 пикселей в данном случае этот элемент стоило бы поместить между первым Source и вот этим AMG браузер будет читать разметку внутри пикча по порядку как только браузер среди элементов Source встретит Медиа запрос котором удовлетворяет ширина текущего окна браузера браузер начнёт подгружать подходящий файл путь к которому указан в соответствующем атрибуте src Set А если же ни один из Медиа запросов Source не сработал браузер подгрузить картинку последнего элемента IMG так как у нас нет файла Cat Tablet то я уберу этот лишний элемент из разметки Итак смотрим в браузер прыгаем в Def Tools во вкладку Network и смотрим видим что браузер загружает на десктопе версию картинки C подчёркивание Desktop А если же мы установим в эмуляторе допустим ширину 444 пикселя Перезагрузи страницу мы увидим как браузер подгружает c mobile то есть наш Медиа запрос сработал преимущество такого подхода очевидно оба этих файла занимают совершенно разный объём по памяти файл для десктопа весит 373 КБ а для мобилки 151 разница почти в 2 с поно раза связка из Picture и Source помимо удобного указания Медиа запросов позволяет указать несколько форматов одного и того же изображения для этого в элементе Source используется дополнительный атрибут Type в вебе существует два современных формата изображений avive и webp обсуждать эти форматы мы особо не будем Но если кратко то они весят меньше не теряют качества и рендерится браузером оптимальнее я взял оригинальную JPEG картинку и онлайн конвертером перевёл её в два дополнительных формата avive и webp если посмотреть на папку с файлами всех трёх форматов то можно увидеть что JPEG са самый тяжёлый 229 КБ webp Чуть поменьше 194 А avif самый легковесный 137 КБ вернёмся к коду так как считается что формат aviv более современный то первым делом внутри pch располагается элемент Source у которого в src Set указывается путь до файла картинки формата avive А в атрибуте Type пишется значение Image SL avive с картинкой формата wbp аналогичная запись меняется только расширение в конце атрибута src Set и в Type значение меняется на Image SL webp в последнем элементе в emg и его атрибуте src указывается путь до картинки в обычном JPEG формате как и с Медиа запросами браузер загрузит первый подходящий ему формат файла перейдя в браузере во вкладку Network можно увидеть как у меня загружается формат aviv самый оптимальный формат из тех которые я предложил браузеру Давайте теперь рассмотрим комбинацию из из Медиа запросов и различных форматов изображений если нам нужно под определённые ширины экранов подгружать определённое изображение и при этом мы хотим учитывать современные форматы то необходима подобная разметка первоначально отталкивай от Медиа запросов и к каждому Медиа запросу дублируем сорс с указанием альтернативного формата файла последовательно avif webp JPEG также повторяем и с другими Медиа запросами в нашем случае у нас всего два типа картинки под мобилку и под десктоп поэтому для второй группы элементов Медиа запрос то есть атрибут Медиа не нужен Но вот про атрибут Type для указания нестандартных форматов файла забывать не стоит Давайте теперь перейдём в браузер во вкладку Network и посмотрим что у нас загружается на десктопе загружается файл Cat Desktop avive Если же мы включим эмуляции мобильного устройства допустим iPhone SE Перезагрузи страницу Увидим как загружается файл Cat Mobile aviv в обоих случаях на десктопе и на мобильном устройстве если бы браузер не умел обрабатывать формат aviv он бы использовал следующие списка webp если бы не умел обрабатывать и его то браузер использовал бы наверняка известный ему формат JPEG уверен что весь этот синтаксис с src Set или же со связкой Picture + Source многим кажется громоздким столько строчек кода ради того чтобы вывести одно единственное изображение на страницу Да вручную всё это писать действительно нудно и время затратно однако все эти операции как минимум работу с различными форматами файлов чаще всего можно автоматизировать с помощью сборщиков проектов или же различных плагинов для бэнда которые сами проанализирует вашу разметку и добавят в нужные места к единственной GP картинки дополнительные форматы типа avif и webp Итак мы рассмотрели как на уровне HTML разметки для элемента IMG подгружать картинку в зависимости от Медиа запроса в атрибуте медиа а также мы чере аут Type дополнительно сообщать браузеру об альтернативных более современных форматах изображений А что делать если наше изображение было бы фоновым то есть задавалась бы в CSS свойстве background Image как быть с Медиа запросами всё очевидно использую директиву Медиа в ГРАУ можно указать ссылку на другой файл с картинкой Ну а как быть с альтернативными форматами изображений для решения этой задачи в CSS есть функция IM Set синтаксис у не Следующий меняется она в значении свойства background или background Image Image defis Set в круглых скобках через запятую указываются отдельные правила для каждого из изображений правило состоит из двух частей привычный URL с путём до файло в круглых скобках затем специальная конструкция Type с круглыми скобками где указывается формат как в теге Source Image SL avive для aviv формата Image slbp для webp и imagejpeg для запись внутри typ обязательно оборачивается в кавычки Обратите внимание на запятые в CSS такой же вольности как в HTML атрибутах не допускается поэтому запятые здесь нужно ставить строго только между группами правил но в конце запятая не нужна если её поставить то всё это CSS правило не примени Ну и насчёт красного подчёркивания у Type так как это довольно новая CSS функция моя IDE на неё косо смотрит иду что может её не распознать но современные браузеры этот синтаксис Отлично понимают поэтому можно быть уверенными что никаких проблем у нас не будет Итак перейдём в браузер и смотрим вкладку Network видим как браузер подгрузило наиболее оптимальный формат файла avif Если бы мой браузер не поддерживал этот формат он попытался бы загрузить файл с картинкой формата webp Но если бы браузер и webp не мог опознать то подгрузило бы самае обычная JPEG картинка то есть браузер последовательно прочитает содержимое CSS функции imageset и загрузит первый наиболее подходящий ему формат изображения тема продвинутой работы с изображениями была бы неполной если не упомянуть об необходимой в большинстве случаев минификация файлов изображений Каким бы ни был формат у картинки JPEG VP или же avive её наверняка можно сжать ещё больше при том практически не потеряв в качестве в данном случае файлы с картинкой в различных форматах теряют в весе от 50 до 70% но нередки случаи когда изображения сжимаются буквально на порядке например из 1 Мб в 100 КБ всю эту оптимизацию не стоит недооценивать ведь тяжеловесные картинки могут очень сильно замедлять скорость загрузки страницы стоит отметить что как и с громоздким синтаксисом src Set пикча и Source все эти действия можно автоматизировать сейчас я лишь для демонстрации использую онлайн мифика squash App но на реальном проекте Я бы использовал сборщик проектов и настроил бы там плагин для минификация всех файлов картинок которые бы всю чёрную работу делал за меня далее рассмотрим возможность предзагрузка кнопка к странице подключен такой скрипт при клике на кнопку в дом дерева вставляется элемент MG ссылающихся на картинку браузер начнёт загрузку этого файла только когда этот код работает то есть когда мы Клик на кнопку мы можем в этом убедиться если в Death Tools откроем уже знакомую нам вкладку Network Перезагрузи страницу и увидим как список файлов во вкладке Network пока пустой жмём на кнопку и видим как файл с картинкой загрузился А если бы у нас была медленная скорость интернета допустим Давайте вообще 2G Перезагрузи страницу подождём несколько секунд и вот теперь при клике на кнопку мы видим как картинка подгружается постепенно иногда нам может понадобиться подгрузить картинку при определённых действиях мгновенно Для этого нам нужно предзагрузка Link который располагается внутри Head этому элементу нужно заполнить атрибут rell как прид S как Image и указать в атрибуте href ссылку на файл с картинкой которую будем заранее подгружать этот же путь у нас указан в атрибуте src у добавляемого через JS элемента IMG теперь перезагружаем страницу и по вкладке Network видим как загрузка файла Cat JPEG уже началась хотя на кнопку показать изображение Мы ещё не нажимали дадим браузеру некоторое время на полную загрузку файла чтобы ускорить процесс я выберу Fast 3G и жму показать изображение сейчас мы видим как картинка отобразилась мгновенно так как она уже была загружена браузером заранее мало кто знает но через элемент Link Мы также можем загружать файлы картинок в зависимости от условий для этого нам нужно вместо атрибута href использовать атрибут Image src Set в нём мы можем как и в атрибуте src Set для emg указать набор изображений и дескриптор коэффициента плотности пикселей 1X 2x 3X и так далее И если у добавляемого в дальнейшем на страницу изображения указан атрибут src Set с аналогичным значением то браузеру будет уже известно Какой из пред загруженных файлов в картинке ему стоит использовать Давайте в de Tools включим эмуляции мобильного устройства допустим iPhone 14 Pro Max Перезагрузи страницу и увидим как браузер подгружает изображение Cat 3X то есть картинку для экранов под плотность пикселей 3X Ну а при нажатии на кнопку показать изображение соответствующая картинка мгновенно отобразится Ну а если же нам необходимо подгружать изображение в зависимости от Медиа запроса это можно лег вать с помощью дополнительного атрибута Media для элемента Link таким образом нужно сделать отдельный элемент Link под каждое изображение в данном случае под мобильное устройство и под десктоп важный нюанс атрибут Медиа нужно указывать каждому подобному элементу Лин так как браузер при чтении разметки никак эти Лин не группирует то есть если в пикче мы можем указать единственный элемент Source с Медиа запросом mawi 500 пикселей под мобилки а затем просто указать элемент emg с вариантом под десктоп то для второго Link который предзагрузка и соответствующего Медиа запроса Ну и Давайте в de Tools во вкладке Network посмотрим что предзагрузка изображение и картинка мгновенно появляется Если же в эмуляторе выставить допустим iPhone 14 Pro Max перезагружаем страницу видим как загружается Cat Mobile Ну и при клике на показать изображение мгновенно отображается соответствующая предзагрузка последнее что нужно сказать про Tag Link через него нельзя предзагрузка avif или VP то есть мы не можем предоставить браузеру выбор у нас нет пока такой функциональности как у связки из пикча и элементов Source с атрибута Type о котором мы говорили сегодня чуть ранее напоследок сегодня кратко рассмотрим работу с двумя тегами для изображений га и fig Caption элемент fig объединяет внутри себя два обязательных элемента как минимум один IMG и строго один fig Caption притом вместо простого emg вполне валидно использовать рассмотренный нами ранее pict с Source и emg внутри Итак если по макету рядом с картинкой есть подпись то в разметке всю эту связку из картинки и подписи будет правильнее реализовать через фга и fig Caption очень часто подобная схема применяется в технических статьях для картинок с диаграммами схемами чертежами то есть иллюстраций к которым явно требуется как минимум краткая текстовое пояснение Вот за это текстовое пояснение как раз и отвечает элемент fig Caption ещё важно отметить разницу fig Caption и атрибута Alt у них совершенно разное назначение во-первых Alt нужен в основном для ных технологий таких как Screen Reader чтобы зачитать описание картинки незрячему пользователю обычный пользователь может увидеть текст из Alt только если по каким-то причинам при загрузке страницы и картинки в частности отрубился интернет а вот F Caption отображается на странице всегда то есть его содержимое видно для всех пользователей содержимое Alt должно быть максимально функциональным оно кратко и ёмко должно описывать то что изображено на картинке а вот носит сугубо редакционный или иллюстративный характер если простыми словами в Alt мы описываем фактами то что видим А в F Caption может быть совершенно любой текст который является как бы припиской к картинке или же к группе картинок вот о последнем чуть подробнее элемент фига может быть использован для группировки нескольких изображений нескольких элементов emg или к притом в фига допускается использовать другие структурные теги например div подпись F Caption в таком случае должна описывать всю группу изображений целиком изображение довольно важная и весомая часть любого сайта грамотная работа с этим видом контента и оптимизации его загрузки может существенно повлиять на UX пользователя и в целом на метрики важной бизнесу Используйте с умом все рассмотренные в этом гайде теги и атрибуты а также современные форматы изображений чтобы ваши приложения были более качественными Если вы узнали что-то но буду рад вашей подписке и лайку До встречи в следующем видео