Изображения

Этот и следующий уроки затронут одну из важнейших тем в HTML. Интернет уже давно не состоит только из заголовков, абзацев, ссылок и другого текстового контента. Теперь веб страницы включают в себя много различной графики — изображения, видео, анимации. Многие страницы пошли ещё дальше и приобрели вид полноценных 3D приложений, поражающих пользователей своей визуализацией и проработанностью. Вероятно, это направление развития веба сохранится и в дальнейшем, так что процентное соотношение графики будет ещё увеличиваться. В связи с этим особенную важность приобретает эта тема HTML и теги, которые к ней относятся.

Конечно, знания только лишь тегов HTML не достаточно для того, чтобы создать что-то действительно красивое, однако всё большое начинается с малого, и в нашем случае уверенное знание тегов это фундамент того шедевра, который вы сможете создать в дальнейшем.

<img>
— (с англ. image — изображение) тег, представляющий изображение на веб-странице. Это практически основа всей графики веба, хотя тег весьма простой. Минимальный синтаксис выглядит следующим образом:

                

                <img src="/images/banners/sping21.jpg"
     alt="New DKNY spring 2022 collection">

Поскольку картинки не являются интерактивными элементами, их можно вкладывать в ссылки и кнопки. В таком случае клик по любому месту картинки будет считаться кликом по ссылке\кнопке:

                

                <a href="/collection/new.html">
    <img src="/images/banners/sping21.jpg"
     alt="New DKNY spring 2022 collection">
</a>

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

На скриншоте логотип добавлен на страницу не при помощи <img>, а напрямую в формате SVG, однако для нас это ничего не меняет. Тег <svg> вложен в ссылку, ведущую на главную страницу, и на его месте легко может быть тег <img>.

Кроме глобальных атрибутов, тег принимает несколько собственных и два обязательных — src и alt. src указывает непосредственно на графический файл изображения, который браузеру нужно загрузить и вставить на веб страницу. Стоит сейчас же отметить, что HTML не определяет стандартов для формата файлов изображений, это делают сами браузеры. Так, мы в дальнейшем в одном из уроков будем рассматривать ситуацию, при которой браузер может понимать один формат изображения и не понимать другой. Поскольку мы не можем заставить пользователей перейти на нужный нам браузер, мы должны учитывать возможности и адаптировать свой сайт для всех браузеров.

Атрибут alt это альтернативный текст, он будет отображён на предполагаемом месте изображения в случае, если по какой-либо причине (неправильный src путь к файлу, потеря соединения с интернетом и пр.) его не удастся загрузить. Хотя этот атрибут является обязательным, вы можете не указывать значение для него, оставив кавычки пустыми alt="" . Всё же данный атрибут очень важен, поскольку, во-первых, он считывается скринридерами, чтобы слабовидящие пользователи знали, что означает изображение, а во-вторых, этот текст индексируется поисковыми роботами. По этим причинам я настоятельно советую вам всегда указывать значение для атрибута alt.

Форматов изображений довольно много, однако в вебе они используются не все. Мы расскажем коротко о каждом из них, а подробнее речь о форматах изображений пойдёт в последующих уроках.

JPEG
— это самый популярный формат изображений, если нужно передать наилучшее качество. Все фотографии в высоком разрешении будут в JPEG-формате. Он поддерживается абсолютно всеми браузерами. Однако размер файлов даже после сжатия довольно большой. Также формат НЕ поддерживает прозрачность фона.

PNG
— предпочтителен перед JPEG, если нужно лучшее сжатие с сохранением оптимального качества, или поддержка прозрачности. Поддерживается всеми браузерами.

APNG
— анимированный PNG. Имеет довольно широкую, но всё ещё недостаточную для повсеместного применения поддержку браузерами (92%). Если вам нужно анимированное изображение, это один из подходящих форматов.

WEBP
— формат, разработанный компанией Google для браузеров на движке Chromium. Имеет сжатие лучше, чем PNG и JPEG, поддержку анимации и прозрачности, однако поддерживается не всеми браузерами (93%).

SVG
— (с англ. scalable vector graphic — масштабируемая векторная графика) формат векторных изображений. Если вы не знаете, чем отличается растровая графика от векторной, прочитайте вот эту небольшую статью. Векторная графика в вебе используется для создания элементов пользовательского интерфейса — иконок, значков, диаграмм, повторяющихся фонов, простых недетализированных изображений и пр. Обладает очень маленьким весом и бесконечной масштабируемостью без потери качества, а также поддерживается почти всеми браузерами (96%). Однако в векторе нельзя передать фотографию или другое изображение, содержащее большое количество цветов.

GIF
— когда-то только он позволял анимировать изображения, вследствие этого и стал популярным и известным. Хотя уже давно появились более легковесные альтернативы в виде WebP, APNG и AVIF, старые добрые гифки ещё живее всех живых. В 2022 году компания Авито всё ещё использовала gif-формат в качестве анимированного логотипа на своём сайте.

AVIF
— альтернатива APNG, также с высоким сжатием и поддержкой прозрачности, анимаций, однако с гораздо меньшей поддержкой браузерами (70%).

JPEG2000
— формат для фотографий, более современный и легковесный, нежели его предшественник JPEG. Однако этот формат также не поддерживает прозрачность и, что более важно, понимается только браузерами Safari (16%).

Такое количество форматов наверняка вас запутало, однако хороший фронтенд разработчик должен обязательно знать о существовании всех этих форматов. Какие же применяются на практике? JPEG, PNG, SVG вы можете применять сколько угодно без ограничений,
они поддерживаются везде и удовлетворят почти все запросы. При оптимизации сайта используйте дополнительные легковесные копии изображений в формате WEBP. Если вам необходимы анимированные изображения, то выбирайте WEBP или APNG. Если же с ними разобраться
не получится, в крайнем случае подойдёт и GIF. AVIF и JPEG2000 используются гораздо реже.

Итак, мы рассмотрели простой пример кода тега <img>. Довольно часто на ранних этапах вашего обучения картинки будут по разным причинам «ломаться». В случае, если что-то пойдёт не так, вы для кода:

                

                <img src="/images/banners/sping21.jpg"
     alt="New DKNY spring 2022 collection">

Увидите следующее:

Вместо изображения мы видим маленькую иконку и текст из атрибута alt. Именно так отображается тег, когда браузеру не удаётся загрузить исходное изображение. Произойти это может по нескольким причинам:

• атрибут src не указан, пустой (""), либо указан неверный адрес (файл изображения отсутствует по указанному адресу)
• файл изображения повреждён, либо повреждены метаданные файла
• формат указанного файла не поддерживается браузером пользователя

Запомните один совет: если картинка «поломалась», проверьте в первую очередь правильность пути, указанного в src. Это наиболее частая ошибка, которую совершают новички. Если вы ошиблись именно в этом, браузер вам подскажет: в панели разработчика (открывается сочетанием клавиш Ctrl+Shift+I) во вкладке Console вы увидите сообщение об ошибке, указывающее, что файл не найден:

В случае, если путь указан правильно, ошибки не будет, а это означает, что причина в самом файле изображения — либо он повреждён, либо его формат не подходит нашему браузеру.

Другие атрибуты тега:

crossorigin
— указывает, можем ли мы загружать изображение с другого домена. Речь идёт о политике безопасности CORS, о которой мы уже немного начинали говорить. Подробно о ней пойдёт речь в следующих уроках, однако касательно тега <img> мы можем сказать следующее: при отсутствии данного атрибута мы можем загрузить картинку с любого веб-сайта, который нам позволит это сделать. При указании атрибута с одним из двух возможных значений anonymous или use-credentials необходимо, чтобы запрашиваемый сервер имел соответствующие настройки, позволяющие нам запросить у него изображение. В случае, если такие настройки не будут установлены на сервере, мы получим ошибку при загрузке изображения и соответствующий текст ошибки. Пытаемся загрузить картинку с mail.ru, указав атрибут crossorigin. Без указанного значения данный атрибут сработает как crossorigin="anonymous":

                

                <img crossorigin src="https://resizer.mail.ru/p/9bc259d2-3c1e-543f-ab9b-b9a99c15cc18/AQAG_mTHFAJbAr27ZQny_Mb0FgVfD2x4rdiiuAeF-I7mox3p9lnLK2WpuVzeJGeSeGKxqk-Iw-ozZioMDS-hwYp0rbk.jpg"
     alt="New DKNY spring 2022 collection">

В результате выполнения кода мы увидим ошибку в консоли:

Она нам сообщает о том, что запрашиваемый сервер не обладает соответствующей настройкой, позволяющей нам запрашивать картинку. На второй строке будут отображаться последствия предыдущей ошибки: не удалось загрузить изображение и код ошибки — 403. Все ошибки запросов HTTP в интернете имеют свой код, и 403 код означает, что доступ к запрашиваемой странице\файлу ограничен.

На самом деле сервер нам разрешит загрузить эту картинку, если мы уберём в своём коде атрибут crossorigin совсем. Дело в том, что на сервере нет никаких ограничений для запросов к данному файлу. Однако там нет и специальных разрешений-настроек. Мы же, указывая crossorigin, сообщаем браузеру, что нам нужна картинка только с сервера, который имеет соответствующую настройку. Поэтому браузер только проверяет на сервере эту настройку и, не находя её там, прекращает запрос, возвращая нам ответ 403. Всё это может вас запутать, однако со временем всё это уложится в вашей голове.

decoding
— указывает браузеру, с каким приоритетом декодировать полученное изображение. Значения могут быть следующие:
sync — декодировать синхронно, т.е. в том порядке, в каком тег располагается в потоке документа
async — декодировать асинхронно, т.е. не препятствовать загрузке другого контента
auto — значение по умолчанию. Браузер сам определяет, как ему декодировать изображение.

loading
— позволяет нам отложить загрузку изображений, которые находятся ниже области просмотра. Если говорить простыми словами — те картинки, до которых пользователь ещё не прокрутил сайт, пока не будут загружаться. Это необходимо для ускорения работы сайта, ведь чем меньше нужно загружать картинок, тем быстрее можно загрузить весь остальной контент. Атрибут принимает два значения:
eager — значение по умолчанию, загружает изображение сразу же в любом случае
lazy — не загружает изображение до тех пор, пока пользователь не прокрутит сайт до него. Браузер сам определяет расстояние от изображения до окна просмотра, при котором нужно начать загружать изображение.

В примере ниже изображение будет загружено не сразу при открытии страницы. Загрузка начнётся позже, когда пользователь пролистает страницу до этого изображения. Это позволит браузеру быстрее загрузить те ресурсы (стили, шрифты, скрипты, другие изображения), которые нужны сразу.

                

                <img src="mountains.jpg" alt="Beautiful mountains" loading="lazy">

Есть один важный момент: данный атрибут обладает пока что не полной браузерной поддержкой (75%), однако вы можете смело его использовать, поскольку он, даже если браузер его не понимает, не поломает картинки и наш сайт. Он может только улучшить и ускорить наш сайт, либо не окажет никакого действия, если не будет распознан браузером.

srcset, sizes
— эти два атрибута связаны. В частности, sizes указывается только при наличии srcset. Разговор об этих атрибутах пойдёт в будущем в отдельном уроке про адаптивные изображения, а пока что вам достаточно знать лишь то, что они позволяют в теге подключать вместо одного файла, указанного в src, несколько различных файлов. Это может быть необходимо для улучшения скорости загрузки сайта: на мобильных мы будем загружать меньшие по размеру картинки, а на компьютерах большие.

usemap
— указывает на схему координат для изображения. Мы вернёся к этому атрибуту при рассмотрении тегов <map> и <area>.

width, height
— указывает высоту и ширину изображения в пикселях. Данные атрибуты не указываются по причине, о которой мы уже неоднократно говорили — разделение ответственности HTML и CSS. Указывайте ширину и высоту изображений, если это необходимо, при помощи CSS-свойств width и height.

Когда мы говорим о размерах <img>, есть несколько важных нюансов. Размеры тега по умолчанию будут такими, какими являются исходные файлы. Если мы укажем в src картинку размером 500 на 500 пикселей, то таких же размеров и получим тег <img>.

                

                <img src="mountains.jpg" alt="Beautiful mountains">

На скриншоте мы видим, что ширина и высота тега соответственно 706 и 272. Эти цифры появились не случайно, именно такие размеры имеет исходный файл изображения.

При этом все изображения на веб странице имеют два размера — исходный (intrinsic size) и размер отрисовки (rendered size). До тех пор, пока CSS свойства не влияют на тег <img>, изображение будет отображаться в исходном размере.

Если мы ему укажем при помощи CSS ширину, то изображение будет изменяться пропорционально.

Мы указали ширину для тега в 400px и в результате получили изображение размером 400 на 154. Теперь это размер отрисовки. В подсказке в панели разработчика мы видим уже два размера, исходный и текущий. Если вы возьмёте калькулятор и разделите 706 на 272 (исходный размер), а потом 400 на 154 (размер отрисовки), то получите одинаковое число 2,59. Это означает, что пропорции сторон изображения сохранились.

Есть один важный момент, касающийся растровых изображений: если вы указываете размеры бОльшие или меньшие, чем имеет файл, то новые пиксели, которых не было прежде, заполняются соседними цветами; в случае уменьшения изображения два соседних пикселя соединяются в средний цвет. Если вы таким образом немного увеличиваете\уменьшаете изображение, то эта «пикселизация» окажется не слишком заметной, однако если изменение размера будет существенным, вы получите подобный результат:

На скриншоте мы взяли изображение с исходным размером 128 на 128 пикселей и увеличили его до 300. Налицо здесь пикселизация и потеря качества. Если вы уменьшите изображение, то результат будет схожий, пусть и не такой очевидный. Из этого опыта делаем следующий вывод: вы не должны значительно изменять размер растрового изображения, загружаемого в <img>.
В 2022 году веб уже выглядит очень современно и красиво. Хотя даже на сайтах мировых компаний порой находятся ошибки и всякие огрехи, в основном всё в интернете стремится к красоте и совершенству. Я хочу, чтобы вы тоже стремились к этому и стремились к наилучшему качеству изображений.

Мы рассмотрели пример с изменением ширины тега <img> посредством CSS. Если вы таким же образом измените его высоту, то произойдёт пропорциональное изменение ширины, это вполне ожидаемо. Но есть ещё один случай, когда мы намеренно указываем определённую ширину и высоту, не соблюдая исходные пропорции.

В подобном случае изображение будет растягиваться по тому размеру, который мы укажем для тега. Указав ширину, мы сперва уменьшили изображение пропорционально, а затем, указав высоту, мы его сжали. Если вы присмотритесь, конечный результат и выглядит слегка сжатым по вертикали.

В CSS есть специальное свойство для работы с тегом <img>, которое позволяет картинке не растягиваться при изменении размера тегов, однако до этого мы дойдём в уроках по CSS. Пока что запомните, что сжимать и растягивать изображения можно до тех пор, пока это не влияет на внешний вид сайта.

Мы описали здесь не все атрибуты тега <img>, а только те, которые действительно применяются и которые вам нужны на данном этапе. Об srcset и sizes мы поговорим позже, а некоторые прочие атрибуты официально запрещены или являются экспериментальными.

<picture>,<source> и <img>
— (с англ. picture — изображение, картинка, source — источник данных) эти три тега неразлучны, всегда вместе с <picture> вы будете применять <source> и <img>. Однако начнём по порядку. <picture> это своеобразный контейнер, позволяющий нам подключить в качестве исходного файла для <img> несколько разных файлов. Мы уже упоминали о подобном в связи с атрибутами srcset и sizes, однако возможности <picture> значительно шире. Если srcset и sizes выбирают только среди подходящего размера файла, <picture> может выбирать также формат файла. То есть мы можем подключить изображение формата WebP, но при этом подстраховаться и подключить также обычный jpeg.

                

                <picture>
    <source srcset="mountains.webp" type=image/webp>
    <img src="mountains.jpg" alt="Beautiful mountains">
</picture>

В результате в браузере Chrome, да и в большинстве остальных мы увидим следующий результат: в коде html в документе нет никаких изменений (так и должно быть), однако если присмотримся непосредственно к отображаемому изображению (rendered image), то увидим, что в качестве исходника (current source) выбран именно webp файл. Итак, рассмотрим пример по порядку:

                

                <picture>
    <source srcset="mountains.webp" type=image/webp>
    <img src="mountains.jpg" alt="Beautiful mountains">
</picture>

Сам <picture> является невидимым контейнером, при помощи которого мы можем связать несколько различных исходников и тег <img>. <picture> не обладает визуальным форматированием, т.е. он не имеет ширины, высоты и пр., к нему нельзя применить CSS свойства. Он просто соединяет воедино то, что нам нужно.

А то, что нам нужно, находится непосредственно в <source>. В качестве атрибута srcset здесь мы указываем пути к альтернативным файлам, а в качестве type — соответственно MIME-тип того файла, который мы предлагаем браузеру загрузить. В завершении мы указываем сам тег <img> и тот src для него, который нужно будет применить в случае, если <source> нам по какой-либо причине не подойдёт. Так, браузер посмотрит сначала на <source> и решит, подходит ли ему этот файл. Если подходит — то возьмёт его. Если нет — то возьмёт файл из <img>. Стоит тут же отметить, что <source> это не тег для отображения изображения, это всего лишь невидимый тег, позволяющий нам передать браузеру дополнительную информацию. Отрисовываться будет всё равно <img>, однако исходный файл для него может быть взят из <source>. Это означает, что если мы захотим присвоить изображению класс или какой-либо другой атрибут, мы должны указать его для <img>:

                

                <picture>
    <source srcset="mountains.webp" type=image/webp>
    <img src="mountains.jpg" alt="Beautiful mountains" loading="lazy" class="welcome-img">
</picture>

<source> может быть несколько. На самом деле их количество ничем, кроме здравого смысла, не ограничено. Браузер проверит все условия и выберет одно изображение:

                

                <picture>
    <source srcset="mountains.webp" type=image/webp>
    <source srcset="mountains.avif" type=image/avif>
    <source srcset="mountains.apng" type=image/apng>
    <img src="mountains.jpg" alt="Beautiful mountains" loading="lazy" class="welcome-img">
</picture>

В примере мы указываем сразу три дополнительных исходника для файла. Браузер будет проверять их по указанному порядку сверху вниз и выберет наиболее подходящий ему исходник. Если ни один из <source> ему не подойдёт, будет подключено изображение из src для <img>. Думаю, с этим всё понятно.

Пока что мы приводим пример работы <picture> только с типом файла, хотя уже говорили, что он умеет также выбирать файлы подходящего размера. Об этом позже в уроке про адаптивные изображения.

<figure> и <figcaption>
— (с англ. figure — чертёж, иллюстрация, figure caption — заголовок чертежа, иллюстрации) теги, используемые почти всегда вместе. <figure> является семантическим контейнером для пары изображение-подпись, а <figcaption> это контейнер этой подписи. Наиболее распространённый пример:

                

                <figure>
  <img
  src="mountains.jpg"
  alt="Beautiful mountains">
  <figcaption>Невероятно красивый альпийский пейзаж</figcaption>
</figure>

И результат его отображения:

Мы видим, что <figure> выступает общим контейнером для изображения и <figcaption>, а последний содержит в свою очередь текст-заголовок. Без дополнительных свойств CSS все эти теги не выглядят как-то особенно. Стоит подчеркнуть, что <figure> не является абстрактным контейнером наподобие <picture>, а является полноценным блоком, как например <div>. Соответственно для него можно указать ширину, высоту и тд.

На самом деле <figure> и <figcaption> нужны только для разнообразия семантики, и ни для чего более. Они легко могут быть заменены другими элементами:

                

                <div class="image-cont">
  <img
  src="mountains.jpg"
  alt="Beautiful mountains">
  <h4>Невероятно красивый альпийский пейзаж</h4>
</div>

Пара <figure> и <figcaption> может использоваться не только для связывания картинки с подписью. Вместо картинки может быть иная иллюстрация, диаграмма, блок кода, видео и пр. Мы не будем приводить здесь более примеров, все они есть в справочнике на странице тега.

<map> и <area>
— (с англ. map — карта, area — область, зона) эти теги также используются в связке с <img>. Они позволяют создать на изображении так называемую «карту ссылок» — чтобы мы могли кликать мышкой на определённую область изображения и переходить на какую-нибудь страницу (как обыкновенное поведение ссылки). Сразу стоит сказать, что эти теги появились очень давно в HTML3. В те годы их возможности действительно казались необычными и полезными. Однако широкого применения эти теги всё же не получили, а в настоящее время они вообще почти не используются. Дело в том, что по современным требованиям к визуализации сайтов данные теги обладают весьма скромными возможностями. Сейчас при необходимости создания подобных карт ссылок на изображении используются SVG-маски (о них позже).

Мы всё же рассмотрим применение этих тегов, ведь они ещё находятся в спецификации. Пример кода ниже вы можете скопировать в любой html документ, он будет работать одинаково, и даже подключать картинку отдельно вам не нужно (картинка взята с сайта школы).

                

                <map name="infographic">
    <area shape="poly" coords="290,80,340,80,340,130,290,130"
          href="https://en.wikipedia.org/wiki/Monte_Rosa"
          target="_blank" alt="Monte Rosa" />
    <area shape="poly" coords="420,20,470,20,470,70,420,70"
          href="https://en.wikipedia.org/wiki/Mont_Blanc"
          target="_blank" alt="Mont Blanc" />
</map>
<img
    usemap="#infographic"
  src="https://babyfrontent.ru/lessons/mountains.jpg"
  alt="Beautiful mountains">

В теге <map> мы создаём при помощи тега <area> координатную область (атрибут coords), которую связываем с соответствующей страницей, указанной в атрибуте href. По клику на эту область откроется страница в новой вкладке (поскольку есть атрибут target="_blank"). Сама карта <map> связана с изображением через атрибуты name и usemap. Результат выполнения кода:

Области, указанные в <area> при помощи атрибута coords, соответствуют выделенным квадратам. По клику на них мы попадём на соответствующие страницы, посвящённые отдельным горным вершинам. Это подтверждает изменение курсора мыши при наведении на соответствующую область.

Недостаток тегов <map> и <area> главным образом заключается в том, что на этом их возможности и заканчиваются. Если бы мы могли как-то визуально обозначить необходимые области <area>, это нам уже сильно помогло бы, однако такой возможности нет, CSS в этом вопросе бессилен. Это главная причина, по которой эти теги так и не получили распространение. Другой причиной является то, что при изменении размера изображения при помощи CSS координатная область, указанная в <area>, не масштабируется соответственно изображению:

Это предельно ограничивает наши возможности по использованию адаптивных изображений. В свою очередь SVG-маски, используемые сейчас для создания подобных областей на изображениях, лишены и первого, и второго недостатков. Они интерактивны, позволяют обрабатывать события наведения мыши на них, клики и т.д. Также они легко масштабируются соответственно изображению, легковесны, могут анимироваться и пр.

Мы рассмотрели простой пример применения тегов <map> и <area>. Вряд ли вам понадобится более подробная информация о них, но при желании вы можете найти её в справочнике.