Как Вы уже догадались речь пойдёт о? Нет не о женщинах, а о изображениях: фотографиях, рисунках, чертежах, графиках и пр. Книга даже самая интересная сразу оживает от иллюстраций на её страницах, а уж о сайтах и говорить нечего?! Они зачастую не только насыщены этими картинками и даже перенасыщены! А, в общем виде всё это называется графика. WEB-графика. Компьютерная графика... Так, что нам есть о чём поговорить?!
Не смотря на бардак царящий в мире, вся графика делится на: растровую и векторную. Они отличаются друг от друга как день и ночь. Растр (От латинского rastrum «грабли»). Самое подходящее определение это растр экрана телевизора, строки, светящие линии на экране. Любое изображение можно представить состоящее из множества горизонтальных линий. И как бы нам не было противно, каждая линия состоит из точек. А каждую точку по-импортному называют пиксел (pixel). И если в геометрии линия состоит из бесконечного числа бесконечно малых точек, то в нашем случае они очень даже не бесконечно малые... И даже иногда прилично большие эти точки-пикселы.
Нередко можно слышать от хвастунов типа про мегапикселы (фотоаппаратов, смартфонов...). У одного столько, а у другого на один пиксел больше, вот! Граждане хорошие, все Ваши меги будут иметь значения лишь при печати ну, очень больших изображений. В реальности же все Ваши меги можно сократить в два раза, а Вы и не заметите?! И всё потому как у каждого из нас есть дефект зрения: http://proza.ru/2018/01/27/1894 Он-то и сводит на нет все Ваши хвастовства. В таких случаях говорят о перенасыщенности этих Ваши мегов! Потому-как Вы в реальности видите ровно столько, теперь уже в Вашем глазу мегов, сколько Бог Вам подарил, хотите Вы этого или нет?!
Каждый пиксел содержит описание точки изображения, точнее её цвета. Описание точки происходит не на русском матерном, а на бито-байтовом в двоичной системе счисления. В цифре, короче! И чем больше пиксел, тем больше информации, тем больших размеров файл изображения. А, дальше начнётся: места на диске, размер страниц (сайта), время загрузки, трафик, деньги... Вот поэтому в WEB-дизайне принято ограничивать объёмы файлов. А Ваши мегапикселы пойдут псу под хвост! Жители ПРОЗы хорошо это поняли! Вес изображения на ПРОЗе не более 300 кб.! А остальным, как совесть позволяет?! Вот поэтому существует некий компромисс, между качеством (количеством мега) и технической стороной, ограничением со стороны сервера...
А, что такое векторная графика? Это та, что строится не из кирпичей-пикселов, а из кривых линий, замкнутых фигур заливаемыми потом цветом. Так называемый СПЛАЙН, — математическое представление плавных кривых. По-школьному, описываются некими формулами. Меняя коэффициенты в формулах можно изменять размеры фигур, линий. На примере рис1 и рис2 можно видеть, что такое хорошо и, что такое плохо? На рис1 векторное изображение. Внизу оригинал, вверху увеличенное. Качество не меняется. На рис2 аналогично, растровое! Видите какое чучело получилось при увеличении?! Пикселы незаметные на оригинале, при увеличении нахально вылезли.
А векторные тогда, это хорошо или плохо? Вопрос конечно интересный?! Это всё равно, что вопрос, о том кто лучше, мужчина или женщина?! Растровые позволяют показать миллионы цветов и оттенков, а векторные увы и ах?! Если растровые используются для высококачественных фотографий, то векторные только для более простых объектов: схем, графиков, элементов оформления, логотипов. Что-то похожее на детские раскраски?! И в конечном итоге мы всё видим это в растровом редакторе (смотрелке). Потому-как векторные будут преобразованы всё равно в растровые... А, увидеть в девственном виде векторное можно только в векторном редакторе, скажем CorelDRAW. Поднимите руки у кого дома такой стоит в чулане? Лес рук! :-)) Вот! И я об этом же!?
А, теперь о самом главном?! Сфоткать, это ещё полдела! А в чём хранить? Или как говорят: «В каком формате?» Их несколько: TIF, GIF, JPG (JPEG), PNG, BMP, PCX и др. Как-то в 2003-м пришёл ко мне подключатель интернета... И он всё делал с помощью клавиатуры. На вопрос почему не мышью, он улыбнулся:«Это как религия?! Одни верят одному, другие, другому! Кто к чему привык?» О чём это я? О том, что из большого количества форматов прижились в WWW только JPG (JPEG) и GIF. Да ещё набирает обороты PNG, почти GIF, но улучшенной планировки?! Больше о PNG можете прочитать в ВИКИПИКИ и у всяких умников, я же лишь в трёх словах!
Итак, преимущества PNG перед GIF, это сильное сжатие файлов без потерь. Поддержка частичной прозрачности, у GIF же либо прозрачность полная, либо нет. Вот на рис3 как пример, прозрачность 40%. Это прямоугольник в формате JPG и с помощью фотошоп-7 задана прозрачность и сохранен в формате PNG. Затем вставлен в слой (DIV) и размещён на WEB-странице. Правда не знаю для чего всё это делается? Для PNG есть большой минус, (в сравнении с GIF) невозможность содержание в файле несколько изображений, а это значит не поддерживает анимацию как GIF. PNG-8 поддерживает лишь 256 цветов, а PNG-24 уже 16 миллионов. Но эта информация не совсем официальная?!!
JPG более широко применяются нежели PNG. Но при сжатии JPG происходит заметно большее ухудшение качества изображения. На рис4 как раз и показано сжатие JPG и качество после этого в процентах. В обратной пропорции конечно! 100%, — наименьшее сжатие. Кстати формат JPG это уже сжатые другие форматы. А на рис4 сжатие дополнительное, но уже в фотошопе.
GIF же используется в основном для маленьких изображений. В фотошопе ему (формату) можно задать параметры рис6. Здесь пример изменения количества цветов. Если на рис6а (три флага) число цветов 8, то после уменьшения до двух Вы видите качество тех же флагов, рис6b.
Теперь сравните рис3 с рис7 и рис8. На рис3 полупрозрачный прямоугольник в формате PNG. На рис7 две картинки: с зелёным фоном JPG рис7a, а белым, GIF рис7b. Поместим их на WEB-страницу с помощью слоёв рис8. Для JPG, естественно никакой прозрачности. Картинка целиком закрывает текст. GIF-картинка только фон прозрачный, потому как в опции настройки GIF Matte цвет белый! Что такое Matte? Это с английского связывающая часть (кайма). Это надо понимать следующим образом. Чтобы граница изображения не выглядела резкой её делают несколько растушёванной цветом фона. при назначении цвета, фон автоматически получается тем же как и кайма. При при этом фон как бы назначается прозрачным и не будет закрывать контент страницы. При этом вокруг изображения можно будет наблюдать ореол цвета фона. Имеется ввиду, что цвет фона картинки и каймы такой же как и фон страницы. В нашем случае по умолчанию, — он белый. Ну, это так, для общего понятия процесса...
Теперь перейдём к практической стороне рис5. Что это такое? При создании иллюстраций технических страниц я стал искать нужные картинки (не без этого, конечно?!). И? И натолкнулся на так называемые «чёрные» картинки! Либо полностью, либо как на рис5a. Причём так они выглядели в моей смотрелке (ACDSee6) и в майкрософовской программе PAIN. В WINDOWS-смотрелке (программа просмотра изображений) фон был мрачно-серый! Ни конвертация, не просмотр в продвинутом браузере ничего не изменило, всё та же серость? Всё потому, что картинки были в формате (шоб ему было пусто), PNG! Но однажды открыв такую «чёрную» картинку в фотошопе-7, рис5b, увидел, что фон оказывается прозрачный. А серый по-видимому был кем-то назначен прозрачным. Далее, создаю такого же размера и белого цвета файл (фон). Мышкой спокойно без всяких условий картинку (не прозрачную) перемещаю на белый фон. Сохраняю всё в формате JPG... И как результат, картинка рис5с! Получается, что только фотошоп распознал, что фон прозрачный! Возможно новые версии всех смотрелок смогут всё это распознать?!