Здравствуйте, уважаемые друзья. Сегодня поговорим о том, какой формат изображения лучше использовать на сайте, какие сегодня доступны форматы графических файлов для сайта и нужно ли гнаться за новинками графических форматов.
Таких вопросов я получаю довольно много, многие из моих учеников спрашивают можно ли им использовать новые форматы SVG и WebP, и где лучше применить эти изображения. Разумеется, можно использовать и новые форматы, только нужно понимать какой формат и для чего подходит лучше.
На сегодняшний день изображения на сайте являются неотъемлемой частью. Начиная от графического дизайна и закачивая изображениями в статьях, графика сопровождает большинство сайтов в сети. Но за красоту приходится расплачиваться
Не оптимизированные изображения являются одним из факторов замедления сайта, на что указывают сервисы проверки.
Поэтому вы будете всегда перед выбором, какой формат выбрать для изображения. От этого будет зависеть его размер и качество. А чтобы использовать изображения меньшего размера и без потери качества, вы должны знать некоторые вещи.
Какие изображения для сайтов использую сегодня
Все изображения для сайтов, подразделяются:
- растровые (пример — JPG, JPEG, GIF, PNG),
- векторные (пример — SVG).
Растровые изображения состоят из пикселей, в которых хранится цвет и значение прозрачности. Такими форматами представлены изображения в статьях, кнопками, иконками и элементами дизайна. Эти изображения популярны среди разработчиков и владельцев сайтов. Основной минус растровых изображений – они плохо масштабируются.
То есть при увеличении размера картинки, идёт потеря качества.
Векторные изображения состоят из линий и точек маршрутов. Информация об изображении хранится в математических инструкциях по отрисовке, что позволяет масштабировать такие изображения сколько угодно без потери качества.
Все эти изображения могут и используются на современных сайтах. Только нужно понимать, что перед загрузкой на сайт, !
Описание популярных форматов изображения для сайта
Из описания этих форматов вы поймёте, где и какой формат применять лучше всего на сайте.
JPEG
JPEG или JPG – один из самых популярных форматов изображений для сайтов. Формат поддерживает миллионы цветов, что и даёт ему лидирующую позицию в представлении фотографий и картинок на сайте.
Изображения в этом формате достаточно хорошо оптимизируются практически без потери качества, что позволяет получить файл меньшего размера без визуальной потери качества. Следует помнить, что каждая последующая оптимизация снижает качество.
Файлы этого формата поддерживаются всем устройствами и браузерами, что ещё раз подтверждает его популярность и позволяет не беспокоиться за проблемы с отображением на сайтах.
Большим недостатком этого формата является отсутствие прозрачности. То есть, комбинировать изображения в таком формате не получится. Для таких задач лучше использовать следующий формат.
PNG
Этот формат использует алгоритм сжатия без потери качества. По количеству цветов и уровню прозрачности доступен в двух видах 8 и 24-бит. Оба поддерживают прозрачность.
8-битный пользуется малой популярностью, а вот 24-битный широко используется для различных изображений на сайте. За счёт прозрачности позволяет создавать комбинированные изображения. Часто используется для создания анимированных кнопок, иконок, где необходим эффект прозрачности.
Изображения в формате PNG можно много раз оптимизировать, редактировать – оно сохранит первоначальное качество.
Формат также поддерживается всеми браузерами и устройствами, что гарантирует его отображение на любом экране.
По качеству изображения выглядят лучше, чем JPG, но вес файла будет больше. Это нужно учитывать при размещении файлов на сайте.
GIF
Это 8-битный формат, поддерживающий 256 цветов, прозрачность и анимацию. За счёт поддержки малого количества цветов, вес файла тоже минимальный.
Формат не подходит для фотографий и изображений с широким диапазоном цветов.
Зато широко используется при создании , баннеров, кнопок, иконок и так далее.
В современных сайтах этот формат используется всё реже.
Далее поговорим об относительно свежих форматах SVG и WebP, которые не так популярны, но набирают популярность и поддержку, и как нельзя лучше подходят под требования скорости загрузки и адаптивности сайтов.
SVG
Это формат векторных файлов на основе XML. Формат стал набирать популярность совсем недавно, так как ранее он слабо поддерживался в браузерах. И из-за проблем отображения никто не торопился его использовать.
На сегодняшний день SVG поддерживается всеми современными браузерами. Но, проблемы с отображением все, же встречаются.
Наиболее часто используют этот формат для простых изображений, таких как логотипы, элементы дизайна и так далее. Неприменим для фотографий.
Формат SVG имеет малый вес, отлично масштабируются, обеспечивая чёткость изображения на любом разрешении экрана, поддерживает анимацию, можно управлять через CSS и размещать в HTML, сокращая количество запросов.
WebP
Формат с открытым исходным кодом, разработан Google специально для интернета. Сегодня YouTube использует преобразование миниатюр для видео в формат WebP.
Формат обеспечивает превосходное сжатие и поддерживает прозрачность. Он сочетает в себе преимущества JPG и PNG форматов без увеличения размера файла.
Но, несмотря на преимущества формата, он поддерживается не всем браузерами, например, IE, Edge, Firefox и Safari.
Существуют способы обхода этих ограничений, но они не дают использовать формат повсеместно.
Заключение
Друзья, надеюсь, объяснил всё понятно, и вы теперь знаете, какой формат изображений лучше использовать на сайте, и почему я не настаиваю на использовании одного какого-то формата, а рекомендую комплексный подход.
Возможно, когда WebP получит широкую поддержку, мы все перейдём на него и заменим jpg и png на своих сайтах.
Давайте обсудим в комментариях, какие вы используете форматы на своих сайтах, что нравится и что не нравится.
На сегодня у меня всё, жду ваших комментариев.
С уважением, Максим Зайцев.
- BMP - если это рисунок, сделанный в программе Paint, и Вы собираетесь держать его только в компьютере.
- GIF - если анимация или рисунок с небольшим количеством цветов для публикации в Интернете.
- PNG - если это рисунок, в котором много цветов или есть какие-то прозрачные части.
- JPG (jpeg) - если фотография.
- TIFF - изображение для полиграфии (визитки, буклеты, плакаты и т.д.).
- 1-битный цвет (21 = 2 цвета) бинарный цвет, чаще всего представляется чёрным и белым цветами (или черный и зелёный)
- 2-битный цвет (22 = 4 цвета) CGA, градации серого цвета NeXTstation
- 3-битный цвет (23 = 8 цветов) множество устаревших персональных компьютеров с TV-выходом
- 4-битный цвет (24 = 16 цветов) известен как EGA и в меньшей степени как VGA-стандарт с высоким разрешением
- 5-битный цвет (25 = 32 цвета) Original Amiga chipset
- 6-битный цвет (26 = 64 цвета) Original Amiga chipset
- 8-битный цвет (28 = 256 цветов) Устаревшие Unix- рабочие станции, VGA низкого разрешения, Super VGA, AGA
- 12-битный цвет (212 = 4,096 цветов) некоторые Silicon Graphics-системы, цвет NeXTstation-систем, и Amiga- систем HAM-режима.
Фотографии и картинки отличаются друг от друга не только по содержанию, но и по другим «компьютерным» характеристикам. Например, по размеру.
Бывает так, что, вроде бы, два одинаковых рисунка, но у одного размер в три раза больше, чем у другого.
Также изображения отличаются по качеству. Думаю, Вам не раз встречались фото крайне плохого качества. Это видно невооруженным глазом. Например, две одинаковые фотографии, но одна лучшего качества, а другая - худшего.
А бывает так, что рисунку как будто не хватает красок. Вот пример.
И за все это отвечает формат или тип файла.
Вообще-то изображения бывают самых разных форматов. И существует их очень и очень много. Мы не будем рассматривать их все, а поговорим про самые распространенные. Это такие форматы, как bmp, gif, jpg, png, tiff .
Отличаются он друг от друга, в первую очередь, качеством. А качество отличается по количеству (насыщенности) цветов.
Например, я рисую картину, используя разные цвета. И тут вдруг часть из них закончилась, и приходится дорисовывать тем, что есть. Я, конечно, постараюсь сделать всё возможное, чтобы это не сильно отразилось на результате, но все равно картина получится не такая, как хотелось бы - более блеклая, размытая.
Вот так и с форматами изображений. Какой-то оставляет все цвета, другой же обрезает часть. И, бывает, из-за этого картинка портится.
Это довольно грубый пример. На самом деле, там все несколько сложнее, но, думаю, главное Вы уловили.
Распространенные форматы изображений
BMP - формат рисунков, сделанных в программе Paint. Его можно использовать для хранения нарисованных картинок на компьютере. Но вот в Интернете такой тип файлов не используется из-за большого объема. Так что если Вы хотите опубликовать картинку, нарисованную в Paint, в блоге или социальной сети, она должна быть другого типа - gif, jpg или png.
GIF - популярный формат картинок в Интернете. В нем можно сохранять их без потери качества, но с ограниченным количеством цветов - 256. Особую популярность gif получил благодаря тому, что в нем можно создать небольшие анимированные (движущиеся) картинки.
JPG - формат фотографий и картин с большим количеством цветов. В нем можно сохранить изображение как без потери качества, так и с потерей.
PNG - современный формат рисунков. Изображение такого типа получается небольшого размера и без потери качества. Очень удобно: и файл маленький, и качество хорошее. А еще он поддерживает прозрачность.
TIFF - изображения очень хорошего качества, без сжатия.Соответственно, и размер у таких файлов огромный. TIFF используют тогда, когда качество имеет большое значение. Например, при создании визиток, буклетов, журнальных обложек.
Какой формат выбрать
С амыми популярными являются три формата файлов – JPEG, RAW, TIFF. Порой можно слышать разногласия среди фотографов – какой же формат файла для фотографии лучше, в каком формате лучше делать снимки, ведь современные фотоаппараты позволяют делать фо тографии в любом из этих форматов, а порой и сразу в нескольких одновременно!
Формат файла, в котором хранится изображение - это, по сути, определенный компромисс между качеством изображения и размером файла.
Наверное вы уже знаете о том, что растровое изображение состоит из пикселей. Как организован растровый файл и в каком виде в нем хранится информация о пикселях и определяет формат файла. Качество изображения для растрового файла определяется двумя основными параметрами: размером пикселя (то есть общим количеством пикселей) и точностью передачи реального цвета цветом пикселя. С размером пикселя понятно – чем больше пикселей (или – чем «мельче» пиксель), тем лучше. А точность передачи цвета зависит от количества цветов на пиксель или глубиной цвета.
Глубина цвета (качество цветопередачи, битность изображения) - объём памяти в количестве бит, используемых для хранения и представления цвета при кодировании одного пикселя растровой графики или видеоизображения. Количество бит говорит о количестве градаций (тональных ступеней) в каждой цветовой составляющей или, просто – о количестве цветов. Добавление 1 бита – это добавление еще одного разряда в двоичном коде цветности.
Например, мы работаем в цветовом пространстве RGB. Значит, есть три канала, из которых образуется итоговый цвет пикселя: красный канал (Rad), зеленый канал (Green), синий канал (Blue). Предположим, каналы четырехбитные. Значит, в каждом канале есть возможность отобразить 16 цветов. В итоге, весь RGB будет 12-битным, а отобразить он сумеет
C=16х16х16=4096 цвета
Глубина цвета в этом случае – 12 бит.
Когда говорят о 24-битном RGB, имеют в виду 8-битные каналы (по 256 цветов) с общим количеством цветовых вариантов на один пиксель
C=256x256x256=16777216 цветов.
Цифра впечатляет. Такое количество цветов для каждого пикселя удовлетворяет требованиям самого взыскательного фотохудожника.
Немного о самих форматах.
Формат TIFF
TIFF расшифровывается как «формат файла размеченного изображения» (Tagged Image File Format) и является стандартом для типографской и печатной индустрии.
Файлы формата TIFF имеют расширение.tiff или.tif.
Главной особенностью формата является сохранение информации о каждом пикселе.
Отсюда пользовательские характеристики формата – чем больше пикселей, тем больше файл. Размер файла не зависит от картинки – разные изображения с одинаковым количеством пикселей будут иметь одинаковый вес файла. И, конечно, файл этого формата будет тяжелее форматов, использующих алгоритмы сжатия (например, JPEG). Однако файлы TIFF могут быть записаны со сжатием без потерь. В таком случае, полная информация о пикселях сохраняется, а степень сжатия зависит от особенностей изображения.
файла, открытого в графическом редакторе. При задании качества «12» или «Высокое», алгоритм сжатия файла совместит только пиксели с одинаковым цветом. При меньшем качестве в области совмещенных пикселей (в артефакты) попадут пиксели с похожими цветами, и им будет назначен один, усредненный оттенок цвета. Кроме того, JPEG использует в алгоритме сжатия тот факт, что человеческий глаз замечает изменения яркости больше, чем изменения цвета.Объем файла с информацией «Группа No53 из 256 пикселей; координаты X,Y,Z; цвет 144/201/19» занимает гораздо меньший объем, чем 256 записи вида «Пиксель No17; координаты X,Y,Z; цвет 144/201/19». Обратите внимание, как алгоритм преобразования файла JPEG обрабатывает яркие высококонтрастные границы за счёт более тонких текстур (не объединяя пиксели в группы, но меняя их цвета - стр.5, Рис.14).
Формат JPG предусматривает регулировку качества в противовес размеру файла. Однако стандарт допускает также сжатие, не использующее упрощенно описанный выше алгоритм, а построенное на основе линейного предсказателя (lossless, т.е. «без потерь», JPEG). Такой вариант гарантирует полное, бит-в-бит, совпадение исходного и преобразованного изображений. При этом коэффициент сжатия для фотографических изображений редко достигает 2, но гарантированное отсутствие искажений в некоторых случаях оказывается важнее.
Несмотря на достаточно сложный алгоритм сжатия, формат JPEG получил очень широкое распространение.JPEG стал стандартным форматом для хранения изображений в цифровых фотокамерах и использовании фотографий на интернет-сайтах. Популярность файлов JPEG состоит в их гибкости. Формат JPEG по сути является набором параметров, которые могут быть настроены под нужды отдельно взятого изображения. Для разных целей – разные параметры сжатия. JPEG формат стал настолько распространенным, что в 2010 году ученые из проекта PLANETS сохранили инструкции по его чтению в капсуле, которую поместили в специальный бункер в швейцарских Альпах. Цель акции – сохранение для потомков информации о популярных в начале XXI века цифровых форматах.
Форматом JPEG поддерживаются режимы 8, 16, 32 бит на канал.В одном файле JPEG может храниться только один слой изображения.
Формат RAW
RAW (англ. raw - cырой) - формат данных, содержащий необработанные (или обработанные в минимальной степени) данные, что позволяет избежать потерь информации. В таких файлах содержится полная информация о хранимом сигнале. RAW – это общее название формата файла, и использоваться такой формат может с разными техническими решениями, например, в акустике, при записи музыки.
Нас интересует фото вариант.
Как он образуется? В цифровом фотоаппарате, в момент съемки кадра, свет от объекта фотографирования фокусируется на светочувствительной матрице. В каждой точке матрицы световой поток преобразуется в электрическое напряжение. Данные об этих измерениях в оцифрованном виде суммируются в одном файле. Формат этого файла – RAW, то есть информация, полученная фотоаппаратом во время съемки, в полном объеме.
RAW формат не является стандартизованным и у разных производителей фотокамер, даже у разных фотокамер одного производителя он разный. Соответственно разные и обозначения расширений файлов у разных производителей. Например, может быть расширение.NEF, .CR2, .ARW и другие. Для того чтобы открыть такой файл, необходимо специальное программное обеспечение.
Формат RAW в современных фотоаппаратах бывает с разрядностью 8, 10, 12, 14 бит на канал.
Что же лучше ?
Ответа на все случаи нет. Многие наверняка сталкивались с проблемой просмотра RAW- фотографий. Скопировал фото, а его не открывает ни стандартная программа просмотра изображений, ни даже ACDsee. Если все-таки открыть такой файл, визуально он выгладит хуже файла JPEG, снятого тем же фотоаппаратом.
Кто-то считает RAW формат только для профессиональных фотографов, которые любят покопаться со своими картинками, тратят массу времени, а в результате получают фотографию, по качеству эквивалентную JPEG без всяких «заморочек».
Кто-то снимает только в RAW. Попробуем разобраться.
Отметим, что файл, получаемый непосредственно с фотоаппарата – исходник или оригинал. Какие бы вы в дальнейшем не делали преобразования с этим файлам, как бы вы его ни улучшали, все равно лучшим останется исходник. Именно его и нужно архивировать и беречь.
Отсюда и решение – чем больше информации содержит в себе исходный файл, чем он качественнее, тем больше у вас возможностей по вариантам использования этого файла.
Больше всего информации в RAW, фоткаем в RAW!
Сделали десяток кадров, вся карта памяти заполнилась...
Что же, однако, дает RAW, чтобы ради него покупать память большего размера, подбирать программу для редактирования, тратить время на обработку?
TIFF и JPEG форматы содержат в фотоаппарате фиксированные значения алгоритмов преобразования данных с матрицы в изображение. И далеко не всегда эти преобразования изображения наилучшие.
Формируя TIFF или JPEG, алгоритм преобразования отсекает «сомнительную», с его точки зрения, информацию. Работая с RAW, вы можете эту информацию сделать видимой – если это необходимо. Имеете возможность сделать настройку баланса белого, четкости, контрастности и т.д.
Объем файла одного и того же изображения в разных форматах файлов:
В итоге, получается вот что:
1. Если ваша камера настолько проста, что снимает только JPEG, и вы хотите получить максимальное качество, задавайте максимальный размер и минимальное сжатие и не терзайте себя тем, что у вас нет других форматов. В большинстве случаев, кропотливо выведенный вручную снимок из RAW соответствует автоматически сделанному камерой JPEG.
2. Не стоит, пожалуй, фотографировать в TIFF. Запись этого формата идет тяжелее, а заметной разницы по сравнению с качественным JPEG нет.
3. Если у вас есть возможность делать снимки в RAW формате, поработайте с ним. Вы сами почувствуете, подходит ли он вам. В некоторых случаях только RAW дает возможность сделать уникальное фото для большого увеличения при печати.
Остается еще одно решение, можно сказать универсальное. Есть режим, позволяющий делать кадры в двух форматах одновременно: RAW+ JPEG. Снимайте важные сюжеты в этом режиме. Современные хранилища цифровой информации – и карты памяти, и жесткие диски – позволяют это сделать. В таком случае вы получаете JPEG для использования фотографии сразу, без затрат времени на доработку. А, если понадобится этой – доверите файл RAW специалисту для обработки.
Фотография. Форматы файлов.
Сегодня профессиональные фотоаппараты способны выдавать фотоснимки потрясающего качества, но для хранения необработанных снимков потребуется огромное количество дискового пространства. Именно поэтому специалистами всего мира не один год разрабатываются специальные алгоритмы, позволяющие сжимать растровые изображения до разумных пределов. У всех существующих на сегодня алгоритмов в основе заложены немного различные способы оптимизации итогового размера файла. Все разработанные алгоритмы сжатия изображений можно разделить на два больших вида: алгоритм без потери качества изображения и алгоритмы с потерей качества.
Алгоритмы сжатия изображений без потерь качества в основе своей имеют задачу поиска повторяющихся элементов внутри массива данных и замену их на эквивалентную информацию, но занимающую меньший объем данных. Данные алгоритмы применяются к каждому используемому цветовому компоненту (например, в цветовой схеме RGB алгоритм будет применяться к каждому используемому цвету). Распространение таких алгоритмов объясняется тем, что каждый отдельный элемент в цифровом снимке отличается от близстоящего гораздо меньше, нежели в итоговом изображении, что дает на выходе хорошие результаты по уменьшению размера фотографий.
RLE (Run Length Encoding - кодирование длин серий) - самый простейший алгоритм сжатия, в котором обработчик отслеживает последовательность одинаковых байт и меняет ее на пару "длина серии - значение байта". Например, серию байт в файле 55555555 алгоритм заменяет на пару 85. Данная технология очень хорошо применяется в тех файлах, где присутствуют большие области, залитые одним цветом (блок-схемы, диаграммы). Сегодня данный алгоритм используется для предварительной обработки в таких форматах, как BMP, PCX, TIFF, JPEG.
LZW (Lempel-Ziv-Welch) - авторы данного алгоритма заложили в основу технологии ведение специального словаря повторяющихся цепочек битов. В отличие от RLE байты здесь не должны повторяться? учитывается лишь последовательность. При нахождении последовательности цепочка помещается в специальный словарь, а на ее место кодировщик проставляет код данной цепочки из словаря. Соответственно, итоговый файл преобразования содержит в себе словарь, коды, указывающие на элементы словаря, и неповторяющиеся элементы. Сегодня алгоритм используется в форматах цифровых файлов: GIF, PNG, TIFF.
Кодирование Хоффмана - разработчик в данном случае также использует кодирование повторяющихся данных, где для кодирования более повторяющихся цепочек используются коды меньшей длины, нежели для более редких цепочек. Словарь кодов при этом является двоичным деревом, где редко встречающиеся повторяющиеся последовательности находятся дальше от корня дерева. Здесь номера веток от корня до самой цепочки и составляют код последовательности. Данный алгоритм сегодня практически не используется в чистом виде, но применяется в файлах JPEG, PNG.
Алгоритмы сжатия изображений с потерей качества - в процессе сжатия файла часть информации отбрасывается, чем достигается большая степень сжатия. Однако разработчикам необходимо решать важный вопрос: какая именно отброшена информация не повлияет на результат.
JPEG - разработка "Группы экспертов в области фотографии" для изображений с 24-битной цветовой глубиной. Сегодня это почти стандарт полноцветных изображений. Технология использует дискретное косинусное преобразование (DCT), применяемой к матрице изображения размеров 8х8 для получения некоторой новой матрицы коэффициентов. Само кодирование проходит в четыре этапа.
На первом этапе идет выборка (sampling), где цветовые данные преобразуются в модель YCbCr. Затем выполняется прореживающая выборка (down-sampling), где компоненты цветности (Cb, Cr) снижаются в качестве, так как для глаза человека эти потери наиболее несущественны.
На втором этапе происходит DCT, где изображение разбивается на матричные блоки 8х8 для последующего преобразования.
Третьим этапом в алгоритме является квантование (quantization), где из изображения удаляются последние элементы матрицы DCT, которые влияют на конечный результат изображения в наименьшей степени. Оставшиеся коэффициенты DCT колируются по методу Хоффмана.
Описанный алгоритм применяется повсеместно, за исключением кодирования простых рисунков, где глаз человека видит четкие переходы от одного цвета к другому. В таких изображениях при использовании алгоритма сжатия JPEG пользователь получит на границах перехода эффект Гиббса (размазанные границы с грязным ореолом).
Фрактальный алгоритм - метод, использующий отличный от остальных алгоритмов способ сжатия. Здесь за основу взято нахождение на изображении подобных областей, которые затем кодируются особым способом. При этом подобие элементов ищется в квадратных областях с ограниченным использованием поворотов на определенный угол. Данный метод является очень ресурсоемким, но позволяет получить отличные результаты по соотношению качество/объем файла. Применяется метод в полноцветных изображениях формата FIF.
Рекурсивное волновое преобразование - данный алгоритм сжатия использует обработку фильтрами (низко- и высокочастотным) по строкам и столбцам с последующей операцией прореживания. Суть метода заключается в том, что при сжатии фильтр в виде небольшой области сканирует изображение. Значения цветовых элементов (пикселей), попавших в фильтр, умножаются на определенные коэффициенты, а значения суммируются. Далее фильтр сканирует следующую область изображения. В итоге на выходе из изображения размером XY получается четыре размером в половину первоначального. Первая картинка здесь - уменьшенное исходное изображение, а другие - картины наибольших разностей между пикселями по горизонтали, вертикали и диагонали. Далее все изображения подвергаются квантованию, где все коэффициенты, близкие к значению 0, отбрасываются. Данный метод позволяет преобразовывать не отдельные блоки имеющегося рисунка (как в алгоритме JPEG), а целые картинки, что позволяет получать более качественные изображения на выходе. Волновой метод нашел свое применение сегодня в формате файлов JPEG-2000.
Рассмотренные алгоритмы сегодня позволяют пользователю выбрать из широкого спектра представленных форматов наиболее выгодный, но в этой области есть и ряд препятствий. Во-первых, новые технологии сжатия требуют больших вычислительных мощностей и времени на обработку, что критично для портативных аппаратов (фотокамеры). В связи с этим, не прекращается работа экспертов по оптимизации уже разработанных алгоритмов и внедрению аппаратных средств компрессии изображений.
