§ 3. Графические эффекты на web-страницах

Определения и обозначения

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

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

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

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

Как это устроено

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

Формат выбирают, исходя из того, что именно изображено. В фотографии много плавных переходов между оттенками, поэтому JPEG позволяет эффективно сжать её и не создавать чрезмерно большой файл. Для схем и значков важны чёткие края, а иногда и прозрачность: такие свойства удобно сохранить в PNG. GIF подходит для простой графики и может показывать последовательность кадров, но выбор всё равно зависит от качества и размера результата.

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

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

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

Форматы графики для веб-страниц

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

Разбор задач

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

1. Определяем тип изображения: это фотография, а не схема с резкими линиями.
2. Выбираем JPEG, поскольку он подходит для фотографий и помогает уменьшить размер файла.
3. Сравниваем качество при разных настройках сжатия: слишком сильное сжатие может сделать изображение заметно хуже.

Ответ: подойдёт JPEG; степень сжатия выбирают так, чтобы файл не был лишне большим, а фотография сохраняла приемлемое качество.

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

1. Отмечаем требуемые свойства: линии должны оставаться чёткими, а фон — прозрачным.
2. Выбираем PNG, который подходит для графики с чёткими границами и поддерживает прозрачность.
3. Сохраняем файл отдельно и в разметке указываем путь к нему вместе с альтернативным описанием схемы.

Ответ: используем PNG и подключаем его к странице по пути к файлу, задав описание, которое передаёт смысл схемы.

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

1. Выбираем спокойный рисунок и проверяем, не сливаются ли с ним буквы; при необходимости меняем фон или цвет текста.
2. Оцениваем, подходит ли повторение рисунка для этой области: узор можно повторять, а случайное многократное повторение фотографии обычно мешает восприятию.
3. Оставляем анимацию только для полезного акцента и проверяем, что её размер не замедляет загрузку страницы.

Ответ: фон должен сохранять контраст текста, анимация — быть уместной и ненавязчивой; размер файлов следует проверить на странице целиком.

Типичные ошибки

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

Фотография на фоне текста может выглядеть эффектно, но без проверки контраста буквы теряются на неоднородных участках. Часто забывают, что фон и текст воспринимаются одновременно. Проверь страницу при обычном просмотре: текст должен легко читаться на каждом участке; если это не так, измени фон или оформление текста.

Увеличение маленького изображения не добавляет ему деталей: оно может стать размытым или показать отдельные пиксели. Ошибку допускают, когда считают, что браузер сам восстановит исходное качество. Проверь исходный размер файла и сравни изображение до и после увеличения; если деталей не хватает, найди версию большего размера.

Добавлять анимацию только ради украшения или повторять её слишком часто — значит создавать лишнее движение. Так поступают, когда внимание к странице путают с удобством её чтения. Проверь себя: помогает ли анимация заметить важное или понять действие; если нет, убери её либо сделай менее навязчивой.

Связь с другими темами

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

Что запомнить

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