Основы использования картинок для web страниц

Следующая статья: Особенности web картинок (графики)

Содержание

Графика на web страничках
Цифровые изображения
Как избрать рационального разрешения для рисунки
Какой рациональные размер рисунки для web странички
Объем файла

Графика на web страничках

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

Цифровые изображения

Изображение, которое вы видите на дисплее компьютерного монитора, строится из маленьких точек, именуемых пикселами. Слово пиксел - это сокращение британских слов picture element (элемент изображения). Другими словами, экран монитора - это большая матрица, каждый пиксел которой, независимо от другого, испускает определенный цвет, а все пикселы совместно образуют один кадр изображения.

Каждое точечное изображение содержит фиксированное количество пикселов, потому высота и ширина такового изображения могут быть определены как количество пикселов, расположенных, соответственно, вдоль его вертикальной и горизонтальной границ. Общее число пикселов определяет размер файла, либо объем данных, содержащихся в изображении. От количества пикселов в изображении и черт определенного монитора зависит, каковой будет размер либо формат этого изображения на дисплее. Стандартный 15-дюймовый монитор SVGA способен показать 800 пикселов по горизонтали и 600 по вертикали; современные мониторы, обычно, допускают возможность опции экранной матрицы от 800 x 600 - при всем этом пикселы будут довольно большенными - до 1600х1200 - в данном случае пикселы будут очень малы.

Независимо от данного размера печатного оттиска, размер изображения на дисплее определяется количеством содержащихся в нем пикселов, также размером монитора и данными для него параметрами. Большой монитор, экранная матрица которого настроена на разрешение 800 x 600, будет использовать более большие пикселы, чем небольшой монитор с таким же разрешением. Почти всегда мониторы настраиваются таким способом, чтоб они могли показывать примерно от 72 до 120 пикселов на один дюйм.

Хоть какое точечное изображение характеризуется 2-мя основными параметрами: графическим разрешением и глубиной цвета.

Разрешение изображения либо графическое разрешение определяет плотность пикселов в изображении и измеряется в пикселах на дюйм (ppi). Чем выше разрешение, тем больше пикселов содержится в изображении и тем меньше размер этих пикселов. К примеру, изображение размером 1 x 1 дюйм с разрешением 72 ppi будет содержать 5184 пиксела - 72 пиксела в ширину х 72 пиксела в высоту = 5184. То же самое изображение, но с разрешением 300 ppi, будет содержать 90000 существенно более маленьких пикселов. Благодаря использованию большего числа пикселов, высочайшее разрешение позволяет получать в изображении более маленькие детали и поболее тонкие цветовые переходы.

Как избрать рационального разрешения для рисунки

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

Какой рациональные размер рисунки для web странички

Размер файла, содержащего оцифрованное изображение, пропорционален размерам и графическому разрешению изображения и задается в б, кб (Кб) либо мб (Мб). Более тесное размещение пикселов, другими словами более высочайшее разрешение, позволяет воспроизводить более маленькие детали изображений. В то же время это ведет к повышению размера файла. К примеру, объем файла для изображения размером 1 x 1 дюйм с разрешением 200 ppi будет вчетверо больше, чем для изображения такого же размера с разрешением 100 ppi.

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

Число экранных пикселов на единицу длины определяет разрешающую способность монитора: она находится в зависимости от размера экрана и от данной размерности экранной матрицы. При переводе печатных оригиналов в экранные образы и расчете их размеров в пикселах следует подразумевать, что разрешающая способность большинства мониторов для Macintosh по умолчанию составляет 72 точки на дюйм (dpi), а PC-совместимые мониторы могут иметь разную разрешающую способность, но обычно она составляет 96 dpi.

На дисплее монитора все пикселы изображения представляются при помощи определенного числа экранных пикселов. Размер экранного изображения определяется разрешающей способностью монитора, и ее не следует путать с графическим разрешением, характеризующим плотность пикселов в изображении. К примеру, размер изображения с разрешением 144 ppi на дисплее монитора с разрешающей способностью 72 ppi будет в два раза превосходить реальный размер, так как в каждом дюйме экрана могут быть отображены только 72 из 144 пикселов. При выводе на монитор с разрешающей способностью 120 dpi то же самое изображение будет только некординально больше оригинала, потому что в данном случае в каждом дюйме экрана сумеют уместиться уже 120 из 144 пикселов.

Другим принципиальным параметром точечного изображения является глубина цвета, либо битовое разрешение - величина, которая определяет количество бит инфы на один пиксел. Битовое разрешение охарактеризовывает объем цветовой инфы, применяемой для описания каждого пиксела изображения. Чем больше глубина цвета, тем обширнее спектр доступных цветов и тем поточнее их представление в оцифрованном изображении. К примеру, пиксел с битовой глубиной, равной единице, имеет только два вероятных состояния - два цвета: темный либо белоснежный. Пиксел с битовой глубиной в 8 единиц имеет 256 вероятных значений цвета. Пиксел же с битовой глубиной в 24 единицы имеет 16.7 миллионов вероятных значений. Считается, что изображения, содержащие 16.7 миллионов цветов, довольно точно передают краски окружающего нас мира. Обычно, битовое разрешение задается в спектре от 1 до 48 бит/пиксел.

Большая часть цветов видимого диапазона могут быть получены методом смешивания в разных пропорциях трех главных цветовых компонент. Этими компонентами, которые именуются первичными цветами, являются красноватый, зеленоватый и голубой цвета. Они образуют цветовую модель RGB - Red, Green, Blue (Красноватый, Зеленоватый, Голубий) - в какой на каждый пиксел отводится 24 бита (по 8 бит на каждый цвет), что дает возможность закодировать 16.7 миллионов цветов. Как мы увидим в предстоящем, RGB - не единственная цветовая модель, но в мониторах и телеках употребляется конкретно она. Монитор вашего компьютера воспроизводит все цвета диапазона на базе сложения трех перечисленных цветов. При смешивании первичных цветов образуются вторичные цвета: голубой, пурпуровый, желтоватый. Чем выше интенсивность цвета, тем поближе он к чистому тону, а чем меньше - тем поближе он к черному цвету. Если сложить все три главных цвета с наибольшей интенсивностью, равной 255, получится чисто белоснежный цвет. И напротив, если просуммировать три цвета нулевой интенсивности, получится чисто темный цвет.

Объем файла

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

Размер графического файла, а именно, приобретенного в итоге сканирования изображения, можно найти по последующей формуле:

F = (А/25.4xB/25.4)xD2xC/8,

где

F - размер файла без сжатия в б;

А - ширина начального изображения в мм;

В - длина начального изображения в мм;

D - графическое разрешение изображения в dpi;

С - глубина цвета в битах.

Таким способом, если вы желаете отсканировать для собственной web странички фотографию размером 10 x 15 см с разрешением 150 dpi и глубиной цвета 24 бита, то результирующий файл будет иметь размер 1569378 б либо 1.49 мб.