- 03.10.2020
- 271
- 1
Сохранение изображения для публикации
в интернете
Чтобы ускорить загрузку 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 для
– фотографий
– размытых изображений
– рисунков с градиентом
 |
Выберите
пункт меню Файл — Сохранить для 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-страниц, надо пытаться в первую очередь уменьшать размеры рисунков на ней, пока их качество остается удовлетворительным. Очень важно правильно выбрать формат рисунка в зависимости от типа изображения.
В презентации отражены основные аспекты оптимизации таких изображений.
6 655 267 материалов в базе
Настоящий материал опубликован пользователем Дербеденева Татьяна Евгеньевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс повышения квалификации
36 ч. — 180 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Мини-курс
4 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.