§ 63. Иллюстрации для веб-сайтов

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

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

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

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

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

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

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

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

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

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

Чтобы иллюстрация была чёткой и не перегружала страницу, сначала определяют её роль и размер отображения. Фотографию сохраняют в JPEG, если прозрачность не нужна, а для логотипа рассматривают SVG или PNG — выбор зависит от того, нужен ли вектор и должна ли сохраняться прозрачность. Растровый файл готовят с пиксельными размерами, подходящими для области показа: слишком маленький будет размытым при растяжении, слишком большой — увеличит загрузку. Затем проверяют качество после сжатия и при необходимости корректируют его.

Форматы графических изображений для веб-сайтов

Пользуйтесь таблицей как подсказкой: сначала определите тип содержимого, затем проверьте, нужны ли прозрачность или анимация. Для фотографии чаще подходит JPEG, а для контурного рисунка — PNG или SVG. После выбора сравните качество и объём файла, поскольку подходящий формат не всегда гарантирует малую загрузку.

Разбор задач

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

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

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

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

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

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

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

1. Проверьте реальные пиксельные размеры исходника и сравните их с областью, в которой картинка показывается. Если файл сильно больше необходимого, подготовьте копию подходящего размера.
2. Выберите формат по содержанию: для фотографии обычно подойдёт JPEG, для прозрачного рисунка — PNG, для простого векторного логотипа — SVG.
3. Подберите сжатие и проверьте результат на странице при обычном размере просмотра. Если появились заметные артефакты или размылись границы, ослабьте сжатие и снова сравните качество и объём.

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

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

Сохранять любую картинку в JPEG. Так поступают, потому что JPEG распространён и хорошо сжимает фотографии. Но он не сохраняет прозрачность, а сжатие с потерями может испортить края простого рисунка. Проверьте, нужен ли прозрачный фон и есть ли на изображении чёткие контуры; если да, рассмотрите PNG или SVG.

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

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

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

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

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

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

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