Иллюстрации в статье

Растр и пиксел

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

Растр — мелкая сетка с ячейками одинакового размера, покрывающая всё изображение. Часть его в одной ячейке называется пиксел. Количество пикселов на единицу измерения, как правило это английские дюймы, называется разрешением. Всё что вы ищите в картинках Yandex, Google, Bing, Mail, всё, что иллюстрациями публикуется в соцсетях и в других местах скопления рисунков и фотографий в подавляющем большинстве — растровые (пиксельные) изображения.

Современные цифровые камеры могут создавать электронные изображения с высоким разрешением: свыше 4 000 пикселов по горизонтали и 3 000 — по вертикали. Хорошо это или плохо? Если мы собираемся смотреть или показывать полученный кадр на мониторе или печатать на фотобумаге, то для ответа на этот вопрос стоит снова посчитать. Нас больше всего интересует монитор.

Масштабирование изображений

Мониторы качества Full HD имеют разрешение 1 920×1 080 пикселов. На экране мы увидим только часть снимка, сделанного фотоаппаратом: по горизонтали чуть меньше половины из 4 000 пикселов, а по вертикали и того меньше. Чтобы в реальном размере разглядывать его целиком придётся пользоваться полосами прокрутки.

Счастливчики, обладающие мониторами 4K (3 840x2 160 пикселов) смогут увидеть почти всю картинку. Но всё же почти.

Если же хочется увидеть изображение целиком, то понадобится уменьшать его размер. Что значит уменьшать? Выкидывать лишние пикселы! Например, чтобы уменьшить изображение по ширине в два раза придётся удалить каждый второй пиксел. И сразу вопрос: кто будет удалять? Какая программа?

Проведём наглядный эксперимент. Для этого увеличим размер пикселов в 3 000 раз и посмотрим, как происходит процесс сжатия. На рисунке три фрагмента одного и того же изображения. Слева оригинал из двух цветов и чёткой чёрной границей толщиной в 1 пиксел между ними.

Если мы возьмём программу, которая не умеет редактировать изображения, а только показывать, то она «не задумываясь» удалит каждый второй пиксел. И если у чёрной линии пикселы по счёту окажутся чётными, то этот участок изображения будет выглядеть как на среднем фрагменте. Границы уже нет, только жёсткий переход одного цвета в другой.

Даже профессиональному графическому редактору придётся изощряться с выбором цвета пограничных пикселов, чтобы сохранить и их цвет, и не забыть, что граница между ними должна быть тёмной. Результат может оказаться похожим на фрагмент справа: граница стала нечёткой, размытой, цвет её уже не чёрный, а грязно-серый.

Теперь рассмотрим, что происходит с маленьким изображением, которое нужно увеличивать. Как поведут себя программы просмотра и редактирования. Слева оригинал — рисунок крыла стрекозы. В его левом нижнем углу выделен маленький кадр (прямоугольник), за которым и будем вести наблюдение.

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

Графические редакторы легко справляются с этой проблемой. Они не увеличивают размеры пикселов, а добавляют новые, выстраивая из них плавный переход от одного цвета к другому (фрагмент справа). Это действие называется антиалиасинг.

И при сжатии, и при расширении изображений с ними происходят изменения. Но растровые редакторы эти изменение делают менее заметными непрофессиональному взгляду.

При необходимости изменения размеров изображения перед публикацией нужно пользоваться графическим редактором.

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

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

Собираем клипарт

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

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

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

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

У вас уже готов макет шаблона страницы? Вы разметили его карандашом на бумаге, может быть блоками в документе Word, Write или в презентации с блоками для изображений и произвольным текстом? Вы уже знаете, где в макете будут расположены и как будут оформлены шапка и подвал? Где планируется меню, в шапке или в статье? Будут ли дополнительные панели одна или две, с одной стороны, с разных или внизу-вверху?

Если на большинство вопросов выше вы ответили «Да», то уже примерно или даже точно знаете, какой размер будет у иллюстраций в тексте. Начинайте рисовать, сканировать, фотографировать, подбирать тематические изображения из собственного клипарта. Ищите и скачивайте их в интернете. Причём для этого выбирать файлы сверхбольших размеров совершенно бессмысленно. Чем значительней изменение масштаба, тем больше артефактов — дефектов, искажений.

Вы уже знакомы со стилевыми правилами оформления на примере форматирования абзацев. То же касается и других фрагментов страницы, в частности изображений.

Все элементы веб-страницы, играющие одинаковую роль, должны иметь одинаковое оформление.

Нужно создать правило CSS с селектором класса и добавить в него свойства с запланированными шириной, высотой, оформлением границ, отступов, полей и т. п. В дальнейшем каждому элементу IMG достаточно добавить атрибут class=... с именем класса правила. Его внешний вид преобразится и станет похожим, как и у других таких же.

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

Оптимизация изображений

Первый шаг собрать коллекцию иллюстраций уже выполнен. Второй шаг перед их публикацией оптимизация. Не у всех файлов с заготовленными иллюстрациями нужные размеры. Если вы помните из математики, как вычисляется площадь прямоугольника, то сообразите: уменьшение длинны сторон изображения в 2 раза уменьшит его площадь (количество пикселов) в 4 раза. А вместе с этим уменьшится и размер файла.

Вы скачали файл из интернета, изображение в нём, кроме размеров, может иметь высокое разрешение, если готовилось для печати, то от 300px на дюйм и выше. Уменьшение размера разрешения до вывода на стандартный монитор 96px существенно уменьшит размер файла.

Фотография, сделанная цифровым фотоаппаратом, содержит и лишнюю для публикации информацию — данные EXIF: название аппарата, его режимы во время съёмки, дату, время и т. д. Всё это тоже лишние данные и при их удалении размер файла становится несколько меньше.

Зачем нужно редактировать все эти параметры? Для уменьшения размера файла. Чем меньше его размер, тем быстрее читатель увидит страницу целиком.

У большинства людей есть смартфоны или айфоны, но не у всех их стоимость 30 – 50 – 100 тысяч рублей. Многие покупают бюджетные — ценой 10 – 20 тысяч. В них, как правило, процессор слабее и оперативной памяти меньше. Самые дешёвые ноутбуки с ценой в пределах 20 – 25 тысяч рублей тоже не блещут скоростью с объёмом памяти 2ГБ и встроенной видеокартой. Это всё продаётся и покупатели этих товаров тоже хотят выходить в интернет.

Вы когда-нибудь отдыхали на Бали? Где всё здорово, но WiFi платный. Причём цена в долларах! А вас не отправляли на лето к бабушке, где ретранслятор сотовой связи находится за холмом? Здесь и айфон спасует.

Объём загружаемых данных и скорость загрузки страниц напрямую зависит от размера подключённых файлов. Размер файлов с текстовыми документами, можете убедиться сами, в килобайтах небольшой. Изображения, а тем более видео и аудио ролики, по сравнению с ними — гиганты.

В сети очень часто встречаются сайты с одинаковой темой, с одинаковым (скопированным из одного источника) материалом, с одинаковыми иллюстрациями и т. п. Это называется информационный шум ? и у читателя есть выбор. Многие за компьютером не ждут загрузки страницы более 3 секунд, закрывают вкладку и идут на другой сайт. При чтении со смартфона это время не на много дольше — 5 секунд.

Сотрудники Amazon подсчитали, что если скорость загрузки страницы увеличить на 1 секунду, компания потеряет более полутора миллиардов долларов в год.

Оптимизировать изображения обязательно нужно, если вы заботитесь о своих читателях и заинтересованы в увеличении посещений сайта. Но пока заниматься оптимизацией «для дома, для семьи» не обязательно профессионально. Можно использовать бесплатную программу для Windows Paint.NET. Она легко позволит убрать лишнее, изменить размер и сжать изображение, может быть и не идеально, но с сохранением качества и хорошим результатом для простого сайта.

Не всегда важно получить всю картинку. Часто из неё достаточно вырезать фрагмент, который точнее совпадает со смыслом контента.

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

В файлах типов GIF, JPG, PNG используется сжатие изображений, что обеспечивается реструктурированием пикселов. В зависимости от рисунка или фотографии необходимо подобрать тип файла для сохранения и выбрать для него глубину цвета (количество сохраняемых оттенков). Регулировать этот параметр можно наблюдая за результатом в этом же окне. Для многих рисунков восьми бит бывает достаточно, а для фотографий — двадцати четырёх.

Как вы заметили, только при изменении размеров рисунка размер файла уменьшился в 4 раза до 25% от начального. А сохранение в сжатом формате PNG размер файла уменьшился до 2% от исходного, почти в 50 раз. Причём без существенной (заметной на глаз) потери качества.

Если вы хотите профессиональной оптимизации файлов для интернета, то используйте профессиональные графические редакторы или ищите в интернете онлайн оптимизаторы графики.

Иллюстрация в тексте

Довольно часто в текст добавляют изображения. Для чего? Конечно же, не только для того, чтобы было красиво. Хотя и для этого тоже. Исследования в Twitter показали, что твиты (сообщение в Твиттере) с изображениями пользуются большей популярностью, чем простые текстовые.

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

Рисунки передают не текстовые фразы, а изображения, которые напрямую действуют на наши эмоции. Поэтому их содержание намного информативнее обычного текста. На дорожных знаках не пишут буквами: «Сюда ехать нельзя!», рисуют красный круг с белым прямоугольником в центре. И водителю в любой стране с любым языком общения сразу всё становится ясно.

Иллюстрации в статье повышают индекс её цитирования у поисковых роботов. А подобранные правильно и качественно повышает индекс цитирования у читателей. Веб-типографика — та область, где визуализация и текст неразрывно связаны друг с другом.

Иллюстрациям неплохо задавать подписи или комментарии. Когда вы разглядываете свою фотографию, где вы рядом с фонтаном, у вас всплывают воспоминания о событиях того дня, а может и целого лета.

Случайный посетитель, увидевший на вашей странице эту фотографию с незнакомой девушкой в странной застывшей позе, с растрёпанными и влажными от брызг волосами, не испытывает тех же чувств, что и вы. Для чего ему смотреть, за что ставить «лайки», что писать в комментариях?

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

Комментарий может любую иллюстрацию привязать к контексту статьи. И сразу отпадёт необходимость в атрибуте title=..., который ни на планшете, ни на смартфоне всё равно не отображается.

Элемент [FIGURE]

С добавлением комментариев к иллюстрации появляется опасность его потери, если он просто записан в абзаце. К редактированию статьи прибегают довольно часто. Перед публикацией возможно понадобится добавить или удалить какой-то абзац, изменить текст другого, переместить изображение на пару абзацев вверх или вниз… Подобное иногда приходится делать уже после публикации — появились новые сведения, незаметно в текст «вкралась» ошибка и т. п. Подпись под иллюстрацией случайно может оторваться от неё.

Для предотвращения потери подписи, но и не только, в HTML 5 имеется элемент FIGURE. Кроме IMG в нём может находиться и FIGCAPTION от английского слова caption — подпись, титр.

Сам элемент FIGCAPTION подпись в коде можно располагать и над, и под IMG, а на экране, используя свойства CSS, подпись можно перемещать куда угодно в пределах блока FIGURE. У примера выше FIGCAPTION в коде под IMG, а подпись на экране сбоку. Взгляните на образец кода.

····FIGURE class=...
IMG src=./img/maket/figure_9.png alt=Корни квадратного уравнения
······FIGCAPTION
Формула для вычисленияBR
корней квадратного уравнения.
······/FIGCAPTIONBR class=cls
····/FIGURE

Код для публикации изображения, построенный таким образом, имеет четыре особенности управления оформлением.

1. Атрибут с именем класса добавляется только родительскому элементу, в котором находятся и IMG, и FIGCAPTION. Вложенным элементам совершенно не обязательно задавать атрибуты класса и идентификатора. Правила CSS им можно назначить через селектор родительского класса с добавлением контекстных селекторов.
2. В FIGURE может быть сразу несколько изображений, собранных по какому-то признаку. Или одно, но с несколькими абзацами подробных комментариев в FIGCAPTION.
3. FIGURE можно использовать для оформления группы изображение + подпись: задавать им общую рамку, тень или фон. Весь блок смещать либо влево, либо вправо или вытягивать во всю ширину между абзацами контента, не изменяя размера изображения.
4. И самое важное, что при перемещении блока FIGURE подпись не оторвётся от изображения и оформление останется неизменным.

В FIGCAPTION удобно назначать порядковые номера фрагментам, на которые можно ссылаться в контенте. Это позволит располагать блоки FIGURE в любом удобном по оформлению месте страницы. Такие блоки можно использовать:

• с IMG для аннотаций к иллюстрациям, диаграммам, схемам, фотографиям;
• с VIDEO и AUDIO для мультимедиа;
• с PRE и CODE для примеров кода;
• с обычными BLOCKQUOTE для цитат стихов в эссе о поэте и т. п.

Иллюстрации на странице могут как привлечь внимание и обогатить содержание её контента, так и разрушить его, оттолкнув читателя. Для того, чтобы узнать подробные сведения с примерами о правильном и ошибочном использовании иллюстраций, прочтите статью «Изображения ». Заинтересовавшимся дизайном рекомендую побродить по этому сайту.

В разделе «Изображения в веб» позже будет ещё одна тема: фоновые изображения и CSS-спрайты. Но любопытные могут самостоятельно заглянуть в учебник «Web-конструирование», поискать материал в интернете, «поприставать» к руководителю или дождаться публикации темы.