Для размещения графических изображений на web страницах используется формат – Форматы растровых рисунков на веб страницах. Какие графические форматы используются в вебе. Графические форматы при оформлении Web-страниц

Форматы изображений для веб-использования

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

Графические форматы файлов, которые поддерживаются большинством популярных веб-браузеров являются: Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) и векторная графика. Некоторые свойства графических файлов:

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


GIF

GIF основан в 1980 году и принят веб-дизайнерами в начале 1990-х годов в качестве основного графического формата для веб-страниц. GIF файлы используют алгоритм сжатия, который делает размера файла маленьким для быстрой загрузки. GIF ограничен 256 цветами (8 бит), поддержкой прозрачности и черезстрочной графики. Также есть возможность создавать анимированную графику используя этот формат. Все браузеры могут отображать GIF файлы без проблем.

Преимущества GIF:

  • Наиболее широко поддерживаемый графический формат
  • Схемы выглядят лучше в этом формате
  • Поддержка прозрачности
  • JPEG

JPEG

файлы сжаты, но поддерживают “истинные цвета” (24 бит) и являются предпочтительным форматом для фотографий, где вопрос о качестве очень важен . JPEG поддерживает прогрессивный формат, который позволяет почти мгновенно видеть изображение, которое улучшиться в качество, когда закончится загрузка.

В отличие от GIF файлов, веб-дизайнеры могут управлять сжатыми файлами JPEG, что допускает иметь различные уровни качества изображения и размеры файла.

Преимущества JPEG:

  • Большое сжатия означает более быструю скорость загрузки.
  • Производит отличное качество для фотографий и сложных рисунков.
  • Поддержка 24-битного цвета.

PNG

PNG является относительно недавним форматом, который был введен как альтернатива для GIF файлов. PNG поддерживает до 24 битный цвет, прозрачность, переплетение и может содержать краткое текстовое описание изображения, которое используется в поисковых системах.

Преимущества PNG:

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

Векторная графика

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

Какой формат следует использовать?

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

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

Высоких конверсий!

14-03-2016

Форматы растровых рисунков на веб страницах. Какие графические форматы используются в вебе. Графические форматы при оформлении Web-страниц

При создании сайтов используются в основном три формата графических файлов: GIF (расширение.gif), JPEG (расширение.jpg) и PNG (расширение.png). Их свойства, преимущества и недостатки надо обсудить подробнее.

Самым распространенным форматом графических файлов для HTML-документов является GIF — Graphic Interchange Format. Для кодирования цвета в нем используется 8 бит, то есть допускается только 256 различных цветов или столько же градаций серого. Наборы цветов (палитры) могут быть различными. Один GIF-файл может содержать несколько изображений, позволяющих создавать движущиеся или изменяющиеся образы. В этом случае требуется согласование палитр различных изображений, составляющих один файл. Похожая проблема возникает, если монитор работает в режиме 256 цветов, а на экране одновременно воспроизводятся несколько изображений с разными палитрами. Очевидно, что для части картинок качество цветопередачи будет ухудшено.

Само по себе 8-битовое кодирование цвета предполагает, что размер графического файла будет относительно небольшим. Но, кроме того, для уменьшения размера файла используется еще и сжатие изображения. Существует две разновидности GIF-файлов: сжатые и обычные, в которых сжатие отсутствует. Компактность файла и дополнительные преимущества стали причиной того, что данный формат прочно утвердился в качестве стандарта де-факто для Интернета.

Дополнительное преимущество этого формата заключаются в том, что хранение информации в файле может быть организовано таким образом, чтобы при выводе рисунка происходило чередование строк (интерлейсинг). То есть вначале будут выводиться строки с номерами 1, 5, 9 и т. д., затем с номерами 2, 6, 10 и т. д., и так до тех пор, пока весь рисунок не будет отображен. Для наблюдателя такой рисунок вначале кажется нечетким, а затем четкость изображения увеличивается. При передаче данных по сети это особенно выгодно, так как еще до окончания передачи файла пользователь имеет возможность увидеть изображение, хотя и в несколько размытом виде.

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

Этот формат используется в основном для размещения на Интернет-странице графических элементов оформления – кнопок, значков, обозначений, стрелок, а также анимированных баннеров.

Формат JPEG – основной формат для размещения фотографий на сайтах. У него практически нет ограничений по количеству отображаемых цветов. Плюс этого формата в том, что используется алгоритм сжатия, благодаря которому объем файла во много раз меньше, чем для того же изображения в таких форматах, как TIFF и BMP. В сжатии заключен и минус этого формата. Изображения, созданные в графических редакторах, таких как Adobe Photoshop, с использованием контрастных линий, не всеми браузерами отображаются качественно.

В статье «Представление графических данных» приведены рекомендации по использованию форматов GIF и JPG и предсталена очень наглядная иллюстрация того, какой объем файла получается при сохранении одного и того же изображения в этих форматах.

В качестве альтернативы формату JPEG был внедрен формат PNG. Этот формат является основным форматом графического редактора Macromedia (Adobe) Fireworks, поддерживает слои, объекты, надписи, вставляется в Интернет-страницы без конвертации. В дальнейшем могут свободно редактироваться отдельные слои и объекты графического файла. Этот формат характеризуется наилучшим качеством изображения, однако, во-первых, старые браузеры его не поддерживают и, во-вторых, не все браузеры поддерживают прозрачность фона, реализованную в формате. Одним из существенных недостатков является то, что изображение в формате PNG имеет существенно больший объем, чем такое же изображение в формате JPEG.

10. ТЕХНОЛОГИИ СОЗДАНИЯ САЙТОВ С ИСПОЛЬЗОВАНИЕМ WYSIWYG-РЕДАКТОРОВ. ДВИЖОК САЙТА.

WYSIWYG – это аббревиатура от английских слов What You See Is What You Get, что переводится как «что видишь, то и получишь». То есть, речь идет о среде разработки, в которой пользователь по мере своей работы может сразу же видеть примерный результат своих усилий.. С помощью подобных приложений можно создавать код на разных языках программирования и верстки – HTML, CSS, PHP и др.

Список WYSIWYG-редакторов HTML-кода[править | править исходный текст]

Adobe (Macromedia) Dreamweaver

Microsoft FrontPage

Microsoft SharePoint Designer

Microsoft Expression Web

Mozilla Composer

Kompozer (основан на Nvu)

WYSIWYG Web Builder 5

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

20

20.Кодировки цветов и форматы графических файлов

Любой цвет можно представить в виде комбинации трёх основных цветов: красного, зелёного и синего (их называют цветовыми составляющими). Если закодировать цвет точки с помощью трёх байтов (24 бита), то первый байт будет нести информацию о красной составляющей, второй — зелёной, а третий — синей. Чем больше значение байта цветовой составляющей, тем ярче этот цвет. Задавая любые значения (от 0 до 255) для каждого из трёх байтов, с помощью которых кодируется цвет, можно закодировать любой из 16,5 миллионов цветов.

Форматы графических файлов.

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

JPEG (или JPG)- самый распространенный формат графических файлов. Свою популярность JPEG заслужил гибкой возможностью сжатия данных. При необходимости изображение можно сохранить с максимальным качеством. Либо сжать его до минимального размера файла для передачи по сети. При сохранении JPEG-файла можно указать степень качества, а значит и степень сжатия, которую обычно задают в некоторых условных единицах, например, от 1 до 100 или от 1 до 10. Большее число соответствует лучшему качеству, но при этом увеличивается размер файла. Обыкновенно, разница в качестве между 90 и 100 на глаз уже практически не воспринимается.

На практике, сохранение фотографии с минимальной степенью сжатия не дает видимого ухудшение качества изображения. Именно поэтому JPG – самый распространенный и популярный формат хранения графических файлов.

TIFF (Tagged Image File Format) Формат TIFF — Он позволяет сохранять фотографии в различных цветовых пространствах (RBG, CMYK, YCbCr, CIE Lab и пр.) и с большой глубиной цвета (8, 16, 32 и 64 бит). TIFF используется при сканировании, отправке факсов, распознавании текста, в полиграфии, широко поддерживается графическими приложениями. Имеется возможность сохранять изображение в файле формата TIFF со сжатием и без сжатия. Степени сжатия зависят от особенностей самого сохраняемого изображения, а также от используемого алгоритма. В отличии от JPG, изображение в TIFF не будет терять в качестве после каждого сохранения файла. Но, к сожалению, именно из-за этого TIFF файлы весят в разы больше JPG.

PSD (Photoshop Document) оригинальный растровый формат хранения графической информации, использующий сжатие без потерь, созданный специально для программы Adobe Photoshop и поддерживающий все его возможности. Он позволяет сохранять растровое изображение со многими слоями, любой глубиной цвета и в любом цветовом пространстве. Чаще всего формат используется для сохранения промежуточных или итоговых результатов сложной обработки с возможностью изменения отдельных элементов. Так же PSD поддерживает сжатие без потери качества. Но обилие информации, которое может содержать PSD файл, сильно увеличивает его вес.

BMP (Bit MaP image)универсальный формат растровых графических файлов, используется в операционной системе Windows. Этот формат поддерживается многими графическими редакторами, в том числе редактором Paint. Рекомендуется для хранения и обмена данными с другими приложениями. Формат BMP один из первых графических форматов. Его распознает любая программа работающая с графикой. BMP хранит данные с глубиной цвета в данном формате от 1 до 48 бит на пиксель, максимальные размеры изображения 65535×65535 пикселей. На данный момент формат BMP практически не используеться ни в интернете (JPG весит в разы меньше), ни в полиграфии (TIFF справляеться с этой задачей лучше).

GIF (Graphics Interchange Format) способен хранить сжатые данные без потери качества в формате до 256 цветов. Включает алгоритм сжатия без потерь информации, позволяющий уменьшить объем файла в несколько раз. Изображение в формате GIF хранится построчно, поддерживается только формат с индексированной палитрой цветов. Рекомендуется для хранения; изображений, создаваемых программным путем (диаграмм, графиков и так далее) и рисунков (типа аппликации) с oгpaниченным количеством цветов (до 256). Используется для размещения графических изображений на Web-страницах в Интернете.

PNG (Portable network graphics)-

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

JPEG 2000 (или jp2)

Графический формат, который вместо дискретного косинусного преобразования, характерного для JPEG, использует технологию вейвлет-преобразования, основывающуюся на представлении сигнала в виде суперпозиции некоторых базовых функций — волновых пакетов. В результате такой компрессии изображение получается более гладким и чётким, а размер файла по сравнению с JPEG при одинаковом качестве уменьшается ещё на 30%. Говоря простым языком, при одинаковом качестве размер файла в формате JPEG 2000 на 30% меньше, чем JPG. При сильном сжатии JPEG 2000 не разбивает изображение на квадраты, характерные формату JPEG. К сожалению, на данный момен этот формат мало распространён и поддерживается только браузерами Safari и Mozilla/Firerox (через Quicktime).

WMF (Windows MetaFile)

Универсальный формат векторных графических файлов для Windows-приложений. Используется для хранения коллекции графических изображений Microsoft Clip Gallery.

CDR (CorelDRaw files)

Оригинальный формат векторных графических файлов, используемый в системе обработки векторной графики CorelDraw.

AI (AdobeIllustrator files)

Оригинальный формат векторных графических файлов, используемый в системе обработки векторной графики AdobeIllustrator.

EPS (Encapsulated PostScript)

Формат векторных графических файлов, поддерживается программами для различных операционных систем.

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

Размещение графических изображений » Основы Web сайтов

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

Чтобы грамотно создавать изображения и правильно их использовать при Web — проектировании, нужно знать несколько основных приемов, используемых в этой технологии.

До недавнего времени в World Wide Web были наиболее распространены только два формата графических файлов — GIF  и  JPG. Теперь все большую заслуженную популярность получает сравнительно новый вид формата -PNG.

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

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

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

У дескриптора изображения нет закрывающего дескриптора.

<img src=»roma.jpg»>

<img src=»roma.gif»>

<img src=»roma.png»>

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

Чтобы создать альтернативный текст, используются дескриптор <img> с обязательным атрибутом src плюс alt.  Значение атрибута alt и указывает текст, который будет отображаться в качестве всплывающей подсказки либо отображаться рядом с пиктограммой графического изображения.

Например:

<img src=» roma.jpg» alt=»Цветы»>
Вот как это выглядит.(В нашем случае мы не стали загружать файл, но при загрузке файла и при наведении мышки на это изображение — выражение «Цветы» будит появляться.)

 

 

 

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

В данном, по сути, теоретическом уроке рассматриваются форматы графических файлов, которые получили широкое распространение для Web — GIF и JPEG. Их многофункциональность, универсальность, небольшой объем исходных файлов при достаточном для сайта качестве, сослужили им положительную службу. Таким образом, эти файлы стали, своего рода, стандартами для веб-графики. Также есть еще формат PNG, который также поддерживается браузерами при добавлении изображений. Формат PNG имеет две разновидноси — PNG-8 и PNG-24. Тем не менее, популярность PNG сильно уступает признанию форматам GIF и JPEG.

Форматы графических файлов для Web

1. GIF (Graphics Interchange Format) — формат графических файлов, широко применяемый при создании сайтов. GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения. Этот файл может применяться для создания логотипов сайта, баннеров или изображений с прозрачными участками.

Особенности:

1) Кол-во цветов в изображении может быть от 2 до 256 (любые цвета из 24-битной палитры).
2) Файл в формате GIF может содержать прозрачные участки.
3) Поддерживает покадровую смену изображений (создание баннеров и простой анимации).
4) Использует свободный от потерь метод сжатия.

2. JPEG (Joint Photographic Experts Group) — популярный формат графических файлов, широко используемый при создании сайтов и для хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет яркость и оттенки цветов в фотографиях неизменными. Данный формат называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может внести искажения в рисунок, особенно если он содержащий текст, мелкие детали или четкие края. Формат JPEG не поддерживает прозрачность. Когда вы сохраняете фотографию в этом формате, прозрачные пиксели заполняются определенным цветом.

Особенности:

1) Кол-во цветов — около 16 млн. позволяет сохранять изображения высокого качества.
2) Можно выбирать качество изображения и управлять конечным размером файла.
3) Поддерживает технологию, так называемый прогрессивный JPEG, в котором версия рисунка с низким разрешением появляется в окне просмотра до полной загрузки самого изображения.

3. PNG-8 (Portable Network Graphics) — формат по своему действию аналогичен GIF. Использует улучшенный формат сжатия данных. Используется в областях: текст, логотипы, иллюстрации с четкими краями, изображения с градиентной прозрачностью.

Особенности:

1) Использует 8-битную палитру. При сохранении файла можно выбрать от 2 до 256 цветов.
2) В отличие от GIF, не отображает анимацию ни в каком виде.

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

Особенности:

1) Применяется для полноцветных изображений (использует примерно 16,7 млн. цветов).
2) Поддерживает многоуровневую прозрачность, что это позволяет создавать градиент.
3) Конечный объем файла получается наибольшим, т.к. алгоритм сжатия сохраняет все цвета и пикселы в изображении неизменными.

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

Понравилось? Поделитесь с друзьями!

Изображения на веб-страницах


⇐ ПредыдущаяСтр 9 из 13Следующая ⇒

Важную роль в оформлении веб-страниц играют графические объекты: фотографии, рисунки, фоновые изображения («обои»), разделительные линии. Они делают страницы более привлекательными, а во многих случаях являются и основными источниками информации.

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

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

Для отображения рисунков предназначен непарный тег <IMG>. Его неотъемлемым атрибутом является имя графического файла <img src=»имя_файла»>.

Веб-страницы и файлы с изображениями могут храниться в разных папках, тогда в атрибуте src тега <img> необходимо указывать путь. Указание путей обязательно для ссылок на все объекты, например на другие страницы, аудио- и видеофрагменты.

Тег <img> может содержать и другие атрибуты, которые определяют способ отображения рисунка.

Высоту и ширину отображаемого на экране рисунка в пикселях можно задать значениями атрибутов height и width соответственно, а толщину рамки вокруг изображения — значением атрибута border. По умолчанию рамки нет, т. е. border=»0″. Указание размеров позволяет увеличить или уменьшить видимое на экране изображение (при этом исходный рисунок и файл, в котором он хранится, остаются неизменными). Если размеры не заданы, то по мере загрузки рисунка может изменяться расположение текста и других объектов на экране. Чтобы этого не происходило, полезно всегда указывать эти атрибуты, даже если изображение не масштабируется.

Значения атрибута align задают выравнивание текста относительно рисунка (top — по верхнему краю; middle — по середине; bottom — по нижнему краю) или способ обтекания рисунка текстом (left — рисунок слева от текста; right — рисунок справа от текста).

С помощью атрибута alt можно задать текст сообщения, которое будет выводиться вместо рисунка, если он не найден или если отключен его показ в браузере. Кроме того, этот текст появляется в виде подсказки при подведении курсора мыши к рисунку.

В качестве фона страницы можно использовать изображение из файла. Фоновый рисунок («обои») задается с помощью атрибута background в теге <body>. Чтобы повторяющийся фоновый рисунок заполнял страницу без стыков, его верхняя и нижняя, левая и правая стороны не должны отличаться. Задать фоновый рисунок и одновременно закрасить его некоторым цветом нельзя.

От удачного выбора цвета фона или фонового рисунка, шрифта и цвета текста, а также других элементов оформления страницы зависит восприятие ее содержания. В Интернете свободно распространяется громадное количество «обоев» и готовых шаблонов веб-страниц разного назначения. Создание собственных веб-страниц на их основе сводится в основном к вводу текста и ссылок на нужные изображения.

 

23. Основы веб-конструирования. Подготовка изображения для интернета. Разработка фрагментов сайтов по различным предметным областям.

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

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

Нарисованные в графическом редакторе Paint картинки по умолчанию сохраняются в формате BMP (Bit Map Picture — битовая карта изображения). В этом формате изображения хранятся в файлах в неупакованном виде.

Информационный объем изображения в байтах равен произведению его ширины W (width) и высоты H (height) в пикселях и глубины цвета С в битах на 1 пиксель (W-H-С). Так, файл с небольшой картинкой размером 100*100 пикселей при глубине цвета 24 бит/пиксель будет иметь размер около 29 Кбайт. Объем файла с изображением 800⴬600 пикселей будет иметь размер около 1,4 Мбайт, а время его загрузки при скорости модема 56 кбит/с составит более 200 с, что совершенно неприемлемо.

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

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

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

Формат JPG позволяет передавать богатую палитру цветов и лучше всего подходит для изображений с плавным переходом тонов без четких линий и контуров, например портретов, пейзажей. Такие изображения называют полутоновыми. Оптимизация заключается в замене областей с небольшим градиентом цвета на однотонные. Степень сжатия характеризуют показателем качества от 0 до 100. Часто по умолчанию его принимают равным 65, что соответствует сжатию исходного неупакованного изображения в 6—10 раз. Сохранение изображений в формате JPG предусмотрено практически во всех современных цифровых фотоаппаратах.

При подготовке изображений для Интернета выработаны определенные рекомендации. Размеры сохраняемых в файлах изображений должны соответствовать размерам изображений, отображаемых на веб-страницах, несмотря на то, что их ширину и высоту можно задавать в теге <img>. Например, для мониторов 17′ с разрешением 1280*768 пикселей ширина изображения на странице чаще всего не превышает 600—800 пикселей, а высота — 400—600. Если изображение обтекается текстом, то его размер должен находиться в пределах 200—400 пикселей.

Процесс оптимизации изображения сводится к двум основным операциям:

• приведение изображения к требуемому размеру;

• сжатие изображения с сохранением оптимального качества

Пример: фотография размером 2560*1920 пикселей сохранена в файле объемом 2,4 Мбайт. Ее ширину и высоту уменьшили в 4 раза. Определить объем файла и размеры изображения.

Размер изображения станет равным 640*480 пикселей, при этом объем файла уменьшится в 4 * 4 = 16 раз и составит 0,15 Мбайт. В 16 раз уменьшится и время загрузки этого изображения!

Изменять размеры изображений и сохранять их в форматах GIF или JPG можно практически в любом растровом графическом редакторе, в том числе в Paint. Для сжатия изображений требуется более сложный редактор.

Возможность оптимизации изображений предоставляют графические редакторы, например, Paint.Net, Adobe Photoshop.

Пример: оптимизировать изображение из файла roza1200.jpg так, чтобы на веб-странице его размер составил 300*300 пикселей.

Откроем в редакторе Adobe Photoshop изображение из файла roza1200.jpg. Для изменения размера изображения из меню Изображение (Image) вызовем окно Размер изображения (Image Size) и установим значение Ширина (Width) 300 пикселей. При включенном флажке Сохранить пропорции в такой же пропорции изменится и высота.

Из меню Файл (File) вызовем окно Сохранить для веб и устройств (Save for Web) и с помощью вкладки 4 варианта получим четыре изображения: исходное (слева вверху) и оптимизированные с качеством 65 % (справа вверху), 30 % и 10 % (внизу)

Будем уменьшать показатель Качество до появления видимых изменений на оптимизированном изображении. Это можно сделать грубо, выбрав в поле Установки (Setting) один из показателей качества (Максимальное, Высокое, Среднее, Низкое), и точно, установив подходящее числовое значение. Остановимся, например, на значении 30 и нажмем кнопку Сохранить (Save).

Объем оптимизированного файла не превышает 10 Кбайт, т. е. уменьшился почти в 75 раз. Не забудем ввести новое имя файла, например roza300-30.jpg.


Рекомендуемые страницы:

Презентация на тему: Форматы графических файлов

Bit MaP image (BMP) — универсальный формат растровых графических файлов, используется в операционной системе Windows.

Tagged Image File Format (TIFF) — формат растровых графических файлов, поддерживается всеми основными графическими редакторами. Включает в себя алгоритм сжатия без потерь информации.

Graphics Interchange Format (GIF) — формат растровых графических файлов. Включает алгоритм сжатия без потерь информации . Рекомендуется для хранения изображений с ограниченным количеством цветов. Используется для размещения графических изображений на Web-страницах в Интернете.

Portable Network Graphic (PNG) — формат растровых графических файлов, аналогичный формату GIF. Рекомендуется для размещения графических изображений на Web-страницах в Интернете.

Форматы графических

JointфайловPhotographic Expert Group (JPEG) — формат растровых графических файлов, который реализует эффективный алгоритм сжатия (метод JPEG) для отсканированных фотографий и иллюстраций. Алгоритм сжатия позволяет уменьшить объем файла в десятки раз, однако приводит к необратимой потере части информации. Используется для размещения графических изображений на Web-страницах в Интернете.

Windows MetaFile (WMF) — универсальный формат векторных графических файлов для Windows-приложений. Используется для хранения коллекции графических изображений Microsoft Clip Gallery.

Encapsulated PostScript (EPS) — формат векторных графических файлов. Рекомендуется для печати и создания иллюстраций в настольных издательских системах.

CorelDRaw files (CDR) — оригинальный формат векторных

графических файлов, используемый в системе обработки

 

векторной графики CorelDraw.

12

10.07.19

Вопросы:

В чем состоит различие растровых и векторных графических изображений?

Определите информационный объем файла для хранения этого изображений:

64 бита=8 байт

42 бита

Перечислите свойства изображения, которое следует сохранить

вформате GIF.

Перечислите свойства изображения, которое следует сохранить

вформате JPEG.

Какой из10форматов,.07.19 GIF или JPEG, обеспечивает наименьшие 13 потери качества изображения?

Вопросы:

Какие растровые графические редакторы вы знаете?

Какие векторные графические редакторы вы знаете?

В каком редакторе, растровом или векторном, вы будете редактировать фотографию?

Что такое палитра цветов?

Какие инструменты Paint вы знаете?

Как сохранить изображение в формате GIF, JPEG?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *