Презентация на тему "Сохранение изображения для публикации в интернете", (10, 11 класс)

Сохранение изображения для публикации в интернете

Введение

Чтобы ускорить загрузку Web-страниц, надо пытаться в первую очередь уменьшать размеры рисунков на ней, пока их качество остается удовлетворительным.

Очень важно правильно выбрать формат

рисунка в зависимости от типа изображения.

Форматы изображений

Форматы GIF и PNG-8 могут хранить только изображения с палитрой от 2 до 256 цветов, а полноцветные рисунки записываются в форматах JPEG и PNG-24.

Если полноцветное изображение сохраняется c палитрой (GIF или PNG-8) и содержит больше цветов, чем есть в палитре, программа использует так называемый дизеринг (dithering) — цвета, отсутствующие в палитре, заменяются узором из пикселей других цветов, которые в палитре есть.

Пример

Пусть нам надо разместить на Web-странице кнопку . Попробуем сохранить ее в разных форматах и сравнить качество рисунка и объем файла.

Формат	Размер		Качество
GIF, 8 цветов		212 байт	хорошее
GIF, 16 цветов		257 байт	лучшее
PNG-8, 8 цветов		256 байт	хорошее
PNG-8, 16 цветов		303 байт	лучшее
PNG-24		526 байт	лучшее
JPEG, качество 0		468 байт	плохое
JPEG, качество 50%		684 байт	плохое
JPEG, качество 100%		1384 байта	лучшее

Формат	Размер	Качество
GIF, 32 цвета	5,91 Кб	низкое
GIF, 128 цветов	10,43 Кб	хорошее
GIF, 256 цветов	13,40 Кб	хорошее
PNG-8, 32 цвета	5,56 Кб	низкое
PNG-8, 128 цветов	9,41 Кб	хорошее
PNG-8, 256 цветов	12,25 Кб	хорошее
PNG-24	31,09 Кб	лучшее
JPEG, качество 0	1,90 Кб	плохое
JPEG, качество 50%	5,82 Кб	хорошее
JPEG, качество 100%	19,17 Кб	лучшее

Теперь сохраним в разных форматах фотографию девушки.  

Рекомендуется использовать

•       форматы GIF или PNG-8 для

–   мелких изображений

–   рисунков с четкими границами

–   рисунков с прозрачными областями – черно-белых (двуцветных) рисунков

•       формат JPEG для

–   фотографий

–   размытых изображений

–   рисунков с градиентом

Рисунки с палитрой (GIF, PNG)

Выберите пункт меню Файл — Сохранить для Web (клавиши Alt+Shift+Ctrl+S).

Оптимизирование рисунка

Original — только исходное изображение

Optimized — только оптимизированное изображение, готовое для сохранения

2-Up — исходное и оптимизированное изображения

4-Up — исходное и три варианта оптимизированных изображений с разными параметрами

Выбор формата файла

Выбор цвета в палитре:

•          Перцепционная (Perceptual) — в первую очередь выбираются цвета, которые лучше воспринимаются человеческим глазом

•          Селективная (Selective) — преимущество в палитре отдается тем цветам, которые охватывают большие непрерывные области

•          Адаптивная (Adaptive) — в первую очередь выбираются цвета, которые встречаются чаще всего

•          Ограниченная (Web) (Restrictive (Web)) — используются только цвета из безопасной Web-палитры, которую браузеры не искажают

В левом нижнем углу окна можно увидеть размер файла в выбранном формате.

Посмотрите, как он изменяется при изменении количества цветов в палитре.

Дизеринг

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

заменяться цвета

использовать дизеринг.

Прозрачность

• Флажок Прозрачность показывает, сохранять ли прозрачные пиксели рисунка. Если он установлен, прозрачность сохраняется, если нет — прозрачные пиксели заливаются цветом, который выбран в поле Матовый.

Изображения с прозрачными областями

Программа Photoshop позволяет обрабатывать рисунки с прозрачными областями.

Для размещения в сети Интернет их надо сохранять в форматах GIF или PNG (поддерживают прозрачность)

Прозрачные области обозначаются

"шахматкой" — клетчатым фоном, в котором чередуются серые и белые квадраты.

Изображения с прозрачными областями

Фоновый слой — всегда непрозрачный. Поэтому для получения изображения с прозрачными областями этот слой надо удалить или преобразовать в обычный слой (Слой — Новый — Слой из фона или двойной щелчок по нему в палитре Слои).

Для стирания ненужных областей до прозрачных используют инструменты группы Ластик (клавиша E).

•          Ластик (Eraser) — на любом слое, кроме фонового, стирает пиксели — делает их прозрачными

•          Стиратель фона (Background Eraser) — при стирании на фоновом слое преобразует его в обычный и устанавливает фоновым цветом цвет пикселя, на котором щелкнули. Стирает пиксели до прозрачного состояния. Параметр Дискретизация (Sampling) на панели параметров может принимать значения

–      Непрерывная (Continuous) — удаляется тот цвет, который находится под курсором

–      Одиночная (Once) — удаляется тот цвет, который находился под курсором в начале движения кисти

–      Образец фона (Background Swatch) — удаляется фоновый цвет

•          Волшебный ластик (Magic Eraser)            — выделяет пиксели, как Волшебная палочка, и сразу делает их прозрачными. Если применяется к фоновому слою, автоматически преобразует его в обычный слой.

Изображения из фрагментов

При разработке дизайна Web-страниц чаще всего страница сначала рисуется целиком в графическом редакторе, например в Photoshop, а потом "режется на куски". Каждый такой фрагмент (slice) будет храниться в виде отдельного файла.

Это дает несколько преимуществ:

•         маленькие файлы быстрее загружаются

•         для каждого фрагмента можно использовать оптимальные для него формат и параметры: например, один фрагмент удобнее сохранять в формате GIF, а другой — в JPEG

•         каждый фрагмент может служить гиперссылкой ссылкой на отдельный документ

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

Инструменты для работы с фрагментами

•       Раскройка позволяет "разрезать" рисунок на части

•       Выбор фрагмента служит для перемещения и изменения границ фрагментов

•       Эти инструменты связаны с одной и той же кнопкой и вызываются по клавише K.

Порядок работы с "разрезанными" изображениями

•         разделить рисунок на фрагменты с помощью инструмента Раскройка, для точного размещения можно использовать направляющие — специальные линии разметки

•         если нужно, передвинуть фрагменты и изменить их размеры с помощью инструмента Выбор фрагмента

•         настроить свойства каждого фрагмента: имя файла при сохранении, гиперссылку, всплывающую подсказку и т.д.

•         сохранить рисунок как Web-страницу: HTML-файл и набор файлов, гда хранятся фрагменты изображения

Настройка фрагментов

•         имя файла, в котором он будет сохранен

•         адрес гиперссылки (URL), если фрагмент ссылается на другой документ

•         имя окна (фрейма), в котором открывается новый документ

•         надпись, которая появляется в строке состояния при наведении мыши

•         текст всплывающей подсказки

Краткое описание документа:

Данная презентация предназначена для сопровождения занятия в рамках элективного курса для старшеклассников по теме «Сохранение изображения для публикации в интернете».  Разработка составлена по авторскому учебнику Полякова К.Ю. и в соответствии с его авторской программой элективного курса «ЦИФРОВАЯ ОБРАБОТКА ИЗОБРАЖЕНИЙ ДЛЯ WEB-САЙТОВ». 

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

В презентации отражены основные аспекты оптимизации таких изображений.