§ 4. Подготовка изображений для Интернета

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

Разрешение изображения — количество пикселей по ширине и высоте, например 800 × 600. Пиксель — наименьшая точка растровой картинки, имеющая свой цвет. Чем больше пикселей, тем больше мелких деталей может быть показано, но обычно растёт и объём файла. Разрешение важно учитывать, чтобы изображение было достаточно чётким и не содержало лишних данных для страницы.

Глубина цвета — количество бит, используемых для кодирования цвета одного пикселя. Если на цвет выделено n бит, можно закодировать до 2ⁿ вариантов цвета. При большей глубине лучше передаются оттенки и переходы, но для хранения изображения требуется больше данных. Этот параметр помогает понять, почему две картинки одинакового размера могут различаться по объёму.

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

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

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

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

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

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

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

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

Сравнение форматов изображений для Интернета

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

Разбор задач

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

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

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

Задача 2. Изображение размером 4000 × 3000 пикселей нужно подготовить для веб-страницы, где оно будет отображаться шириной 800 пикселей. Сразу уменьшать картинку нельзя, не проверив пропорции и нужную область: возможно, часть исходника требуется обрезать. После этого важно выбрать параметры, которые подходят изображению, а не применять один и тот же формат ко всем файлам.

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

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

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

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

Ответ. Для логотипа следует использовать PNG и сохранить прозрачный фон. JPEG не подходит, поскольку не поддерживает прозрачность и применяет сжатие с потерями. После сохранения нужно проверить результат и размер файла.

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

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

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

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

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

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

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

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

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