Сегодня мы поговорим об изображениях. В HTML5 существует множество тегов,
и большинство из них говорят сами за себя. Но именно тег изображения
необходимо тщательно изучить и убедиться, что его использование
максимально обосновано. Вы уже знакомы с целым набором тегов. Но именно в контексте
изображений необходимо понять предназначение различных атрибутов. Есть много разных типов файлов, которые поддерживаются HTML. Наиболее распространенные: JPEG, GIF и PNG.
Вам они будут встречаться часто. Есть также SVG и BMP. Это дополнительные форматы. Самое главное, что
независимо от используемого типа файла необходимо указывать расширения файлов. Это .jpg, .gif, .png. Стоит еще учесть, что каждое
изображение на вашей странице посетителю необходимо загрузить
перед просмотром, поэтому нужно принять во внимание размер. Если вы предполагаете, что большинство
людей будет просматривать страницу с мобильного телефона, стоит подумать об уменьшении размера файлов,
потому что каждое изображение отправляет HTTP-запрос для загрузки
в браузер. Когда мы говорим о размере изображения,
зачастую люди думают только о том, насколько большими они будут
выглядеть на экране. Но в информатике мы скорее
подразумеваем размер в пикселях. По умолчанию браузер откроет изображение в том же размере,
в котором оно было сохранено. Очень редко происходит так,
что этот размер сразу подходит. Вам, наверное, встречались сайты,
на которых были очень маленькие картинки,
и их нельзя было сделать больше. Или, возможно, и что меня еще больше раздражает,
изображение занимало весь экран, и его нужно было прокручивать,
чтобы увидеть целиком. Я покажу вам два быстрых решения
для изменения размера изображения. Во-первых, можно изменить сам файл,
а, во-вторых, можно использовать атрибуты ширины и высоты в теге изображения. Если вы воспользуетесь редактором,
чтобы изменить файл, стоит учесть, что эти изменения необратимы. Это работает только для локальных файлов, т.е. можно изменить только те картинки,
которые загружены на компьютер. Если вы хотите взять изображение,
которое нашли где-то в Интернете, и ссылаетесь на него,
вы не можете необратимо изменить размер. Если вы используете Mac, вы можете изменить размер с помощью
предустановленной программы Preview. В Windows также есть
аналогичная программа — Paint. Можно изменить размер изображений
в любой из этих программ. Однако от себя добавлю,
что не советовала бы эти инструменты, если вам нужна
разнообразная растровая графика. Чаще всего мы все же используем атрибуты. Я часто говорю о том, и не только я, что важно
разделять оформление и содержимое. Я настоятельно рекомендую
не использовать атрибуты оформления при написании кода. Однако тег img
, как правило, является исключением, потому что он включает
атрибуты ширины и высоты. Давайте рассмотрим процесс изменения, а затем я покажу
вам изображение на сайте. Первый вариант — просто использовать
размер изображения по умолчанию. У меня есть тег img и
два обязательных атрибута: src — источник картинки
и альтернативный текст alt. Следующий вариант —
задать ширину в пикселях. В этом случае я добавила атрибут width
и жестко закодировала его значение — так называется процесс, когда вы
определяете постоянный размер изображения. И я жестко закодировала его значение как 500 пикселей. Вы могли заметить, что я установила только
ширину, но не высоту. Это нормально. Браузер автоматически определит,
как настроить высоту, чтобы она была пропорциональна ширине. Следующий вариант —
использовать и width (ширину), и height (высоту). Это нужно для того,
чтобы изображение поместилось в точно обозначенную область. Так легче задавать размер,
но не всегда изображение выглядит так, как нужно,
и мы через секунду убедимся в этом. Последний вариант, наверное,
самый лучший, — использовать проценты. В этом случае, как можно
заметить, ширина width равна 50%. Благодаря этому изображение
будет уменьшено на 50% от предполагаемого размера. Когда мы углубимся в программирование и CSS,
вы поймете, что 50% от предполагаемого размера — это не обязательно
процент от исходного размера изображения. Значение зависит от того, находится ли
изображение в контейнере. Итак, мы прошлись по всем вариантам: по умолчанию, ширина, ширина и высота и процент. Давайте посмотрим, как это выглядит. Здесь вы видите четыре разных варианта отображения картинки. В самом верху у меня размер по умолчанию. Это изначальный размер картинки. Ниже представлена картинка, ширину которой я жестко закодировала. Я установила ширину равной 500 пикселей. Мой дом по-прежнему выглядит красивым,
все пропорционально. Третий вариант — перекошенное изображение. Здесь я жестко закодировала высоту и ширину, не задумываясь о том,
как это будет выглядеть в плане пропорций. Из-за этого изображение получилось сжатым и выглядит не очень. Последнее изображение —
это пропорционально заданный размер, можно увидеть, что оно занимает
где-то половину окна браузера. Обратите внимание, что происходит,
когда я меняю размер окна. Вы видите, что первые три
изображения не меняются в размере, а нижнее увеличивается и уменьшается. То же самое произойдет, если я уменьшу окно
и перезагружу страницу. Тут стоит задуматься о том,
как вы хотите представить страницу, когда люди будут просматривать ее
на большом экране или на экране мобильника. Это стоит принять во внимание. Последнее, к чему я хочу привлечь ваше внимание,
и мы об этом через секунду поговорим, — это маленькое изображение,
которое, к сожалению, не так просто разглядеть,
и я особо не могу его увеличить. Я хочу рассказать вам о том,
как добавлять изображения перед title. Если вы хотите добавить
иконку к названию страницы, нужно использовать немного другой подход. Этот код необходимо вставить в раздел head, а не в body. Для этого нужно открыть файл и вставить ссылку, указав,
что тип элемента — иконка. Мы используем изображение в формате PNG. Затем нужно вставить
ссылку на само изображение. Добавлю, что в качестве иконок
нельзя использовать JPEG или GIF. Нужно либо специальное изображение,
либо файл с расширением PNG. Давайте вернемся к обсуждению
альтернативного текста — атрибута, который стоит
добавлять ко всем изображениям. Какую роль он выполняет, почему он нужен? Этот атрибут предоставляет текстовую
альтернативу нетекстовому содержимому. Таким образом, каждый раз,
когда вы используете изображение, нужно удостовериться, что те, кто не видит
изображение, все равно поймут, что за ним скрывается. Так изображение смогут
прочитать устройства чтения экрана. Иногда текст отображается вместо изображения.
Если файл перестает работать, все равно будет отображаться надпись,
описывающая картинку. Кроме того, альтернативный текст
также используется поисковыми системами. Так, если вы добавите правильный
альтернативный текст на страницу, он поможет поисковым системам
определить ее содержимое. Как же правильно написать
альтернативный текст? Следует учитывать четыре момента. Он должен быть максимально точным. Он должен быть лаконичным. Он не должен быть избыточным. И не стоит включать выражения
«изображение чего-то» или «рисунок чего-то». Первый момент, точность, говорит сам за себя. Стоит указывать только то,
что определяет данное изображение. Лаконичность подразумевает краткость текста. Это должно быть краткое
описание изображения. Под избыточностью мы имеем в виду присутствие текста,
который уже содержится на странице. Если под изображением присутствует абзац, в котором вы его подробно описываете,
не вставляйте тот же текст в тег alt. И последний момент про выражения больше относится к лаконичности. Иногда допустимо не указывать
альтернативный текст. Например, для изображений, которые нужны
для оформления, логотипы, все в этом духе, можно просто вставить alt = "". Но важно всегда указывать атрибут alt. Проблема заключается в том,
что так людям трудно понять, продумали ли вы доступность сайта. Они не знают, отсутствует ли alt,
потому что он неинформативен или потому что вы просто забыли про него. Подведем итоги того,
что мы узнали об изображениях. Первое: важно обращать
внимание на расширение файла. Оно должно совпадать с форматом файла. Имя файла должно быть коротким и информативным,
чтобы не допустить опечаток. Наконец, путь к файлу — эта длинная строка с указанием на источник,
например images/pictures/extension. Следует уделить особое внимание
правильности этого пути. Если вы выполните эти три пункта,
вам будет намного легче работать с изображениями. А пока давайте зададим высоту и ширину прямо в коде HTML. Хотя я часто говорю
о разграничении содержимого и оформления, при работе с изображениями
они, как правило, неотделимы друг от друга.