Какой формат выбрать для изображений

← Уникальный контент для сайтов | Проблемы с индексацией ресурса? Тогда читай здесь... →

Растровая графика для ваших сайтов

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

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

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

Растровые изображения формируются из пикселей (точек цветов) и размер картинки у них определяется таким понятием, как разрешение - количество пикселей по горизонтали и вертикали, например, 200 на 150. Также для характеристики растровых изображений используется такое понятие, как количество цветов. Например, для Gif используется всего лишь 256 цветов, которые задаются в одном байте информации.

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

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

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

Благодаря этому, Jpeg позволяет уменьшить в весе полноцветные картинки в десятки раз. Потеря качества при этом зрительно будет незаметна, хотя и имеет место. А вот форматы BMP, Gif и Png сжимают изображения без потерь качества. Причем BMP чаще всего представляет из себя не сжатое изображение, поэтому оно самое "тяжелое", а вот Gif и Png сжимаются без потерь за счет удаления повторяющейся и избыточной информации и по весу самые оптимальные для вставки на сайт.

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

скрин №1(gif)

вес 4.45 кб

скрин №2 (bmp)

вес 109 кб

скрин №3 (png)

вес 4.47 кб

скрин №4 (jpeg)

вес 20.8 кб

скрин №3 (png)

вес 91.1 кб

скрин №2 (bmp)

вес 128 кб

скрин №1(gif)

вес 36.4 кб

Вы обратили внимание, как сильно отличается вес скриншотов в разных форматах? Вы наверное, уже с позиции вебмастера, увидели, что среди 4 картинок самым оптимальным весом обладают форматы gif и png. Самым тяжелым оказался bmp, а вот jpeg конечно полегче тяжеловеса bmp, но вместе с тем и значительно уступает gif и png. Это что касается текстовых скриншотов.

А вот с полноцветными картинками ситуация несколько меняется... Смотрите сами, ниже представлены 4 совершенно одинаковых полноцветных картинки, только в разных форматах.

Теперь лидирующие позиции у формата jpeg. Благодаря своему умению сжимать фотографии и цветные картинки в несколько раз, он опережает по минимальному весу форматы gif и png, а bmp по-прежнему "пасет задних".

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

Нынче практически все браузеры поддерживают три основных формата растровой графики используемых для веба — Gif, Png и Jpg. Исторически первым появился gif и именно с помощью него в первых браузерах можно было добавлять и отображать картинки и медийную информацию. Разработчики при его создании делали основной упор на максимальное уменьшение размера сохраняемой картинки.

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

Особенность Gif в том, что он может включать палитру, состоящую всего лишь из 256 цветов. Т.е. изображение, преобразованное в этот формат, всегда будет содержать не более 256 оттенков, а все остальные цвета будут создаваться на основе подмешивания. Но именно из-за этого самого подмешивания и появляются различные неожиданные артефакты при преобразовании полноцветных фотографий в Гиф. Из-за этого очевидного и существенного недостатка, для вывода на страницы сайта полноцветных картинок и фото все чаще используют jpeg и png.

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

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

Также gif может поддерживать примитивный способ формирования прозрачности для создаваемых изображений. Почему примитивный? Да потому, что Гиф поддерживает всего два значения прозрачности - прозрачный либо непрозрачный, без всяких промежуточных состояний, каких можно добиться с помощью использования альфа-каналов в форматах Png.

Из-за этого возникают сложности с отображением плавно изменяющегося уровня прозрачности, поэтому все, что касается качественного прозрачного фона для изображений - это прерогатива уже Png. Почти все избражения с прозрачным фоном, что мы можем найти в Интернете, имеют расширение png.

Существует несколько вариаций Png, каждая из которых призвана выполнять свои задачи:

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

Png 24 — здесь на каждый пиксел фото выделяется три цветовых канала по 8 бит каждый (8*3=24), тем самым реализуется полноцветное формирование изображения без искажений. По качеству цветового отображения превосходит даже Jpg, но вот по весу будет тяжелее.

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

Теперь давайте обобщим всю информацию и сделаем кое-какие выводы.

Итак, для обычных фотографий и полноцветных картинок лучше всего подойдет Jpeg, а вот для изображений с текстом, например рабочих скриншотов, самым оптимальным будет Png 8 или 24. Для прозрачных картинок - единозначно Png 32. Для анимации - конечно же GIF. А вот BMP хоть и дает хороший качественный снимок даже текстовых скриншотов, но сильно много весит, поэтому его используют очень редко.

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

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

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

Всем успехов и до новых встреч! С ув. Светлана (SvetLana_TSV)

Добро пожаловать в проект "Сайт с нуля" !

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

Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

Всем желаю удачи и смелых воплощений идей на вашем сайте !

Проект для новичков

Пошаговое руководство для новичков по созданию,

раскрутке и монетизации собственного сайта.

WebPageMaker, Wordpress, Joomla - инструкции для

новичков по установке CMS и шаблонов к ним.

скрин №4 (jpg)

вес 23.5 кб

2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.

Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.