Графика для WEB Занятие 4 Гвасалия Дарья Александровна. - презентация

1 Графика для WEB Занятие 4 Гвасалия Дарья Александровна

2 Графика для WWW В web-дизайне используются три основных типа графических файлов: JPEG (JPG)JPEG (JPG) для многоцветных фотографических изображений GIFGIF для изображений с небольшим количеством цветов (256). PNG – спроектирован для замены устаревшего и более простого формата GIF

3 JPЕG Широко распространенный алгоритм сжатия изображений. Сжатие информации происходит с потерей качества. непригоден многоцветных фотографийДанный метод непригоден если важно сохранить всю информацию, это касается в первую очередь файлов создаваемых программами автоматизированного проектирования. Однако в случае многоцветных фотографий некоторые детали могут быть отброшены без видимого изменения изображения. Домашние фотографии лучше всего хранить в этом формате В данный формат следует сохранять только конечный вариант работы, т.к. каждое новое сохранение приводит к потери данных.

4 GIF формат хранения графических изображений (англ. Graphics Interchange Format), созданный в 1987 специально для Интернета (Срок действия последнего патента на GIF истёк 11 августа 2006). Формат GIF способен хранить сжатые без потерь изображения, содержащие до 256 цветов, и предназначен, в основном, для чертежей, графиков и т. д. прозрачный фонЕсть возможность использовать прозрачный фон. анимацииСоздавать небольшие анимации (несколько сменяющих друг друга изображений в одном файле)

5 JPEG и GIF JPEG (JPG)JPEG (JPG) для многоцветных фотографических изображений GIFGIF для изображений с небольшим количеством цветов (256).

6 Сравнение форматов графических файлов JPEGGIF Качество файла в формате GIF выше. В формате Gif используется алгоритм сжатия без потери информации, однако формат поддерживает изображения содержащие только 256 цветов. Сжатие по алгоритму JPEG происходит с потерей информации, что приводит к появлению специфических размытий на границах областей. Что однако не существенно в случае многоцветных фотографий.

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

8 Анимация только Анимация поддерживается только графическим форматом Gif

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

10 PNG и GIF переходную прозрачность Опциональная поддержка альфа-канала: формат GIF поддерживает простую бинарную прозрачность (когда любой пиксель может быть либо полностью прозрачным, либо абсолютно непрозрачным), PNG поддерживает переходную прозрачность

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

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

13 Коллаж Если рисунок содержит одновременно примитивы и фотореалистичные изображения, то его можно разрезать на несколько частей и сохранить их в разных форматах. Это позволит сократить общий размера графических файлов.

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

15 Задание Подготовить изображения для публикации на WEB-странице. Нужно: –уменьшить размеры фотографии –подготовить скриншот –вырезать нужный фрагмент изображения