Содержание
Здравствуйте уважаемый читатель блога «Основы сайтостроения и web дизайна».
Продолжаем рассмотрение темы посвященной растровой графике. В прошлой статье «Форматы растровой графики для сайта» мы познакомились с понятием растровой графики и растрового изображения, с основными характеристиками растровых изображений, с преимуществами и недостатками растровой графики, а так же в общих чертах рассмотрели основные форматы растровой графики, которые используются при web-разработке.
Сегодня мы подробней рассмотрим один из форматов растровой графики, который довольно часто используется при создании сайтов. Таким форматом, является формат Gif. Данный формат берет свое начало из далекого 1977 года, когда два израильских математиками предложили новый алгоритм хранения данных об изображении в файле. В чем же заключался принцип этого нового алгоритма?
Дело в том, что в те времена скорость передачи данных в интернет была смехотворно малой. Поэтом, чтобы сохранить скорость загрузки сайта, и при этом снабдить его графикой необходимо было, что-то менять. Вот и поменяли алгоритм хранения данных об изображении в файле. В новом алгоритме данные в файле должны были храниться в сжатом виде. И в конечном итоге это привело к ожидаемому эффекту. Действительно, даже самые большие изображения, сохраненные в формате Gif, стали грузиться гораздо быстрее.
Формат Gif
Еще одним преимуществом, для web-разработчиков при введении формата Gif, стал тот факт, что при сохранении изображения в данном формате появилась возможность один из цветов изображения делать прозрачным. Такая возможность привела к уменьшению физического размера графического файла, а соответственно и экономии дискового пространства.
Позже разработанный алгоритм применили для того, что бы хранить в файлах с форматом Gif не только информацию об изображении, но и соответствующую информацию об анимации. Таким образом, появилась возможность встраивать на сайты уже и анимированные изображения.
Но время шло, появлялись новые технологии и у формата Gif наряду с преимуществами стали появляться и свои недостатки. Основным недостатком, который на сегодняшний день есть у формата Gif – это низкая палитра цветов, используемая в GIF. Максимальная цветовая палитра изображений в формате Gif – это 256 цветов, что для современных устройств отображения является очень маленькой. Поэтому использование формата Gif для хранения полно-цветных изображений не рекомендуется.
Однако не стоит хоронить старого доброго друга формат Gif, он еще послужит создателям сайтов и дизайнерам.
Что же касается принципов оптимизации рисунков в формате GIF для web, то здесь необходимо придерживаться следующих правил:
графика в формате Gif
• В случаях, когда фон рисунка полностью совпадает с фоном веб-страницы, можно в самом рисунке сделать этот фон прозрачным, поскольку прозрачная область уменьшает физический размер конечного файла. В случае с белым или черным фоном данное правило можно игнорировать, к ожидаемому эффекту это не приведет.
• В случаях, когда используются прозрачные участки в изображениях, стоит задавать цвет краев идентичным к фону, на котором будет размещаться изображение.
• Количество цветов, в большинстве случаев при сохранении файла в формате Gif можно понизить. Это не принесет особого вреда для изображения в целом, но сэкономит дисковое пространство.
• В случаях, когда используются прозрачные участки в изображениях, так же не стоит применять алгоритм смешения цветов. Итог такого применения может оказаться не прогнозируемым, что приведен к явному ухудшению качества изображения в целом.
• Параметр чередование строк стоит включать, когда речь идет о большом по размеру изображении. Большим по размеру изображением для формата Gif, принято считать файл, физический размер которого больше 40 килобайт. При включении параметра чередование строк, файл в формате Gif грузится в несколько этапов, поэтому посетителю сайта не надо будет ждать, когда на пустом месте лишь после довольно длительного времени появляется запланированное изображение.
На этом про формат Gif пожалуй все. В качестве вывода стоит отметить, что основным применением данного формата являются на сегодняшний день, в основном анимированные изображения и изображения с низким разрешением, что позволяет иметь некоторые привилегии как в скорости загрузки сайта, так и в экономии дискового пространства на сервере.
Форматы растровой графики для сайта. Часть 2. Формат JPEG
Здравствуйте уважаемый читатель блога «Основы сайтостроения и web дизайна».
Продолжаем рассмотрение темы «Форматы растровой графики для сайта». В прошлой статье мы познакомились с одним из форматов растровой графики, а точнее с форматом Gif. Сегодня мы рассмотрим очередной формат растровой графики – это формат JPEG.
Разработка формата JPEG началась объединенной группой ученых в 1987 году, что практически на десять лет позже принятия формата Gif. В основу разрабатываемой технологии хранения изображений были положены достижения разработчиков ISO и ССIТТ. Совместный результат превзошел все ожидания, так удалось создать технологию для сжатия данных полно-цветных многоградационных изображений, содержащих сотни и тысячи цветов, характеризующих реальный мир. Причем степень сжатия позволяла иметь глубину от 6 до 24 бит/пиксел.
На сегодняшний день формат JPEG – это наиболее распространенный формат для web, который позволяет хранить полно-цветные изображения, разрешения которых составляют миллионы оттенков цветов. Основными изображениями, которые рекомендовано хранить в формате JPEG, являются полно-цветные фотографии цифрового качества.
Принцип хранения и сжатия изображения в формате JPEG, построен на принципе потери качества. Но такое утверждение не стоит понимать буквально. Дело в том, что при обработке большого полно-цветного изображения, в первую очередь убираются пиксели, не воспринимаемые человеческим глазом. То есть качество вроде теряется, но мы этого практически не замечаем. Таким образом, мы получаем файл меньшего размера, но практически исходного качества.
Формат JPEG
Вообще формат JPEG, это универсальный формат, который позволяет пользователю самому определять конечный размер изображения, а соответственно и его качество. В современных компьютерных программах, связанных с обработкой изображений, предусмотрена настройка практически всех параметров файлов формата JPEG. Такое положение вещей позволяет при работе с изображениями добиваться, максимального сжатия изображений для их хранения и воспроизведения, при минимальных потерях в качестве.
При всех своих достоинствах и универсализме, формат JPEG имеет и свои недостатки. Так технология JPEG не воспринимает участки файлов с прозрачностью. При сохранении файла в формате JPEG такие участки заполняются преобладающим цветом, что в конечном итоге приводит к искажению изображения в целом. Так же в технологии JPEG недостаточно предусмотрена работа с графикой, на которой расположен текст, присутствуют мелкие детали, а сами изображение имеют четко обозначенную границу.
В таких случаях, сохраняя файл в формате JPEG, мы наблюдаем рваные края, как самих изображений, так и текста. Это в конечном итоге просто не допустимый результат, который не позволяет добиться запланированного эффекта. Поэтому такие изображения рекомендуется хранить в других форматах.
Вот несколько предложений и советов по работе с форматом JPEG:
• Если Вы используете сохранение изображения в формате JPEG с потерями, то это стоит делать один раз по окончанию редактирования. Причина этого банальна, при сохранении файла несколько раз дефекты сжатия накладываются друг на друга, что приводит к итоговому многократному увеличению снижения качества.
• Такой же эффект присутствует в параметре сжатие файла формата JPEG. При неоднократном сжатии файла, дефекты, которые присущи данному параметру, накапливаются, и общая потеря качества будет превышать запланированную потерю в разы, при сжатии изображения один раз.
Формат JPEG
• Особое внимание обращайте на такой параметр изображения, как шум. При работе с форматом JPEG, минимальные показатели шума обеспечат Вам более низкий физический размер файла.
Основные особенности формата JPEG:
• Файл в формате JPEG способен хранить около 16 миллионов цветов изображения, что позволяет поддерживать фотографическое качество исходного изображения.
• Основной характеристикой формата JPEG, является параметр, который через качество позволяет управлять конечными размерами сохраняемых файлов.
• Формат JPEG поддерживает технологию прогрессивного отображения высококачественного изображения на экране монитора. Так при загрузке такого изображения мы в первый отрезок времени наблюдаем изображение с низким разрешением, которое с течением времени повышается, а соответственно повышается и само качество загружаемого изображения.
На этом про формат JPEG пожалуй все. В качестве вывода стоит отметить, что основным применением данного формата являются на сегодняшний день, в основном полно-цветные фотографии с высоким разрешением, которые возможно использовать в web благодаря возможности большой степени сжатия при минимальной потери качества.
Форматы растровой графики для сайта. Часть 3. Еще про JPEG
Здравствуйте уважаемый читатель блога «Основы сайтостроения и web дизайна».
Продолжаем рассмотрение темы «Форматы растровой графики для сайта». В прошлой статье я познакомил вас с одним из форматов растровой графики, а точнее с форматом JPEG. Сегодняшней статьей я хотел бы закончить рассмотрение данного формата и остановиться на некоторых моментах, которые очень часто вводят в заблуждение людей, которые делают первые шаги в сайтостроении и не достаточно опытны в вопросах растровой графики.
Первое на чем я хотел остановиться — это вопрос, а чем же отличается JPEG от JPG? Если брать глобально, то это два совершенно разных понятия. Так JPG – это всего лишь расширение (суффикс) графического файла, в то время как JPEG – это популярный графический формат, который применяется при хранении фотоизображений.
Аббревиатура JPEG – это не что иное, как сокращение от Joint Photographic Experts Group, то есть сокращение от названия организации разработавшей популярный графический формат. В переводе с английского JPEG обозначает Объединённая группа экспертов по фотографии. Подробнее об этом можно прочитать в статье «Форматы растровой графики для сайта. Часть 2. Формат JPEG».
Форматы растровой графики
Таким образом, отличие двух аббревиатур JPEG и JPG в самом понятии. Однако не стоит забывать, что на сегодняшний день расширение (суффикс) графического файла в формате JPEG может быть как .jpeg так и .jpg. Почему так происходит и почему файл одного формата может иметь несколько расширений?
Одной из причин того, что файл формат JPEG имеет расширения .jpeg и .jpg может быть тот факт, что создание формата приходится на 1987 год. В то время операционные системы не поддерживали формата длинных файлов, то есть название файла не должно было превышать восьми знаков, а расширение трех знаков. Соответственно и было введено расширение для файлов формата JPEG из трех знаков, а именно .jpg. Это полностью соответствовало на то время ограничениям формата файлов 8.3.
С введением VFAT и FAT32 появилась LFN, то есть поддержка длинных имён файлов и соответственно ограничения формата файлов 8.3 были отменены. Но небыли отменены устоявшиеся принципы, что расширение файла должно иметь три знака. Именно поэтому некоторые платформы предпочитают работать с расширением .jpg, а некоторые, отдавая дань разработчикам формата, предпочитают все же расширение для файлов иметь в виде аббревиатуры .jpeg .
формат JPEG
Именно поэтому, я думаю, не стоит подвергать сомнениям то или иное расширение. Мой совет, храните и размещайте файлы формата JPEG на своем сайте, именно с тем расширением формата JPEG, в котором их сохраняет Ваш графический редактор, по умолчанию.
И в заключении я бы хотел еще раз заострить Ваше внимание, на том, что формат JPEG в большинстве своем применяется при хранении фотоизображений. Это в первую очередь стоит помнить. Второе это то, что при переводе большого, качественного изображения в формат JPEG произойдет запланированная и от вас не зависящая потеря качества. Эта потеря на первый взгляд не будит видна, но в сравнительной характеристике, например с тем же файлом, но в формате TIFF различие вполне заметно.
На этом на сегодня все. Мы закончили рассмотрение формата растровой графики JPEG. Читайте следующие статьи на моем блоге, там есть еще много интересного и поучительного.
Форматы растровой графики для сайта. Часть 4. Формат PNG
Здравствуйте уважаемый читатель блога «Основы сайтостроения и web дизайна».
Продолжаем рассматривать тему «Форматы растровой графики для сайта». В прошлых статьях я знакомил посетителей сайта с такими форматами растровой графики, как GIF и JPEG. В сегодняшнем материале я хочу познакомить читателей с еще одним форматом растровой графики – это формат PNG.
Если коснуться истории создания формата PNG, то данный формат разрабатывался с целью полноправной замены формата GIF. Однако в результате разработки пришлось отказаться от некоторых параметров и характеристик, которые поддерживает формат GIF. Так при разработке формата PNG, учеными, по разным причинам, не был учтен такой параметр как поддержание многослойности изображения. Именно поэтому формат PNG, в отличие от формата GIF, не поддерживает анимацию в изображениях.
Вообще свое начало формат PNG берет с января 1995 года, поэтому он и считается самым молодым форматом из трех основных форматов используемых при web-разработках. А день рождение свое формат PNG празднует 1 октября 1996 года, именно в этот день консорциумом W3C была рассмотрена версия формата PNG 1.0. И после рассмотрения данной версии консорциум принял решение рекомендовать формат PNG, как самостоятельный сетевой формат растровой графики.
Далее стоит остановиться на области применения формата PNG в сайтостроении. Как я уже отметил, формат PNG – это сетевой формат, который разрабатывался для хранения изображений с определенными параметрами для последующего их использования в сетевом обмене, или просто говоря в интернете.
Формат PNG
Параметров, определяющих формат PNG, достаточное количество и все их не обязательно знать, поэтому рассмотрим лишь некоторые из них. И так параметр степени сжатия для графических файлов. Если сравнивать с форматом GIF, то она гораздо выше и вполне конкурентно способна со степенью сжатия в формате JPEG. Однако и здесь прослеживается некоторые преимущества на фоне соответствующих и недостатков.
Так технология формата PNG позволяет довольно серьезно сжимать растровые изображения при этом качество изображения остается первоначальным. То есть формат PNG – это формат сжатия изображений без потери их качества. Для разработки сайта данный параметр является одним из основных, поэтому респект и большой плюс формату PNG.
А все ли изображения так «безоблачно» сжимает формат PNG и зачем тогда вообще JPEG? А это и есть тот самый минус формата PNG. Дело в том, что изображения с плавными переходами, которые так прекрасно сжимает JPEG, PNG сжимает не хуже, но при этом именно в местах плавных переходов цветов образуется некий разрыв изображения, то есть пропадание плавности перехода. Именно поэтому применение формата PNG – это изображения с четко очерченными краями. В этих случаях равных формату PNG нет.
Следующим параметром формата PNG, стоит отметить параметр поддержания прозрачности в изображениях. Применение изображений с прозрачностью в интернете, особенно в последнее время довольно широко распространенная вещь. И поэтому формат PNG, разрабатываемый для смены формата GIF, поддерживает такую возможность. То есть при сохранении изображения, имеющего прозрачные области, в формате PNG, действительно такой параметр изображения сохраняется и имеет место при воспроизведении.
формат PNG
Параметр есть, форматом поддерживается, но не всегда этот параметр поддерживается браузерами. Так при использовании всеми нами любимого в пролом браузера Internet Explorer 6, на сайтах, которые используют графику, с прозрачными участками, обработанную и сохраненную в формате PNG, мы не наблюдаем необходимой прозрачности. Прозрачные участки изображения просто напросто заполняются белым цветом. Именно поэтому сайты с такой графикой и не проходят тест на кроссбраузерность.
Кроме использования в интернет, формат PNG так же рекомендовано использовать при редактировании изображений растровой графики. Здесь опять же вступает в силу тот факт, что технология формата PNG позволяет сохранять изображения без потери качества, в отличие от формата JPEG. Поэтому даже если вы редактируете полно-цветное многоградационное изображение, то сохранять его в формате JPEG стоит лишь при конечном результате. Промежуточные сохранения стоит проводить именно в формате PNG, это позволит иметь наименьшие потери качества для конечного результата.
На этом сегодня все. Продолжать рассматривать формат растровой графики PNG мы уже будем в следующей статье. Там мы поговорим о таких параметрах формата, как глубина цвета, палитра цвета и т.д.
Форматы растровой графики для сайта. Часть 5. Еще про PNG
Здравствуйте уважаемый читатель блога «Основы сайтостроения и web дизайна».
Продолжаем рассмотрение темы «Форматы растровой графики для сайта». Сегодня вновь остановимся на знакомстве с форматом растровой графики PNG. В статье «Форматы растровой графики для сайта. Часть 4. Формат PNG» я рассказывал про историю создания формата, про некоторые области его применения, про основные параметры. Сегодня мы подробней остановимся на вариациях формата PNG.
Если вы знакомы с программой Photoshop, то при сохранении файла для Web устройств перед вами открывается панель обработки изображения, то есть панель, в которой пользователь выбирает формат обработки изображения и определяет параметры сохранения данного изображения. Так вот при выборе формата, в котором ваше изображение будет сохранено и обработано, пользователю предоставляется список форматов, из которого можно выбрать PNG-8, PNG-24.
К чему я веду, а дело в том, что формат PNG, в отличие от форматов JPEG и GIF, имеет свои вариации. Именно этими вариациями и являются PNG-8 и PNG-24. А теперь по подробней о каждой из вариаций.
форма PNG-8
PNG-8. Данный формат по своим параметрам и области действия практически аналогичен формату GIF. Как утверждают разработчики, в формат PNG-8 заложен улучшенный алгоритм сжатия данных, однако на практике данное утверждение не всегда является таковым. Цифра восемь в данной вариации формата свидетельствует о том, что вариацией используется 8-битная палитра, то есть глубина цвета составляет 256 цветов в изображении. 256 цветов в изображении это не фиксированная величина. Ею можно варьировать, применяя глубину цвета от начальных 2-х единиц, до конечных 256.
Основным же отличием PNG-8 от GIF является тот факт, что PNG-8 не поддерживает анимацию изображений ни в каком виде, как формат PNG в целом. Именно поэтому GIF и является таким долгожителем среди форматов растровой графики.
Областью применения PNG-8 считаются изображения текстов, логотипов, иллюстраций на которых четко очерчены края изображения в целом или отдельных крупных элементов. Так же PNG-8 часто применяется при обработке и хранении изображений, которые имеют градиентную прозрачностью. Именно поэтому при подготовке низко-градационных изображений для размещения на сайте, необходимо четко определяться какой из форматов PNG-8 или GIF предоставляет наибольшую степень сжатия с сохранением соответствующего качества. Лично я, в таких случаях, практически всегда отдаю предпочтение формату PNG-8.
PNG-24. Данный формат по своим параметрам аналогичен PNG-8. Что отличает эти две вариации формата PNG, так это использование различной глубины цвета при обработке изображений. Так PNG-24 использует 24-битную палитру цвета, о чем и говорит цифра в аббревиатуре.
формат PNG-24
Такая возможность приближает вариацию формата PNG-24 уже к формату JPEG и позволяет сохранять яркость и глубину цветовых оттенков в фотографиях и высоко-градационных изображениях. Как уже отмечалось ранее, 24-битная палитра глубины цвета имеет возможность использовать до 16,7 миллиона цветов в файле. Именно поэтому формат PNG-24 является в отдельных конкретных случаях прямым конкурентом JPEG.
Еще одним отличием PNG-24 от PNG-8 можно считать возможность поддержания форматом многоуровневой прозрачности. Данный параметр предоставляет возможность для создания плавных переходов от прозрачной области изображения к цветной. Это широко используется в современном сайтостроении, особенно при подготовке сложных градиентных фонов и прочих изображений.
Не смотря на всю эффективность PNG-24 и способность его работать с 24-битной цветовой палитрой, все же есть у него и свой недостаток. Дело в том, что при обработке фотографий и высоко-градационных изображений, алгоритм формата PNG-24 сохраняет все пиксели в изображении неизменными, что соответственно негативно влияет на физический размер файла и соответственно файлы получаются достаточно большими, что приводит к увеличению времени загрузки их в интернете.
Учитывая такой недостаток формата PNG-24, рекомендовано его использование при обработке и хранении несложных фотографий, рисунков, содержащих прозрачные участки, рисунков, используемое количество цветов в которых превышает значение 256, а так же изображений с четкими краями и явным переходом цветов.
На этом на сегодня, пожалуй, все. Мы закончили рассмотрение формата растровой графики PNG. Читайте следующие статьи на моем блоге, будет интересно.
