Форматы изображений: Графические форматы — Википедия – Форматы изображения, PSD, TIFF, BMP, JPEG, GIF, EPS, PNG, PICT, PDF, PCX, ICO, RAW, SVG, WebP

Форматы графических изображений: подробнее о файлах JPG, PNG, SVG, PDF и EPS | Дизайн, лого и бизнес

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

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

Создайте логотип за 5 минут

Нажмите кнопку «Создать» и мы бесплатно создадим варианты логотипа, на основе которых можно разработать фирменный стиль.

Растровые форматы изображений

Самые известные и часто встречаемые растровые форматы – это JPG (или же JPEG), PDF, PNG.

JPG

Чаще всего встречаемый и известный формат — JPG.

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

Его особенность в том, что при сжатии можно делать выбор либо в пользу качества, либо размера. Пользователь сам решает, что ему больше подходит, это главное отличие от формата PNG. То есть вы выбираете какое должно быть качество, вследствие чего определяется величина полученного файла. Чем сильнее сжатие, тем меньше конечный файл размером. А это помогает экономно расходовать место на жестком диске.

Очень часто формат JPG используют для хранения снимков (содержащие цветопередачу, яркость) и пересылки картинок в Интернете.

PNG

В PNG сжатие происходит без потерь качества. Этот растровый формат распространен при хранении графических материалов, логотипов, орнаментов, текстовой графики.

Главное достоинство формата PNG – это выбор палитры хранения переходных этапов. Этот метод сжатия, хорош тем, что он происходит без потерь качества.

Векторные форматы файлов

PDF

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

Уникальность формата PDF, в том, что с ним могут работать как специальные приложения типа Acrobat, а также Microsoft. Это весьма доступный формат по причине его универсальности. Многие программы работают с ним.

SVG

Если расшифровать формат SVG, он будет означать «масштабируемая векторная графика». Предназначен для разработки и описания двухмерных векторных изображений, а при добавлении скрипта и 3D анимированные изображения. Так как формат SVG относится к векторным изображениям, у него возможно увеличить какую угодно часть не потеряв в качестве изображения.

Преимущество его в том, что текст в этом формате является текстом, и потому он индексируется поисковыми машинами.

EPS

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

Твитнуть

Поделиться

Поделиться

Отправить

Класс!

Отправить

Другие статьи

Сравнение форматов изображений. Форматы файлов изображений

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

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

Узнать в каком же формате сохранен тот ил иной файл с изображением, можно по символам (расширение), после точки с названием файла (.jpeg .tiff .bmp ). Ниже приведен список основных форматов графических файлов, который будет также пополнятся с появлением новых типов.

Форматы цифровых изображений.

BMP (.bmp) – простой формат, предназначенный для хранения информации в виде растровых изображений. Является родным форматом для операционной системы Windows, поэтому и появился на свет благодаря компании Microsoft. Bmp формат по умолчанию не использует сжатия, чему свидетельствует не очень маленький размер файла на выходе. Но при желании есть возможность использовать его с RLE сжатием без потери качества (простой алгоритм сжатия данных).

• Глубину цвета данного формата, возможно изменять в диапазоне от 1 бита и до 48 бит на пиксель.
• Максимальное разрешение изображения не должно быть выше, чем 65535 на 65535 пикселей.
• Поддержка до 16.7 миллионов различных цветов RGB.
• Открывается большинством программ (Paint, Paint Net, Gimp).

JPEG (.jpeg) — формат является самым распространенным для графического изображения, алгоритм сжатия позволяет максимально уменьшить размер файла без видимой потери качества, но при каждом новом пересохранении качество теряется. Размер такого файла малый.

JPEG 2000 (.jp2) — формат созданный для замены обычного jpeg на новый JPEG 2000 даёт преимущество в меньшем размере одинакового цифрового изображения (на 30%) меньше. Еще при сильном сжатии JPEG 2000 квадратиков на изображении нет, как это присуще формату JPEG.

GIF (.gif) — формат идеально подходит для графических чертежей, графиков, схем, поддерживает также прозрачность и анимацию. Может хранить данные сжатыми без потери качества в цветности до 256 цветов.

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

RAW (.raw) — формат содержит необработанную графическую информацию, своего рода оттиск матрицы с цифровой фотокамеры без обработки процессора самой камеры. Формат дает широчайшие возможности при обработке фото контента с сохранением максимального качества изображения. Размер такого файла средний.

TIFF (.tiff и.tif) — формат который позволяет хранить фото контент с различными цветовыми профилями RGB, CMYK, и не теряет качество картинки при многократных пересохранениях. Имеет возможность передачи разной глубины цвета 8, 16, 32 и 64 бита, применяется в основном для печати полиграфии. Размер такого файла большой.

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

Растровую картинку составляют пиксели, и то, как эти пиксели хранятся в файле и как сам этот файл устроен и «говорит» о формате файла.

Расширение приводится после названия файла, после точки, и чаще всего состоит из 3-х символов (например: фото.jpg).

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

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

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

Наиболее распространенные форматы файлов фотографий

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

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

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

Подробнее о выборе формата записи цифровой фотографии

Итак, рассмотрим главные особенности популярных форматов фотографий.

Формат RAW

• по сути, является аналогом пленочного негатива (в отличие от других форматов, которые представляют собой цифровой аналог слайда),
• предназначен для дальнейшей обработки и сохранения либо в конвертируемом виде, либо в другом формате в зависимости от целей фотографа (например, если нужна печать, то в TIFF или JPEG; если — использование для веб, то в PNG и GIF),
• обеспечивает наилучшее качество снимка,
• обладает большим размером и требует достаточного места на карте памяти,
• хранит всю изначальную информацию о фотографии.

Формат TIFF

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

Формат JPEG

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

Формат PNG

• как и JPEG позволяет сохранить качество снимка при уменьшении его веса/размера,
• позволяет сделать элементы полупрозрачными (посредством графического редактора),
• удобен для использования в интернете,
• подходит для создания веб-дизайна, так как можно управлять его размером и прозрачность.

Формат GIF

• позволяет объединить графику с анимацией,
• имеет легкий вес,
• подходит для загрузки в интернет и для создания веб-дизайна,
• качество снимка «страдает» из-за уменьшения веса,
• не подходит для печати,
• имеет ограничение в цветовой палитре.

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

Также популярно использование формата PSD (формата программы PhotoShop) для хранения фотографии на компьютере для дальнейшей обработки.

Исходя из всего вышесказанного можно заключить, что расширению фотографии нужно уделить не меньше времени, чем други

Как устроен формат JPEG / Habr

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

Легко принять, как само собой разумеющееся, возможность отправить фотку другу, и не волноваться по поводу того, какое устройство, браузер или операционную систему он использует – однако так было не всегда. К началу 1980-х компьютеры умели хранить и показывать цифровые изображения, однако по поводу наилучшего способа для этого существовало множество конкурирующих идей. Нельзя было просто отправить изображение с одного компьютера на другой и надеяться, что всё заработает.

Для решения этой проблемы в 1986 году был собран комитет экспертов со всего мира под названием «Объединённая группа экспертов по фотографии» (Joint Photographic Experts Group, JPEG), основанный в рамках совместной работы Международной организации по стандартизации (ISO) и Международной электротехнической комиссии (IEC) – двух международных организаций по стандартизации, штаб-квартира которых расположена в Женеве (Швейцария).

Группа людей под названием JPEG создала стандарт сжатия цифровых изображений JPEG в 1992 году. Любой человек, использовавший интернет, вероятно, встречался с изображениями в кодировке JPEG. Это самый распространённый способ кодирования, отправки и хранения изображений. От веб-страниц до емейла и соцсетей, JPEG используется миллиарды раз в день – практически каждый раз, когда мы смотрим изображение онлайн или отправляем его. Без JPEG веб был бы менее ярким, более медленным, и, вероятно, в нём было бы меньше фоток котиков!

Эта статья – о том, как декодировать JPEG изображение. Иначе говоря, о том, что требуется для преобразования сжатых данных, хранящихся на компьютере, в изображение, появляющееся на экране. Об этом стоит знать не только потому, что это важно для понимания технологии, которую мы используем ежедневно, но и потому, что раскрывая уровни сжатия, мы лучше узнаём восприятие и зрение, а также то, к каким деталям наши глаза восприимчивей всего.

Кроме того, играться с изображениями таким способом очень интересно.

Заглядывая внутрь JPEG

На компьютере всё хранится в виде последовательности двоичных чисел. Обычно эти биты, нули и единицы, группируются по восемь, составляя байты. Когда вы открываете JPEG изображение на компьютере, что-то (браузер, операционка, ещё что-то) должно декодировать байты, восстановив изначальное изображение в виде списка цветов, которые можно показать.

Если вы скачаете эту умильную фотографию кота и откроете её в текстовом редакторе, вы увидите кучу бессвязных символов.

Здесь я использую Notepad++ для изучения содержимого файла, поскольку обычные текстовые редакторы, типа Notepad из Windows, испортят двоичный файл после сохранения, и он перестанет удовлетворять формату JPEG.

Открывая изображение в текстовом редакторе, вы сбиваете компьютер с толку, точно так же, как вы сбиваете с толку свой мозг, когда потрёте глаза и начинаете видеть цветные пятна!

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

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

Чтобы понять, как декодировать JPEG, нам нужно увидеть сами изначальные сигналы – двоичные данные. Это можно сделать при помощи шестнадцатеричного редактора, или же прямо на веб-странице оригинала статьи! Там есть изображение, рядом с которым в текстовом поле приведены все его байты (кроме заголовка), представленные в десятичном виде. Вы можете менять их, и скрипт перекодирует и выдаст новое изображение на лету.

Можно узнать многое, просто играясь с этим редактором. К примеру, можете ли вы сказать, в каком порядке хранятся пиксели?

В этом примере странно то, что изменение некоторых чисел вообще не влияет на изображение, а, например, если заменить число 17 на 0 в первой строке, то фотка полностью испортится!

Другие изменения, например, замена 7 на строке 1988 на число 254 изменяет цвет, но только последующих пикселей.

Возможно, наиболее странным будет то, что некоторые числа меняют не только цвет, но и форму изображения. Измените 70 в строке 12 на 2 и посмотрите на верхний ряд изображения, чтобы увидеть, что я имею в виду.

И вне зависимости от того, какое JPEG изображение вы используете, вы всегда будете находить эти загадочные шахматные последовательности при редактировании байтов.

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

Три уровня JPEG сжатия:

1. Цветовая субдискретизация.
2. Дискретное косинусное преобразование и дискретизация.
3. Кодирование длин серий, дельта и Хаффмана

Дабы вы могли представить себе масштабы сжатия, обратите внимание, что изображение, приведённое выше, представляет 79 819 чисел, то есть, около 79 Кб. Если бы мы хранили его без сжатия, для каждого пикселя потребовалось бы по три числа – для красной, зелёной и синей составляющей. Это составило бы 917 700 чисел, или ок. 917 Кб. В результате JPEG сжатия итоговый файл уменьшился больше чем в 10 раз!

На самом деле, это изображение можно сжать гораздо сильнее. Снизу приведены два изображения рядом – фотка справа была ужата до 16 Кб, то есть в 57 раз меньше, чем несжатая версия!

Если присмотреться, будет видно, что эти изображения не идентичны. Оба они – картинки с JPEG сжатием, однако правая гораздо меньше по объёму. Также она выглядит чуть похуже (посмотрите на квадраты цветов фона). Поэтому JPEG ещё называют сжатием с потерями; в процессе сжатия изображение меняется и теряет некоторые детали.

1. Цветовая субдискретизация

Вот изображение с применением только первого уровня сжатия.

(Интерактивная версия – в оригинале статьи). Удаление одного числа рушит все цвета. Однако если удалить ровно шесть чисел, это практически не влияет на изображение.

Теперь числа чуть проще расшифровать. Это почти что простой список цветов, у которого каждый байт изменяет ровно один пиксель, но при этом он уже в два раза меньше несжатого изображения (которое занимало бы ок. 300 Кб в таком уменьшенном размере). Догадаетесь, почему?

Можно видеть, что эти числа не обозначают стандартные красную, зелёную и синюю компоненты, поскольку если заменить все числа нулями, мы получим зелёное изображение (а не белое).

Это потому, что эти байты обозначают Y (яркость),

Cb (относительная голубизна),

и Cr (относительная краснота) картинки.

Почему не использовать RGB? Ведь именно так работает большинство современных экранов. Ваш монитор может демонстрировать любой цвет, включая красный, зелёный и синий цвета с разной интенсивностью для каждого пикселя. Белый получается включением всех трёх на полную яркость, а чёрный – их отключением.

Это также очень похоже на работу человеческого глаза. Цветовые рецепторы наших глаз называются «колбочки», и делятся на три типа, каждый из которых более чувствителен либо к красному, либо к зелёному, либо к синему цветам [колбочки S-типа чувствительны в фиолетово-синей (S от англ. Short — коротковолновый спектр), M-типа — в зелено-желтой (M от англ. Medium — средневолновый), и L-типа — в желто-красной (L от англ. Long — длинноволновый) частях спектра. Наличие этих трёх видов колбочек (и палочек, чувствительных в изумрудно-зелёной части спектра) даёт человеку цветное зрение. / прим. перев.]. Палочки, другой тип фоторецепторов в наших глазах, способны улавливать только изменения в яркости, однако они гораздо более чувствительные. В наших глазах есть около 120 млн палочек и всего 6 млн колбочек.

Поэтому наши глаза гораздо лучше замечают изменения в яркости, чем изменения в цвете. Если отделить цвет от яркости, можно убрать немного цвета, и никто ничего не заметит. Цветовая субдискретизация – это процесс представления цветовых компонентов изображения в меньшем разрешении по сравнению с компонентами яркости. В примере выше у каждого пикселя ровно один компонент Y, а у каждой отдельной группы из четырёх пикселей есть ровно одна компонента Cb и одна Cr. Поэтому изображение содержит в четыре раза меньше цветовой информации, чем было у оригинала.

Цветовое пространство YCbCr используется не только в JPEG. Его изначально придумали в 1938 году для телепередач. Не у всех есть цветной телевизор, поэтому разделение цвета и яркости позволило всем получать один и тот же сигнал, а телевизоры без цвета просто использовали только компонент яркости.

Поэтому удаление одного числа из редактора полностью рушит все цвета. Компоненты хранятся в виде Y Y Y Y Cb Cr (на самом деле, не обязательно в таком порядке – порядок хранения задаётся в заголовке файла). Удаление первого числа приведёт к тому, что первое значение Cb будет воспринято, как Y, Cr как Cb, и в целом получится эффект домино, переключающий все цвета картинки.

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

(Интерактивная версия – в оригинале статьи).

Удаление синего не так заметно, как красного или зелёного. Всё потому, что из шести миллионов колбочек в ваших глазах около 64% чувствительны к красному, 32% к зелёному и 2% к синему.

Субдискретизация компонента Y (слева внизу) видна лучше всего. Заметно даже небольшое изменение.

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

2. Дискретное косинусное преобразование и дискретизация

Этот уровень сжатия по большей части и определяет суть JPEG. После преобразования цветов в YCbCr компоненты сжимаются по отдельности, поэтому далее мы можем сконцентрироваться только на компоненте Y. И вот как выглядят байты компонента Y после применения этого уровня.

(Интерактивная версия – в оригинале статьи). В интерактивной версии клик на пикселе прокручивает редактор на строчку, которая его обозначает. Попробуйте поудалять числа с конца или добавить несколько нулей к определённому числу.

На первый взгляд, выглядит, как очень плохое сжатие. В изображении 100 000 пикселей, и для обозначения их яркости (Y-компоненты) требуется 102 400 чисел — это хуже, чем если вообще ничего не сжимать!

Однако обратите внимание на то, что большинство этих чисел равны нулю. Более того, все эти нули в конце строк можно удалять, не меняя изображение. Остаётся порядка 26 000 чисел, а это уже почти в 4 раза меньше!

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

Эти узоры формируются на основе графика косинуса. Вот, как выглядят некоторые из них:

8 из 64 коэффициентов

Ниже – изображение, демонстрирующее все 64 узора.

(Интерактивная версия – в оригинале статьи).

Эти узоры имеют особое значение, поскольку они формируют базис изображений размера 8х8. Если вы незнакомы с линейной алгеброй, то это означает, что любое изображение размера 8х8 можно получить из этих 64-х узоров. DCT – это процесс разбиения изображений на блоки 8х8 и преобразования каждого блока в комбинацию из этих 64 коэффициентов.

То, что любое изображение можно составить из 64 определённых узоров, кажется волшебством. Однако это то же самое, что сказать, что любое место на Земле можно описать двумя числами – широтой и долготой [с указанием полушарий / прим. перев.]. Мы часто считаем поверхность Земли двумерной, поэтому нам требуются всего два числа. Изображение 8х8 имеет 64 измерения, поэтому нам требуются 64 числа.

Пока непонятно, как это помогает нам в смысле сжатия. Если нам нужно 64 числа для представления изображения 8х8, почему этот способ будет лучше, чем просто хранить 64 компоненты яркости? Мы делаем это по той же причине, по которой мы превратили три числа RGB в три числа YCbCr: это позволяет нам удалить незаметные детали.

Сложно увидеть, какие именно детали удаляются на этом этапе, поскольку JPEG применяет DCT к блокам 8х8. Однако никто не запрещает нам применить его к целой картинке. Вот, как выглядит DCT по компоненте Y в применении к целой картинке:

С конца можно удалить более 60 000 чисел практически без заметных изменений на фотке.

Однако отметьте, что если мы обнулим первые пять чисел, разница будет очевидной.

Числа в начале обозначают изменения низкой частоты в изображении, и наши глаза улавливают их лучше всего. Числа ближе к концу обозначают изменения высоких частот, которые сложнее заметить. Чтобы «увидеть то, что не видно глазом», мы можем изолировать эти детали высокой частоты, обнулив первые 5000 чисел.

Мы видим все области изображения, в которых происходит наибольшее изменение от пикселя к пикселю. Выделяются глаза кота, его усы, махровое одеяло и тени в нижнем левом углу. Можно пойти и дальше, обнулив первые 10 000 чисел:

20 000:

40 000:

60 000:

Эти высокочастотные детали JPEG и удаляет на этапе сжатия. Преобразование цветов в коэффициенты DCT не несёт потерь. Потери образуются на шаге дискретизации, где удаляются величины высокой частоты или близкие к нулю. Когда вы понижаете качество сохранения JPEG, программа увеличивает порог количества удаляемых значений, что даёт уменьшение размера файла, но делает картинку более пикселизированной. Поэтому изображение в первом разделе, которое было в 57 раз меньше, так выглядело. Каждый блок 8х8 представлялся гораздо меньшим количеством коэффициентов DCT по сравнению с более качественной версией.

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

Вот, просто для интереса, что получится при использовании всего 24 000 чисел:

Или всего 5000:

Очень размыто, но как будто узнаваемо!

3. Кодирование длин серий, дельта и Хаффмана

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

Как можно сжать что-либо, не отбрасывая информацию? Представьте, как бы мы описали простой чёрный прямоугольник 700 х 437.

JPEG использует для этого 5000 чисел, но можно достичь гораздо лучшего результата. Можете представить себе схему кодирования, которая бы описывала подобное изображение как можно меньшим количеством байт?

Минимальная схема, которую смог придумать я, использует четыре: три для обозначения цвета, и четвёртый – сколько пикселей имеет такой цвет. Идея представления повторяющихся значений таким сжатым способом называется кодирование длин серий. Она не имеет потерь, поскольку мы можем восстановить закодированные данные в первозданном виде.

Размер файла JPEG с чёрным прямоугольником гораздо больше 4 байт – вспомните, что на уровне DCT сжатие применяется к блокам 8х8 пикселей. Поэтому как минимум нам нужен один коэффициент DCT на каждые 64 пикселя. Один нам нужен потому, что вместо того, чтобы хранить один DCT-коэффициент, за которым идёт 63 нуля, кодирование длин серий позволяет нам хранить одно число и обозначить, что «все остальные – нули».

Дельта-кодирование – это техника, при которой каждый байт содержит отличие от какого-то значения, а не абсолютную величину. Поэтому редактирование определённых байтов изменяет цвет всех остальных пикселей. К примеру, вместо того, чтобы хранить

12 13 14 14 14 13 13 14

Мы могли бы начать с 12, а потом просто обозначать, сколько надо прибавить или отнять, чтобы получить следующее число. И эта последовательность в дельта-кодировании приобретает вид:

12 1 1 0 0 -1 0 1

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

Дельта-кодирование – одна из немногих техник, применяемых вне блоков 8х8. Из 64 коэффициентов DCT один – просто постоянная волновая функция (сплошной цвет). Он представляет среднюю яркость каждого блока для компонент яркости, или среднюю голубизну для компонентов Cb, и так далее. Первое значение каждого DCT-блока называется DC-значением, и каждое DC-значение проходит дельта-кодирование по отношению к предыдущим. Поэтому изменение яркости первого блока повлияет на все блоки.

Остаётся последняя загадка: как изменение единственного числа полностью портит всю картинку? Пока таких свойств у уровней сжатия не было. Ответ лежит в заголовке JPEG. Первые 500 байт содержат метаданные об изображении – ширину, высоту, и проч., и пока мы с ними не работали.

Без заголовка практически невозможно (ну, или очень сложно) декодировать JPEG. Это будет выглядеть так, будто я пытаюсь описать вам картину, и начинаю изобретать слова для того, чтобы передать своё впечатление. Описание будет, вероятно, весьма сжатым, поскольку я могу изобретать слова именно с тем значением, которое я хочу передать, однако для всех остальных они не будут иметь смысла.

Звучит глупо, но именно так это и происходит. Каждое изображение JPEG сжимается с кодами, специфичными именно для него. Словарь кодов хранится в заголовке. Эта техника называется «код Хаффмана», а словарь – таблицей Хаффмана. В заголовке таблица отмечена двумя байтами – 255 и потом 196. У каждого цветового компонента может быть своя таблица.

Изменения таблиц радикально повлияют на любое изображение. Хороший пример – поменять на 15-й строке 1 на 12.

Это происходит потому, что в таблицах указывается, как нужно читать отдельные биты. Пока что мы работали только с двоичными числами в десятичном виде. Но это скрывает от нас тот факт, что если вы хотите хранить число 1 в байте, то оно будет выглядеть, как 00000001, поскольку в каждом байте должно быть ровно восемь бит, даже если нужен из них всего один.

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

234 115

То, в зависимости от таблицы Хаффмана, это могут быть три числа. Чтобы их извлечь, вам надо сначала разбить их на отдельные биты:

11101010 01110011

Затем обращаемся к таблице, чтобы понять, как их группировать. К примеру, это могут быть первые шесть битов, (111010), или 58 в десятичной системе, за которыми идут пять битов (10011), или 19, и наконец последние четыре бита (0011), или 3.

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

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

Что ещё можно сделать – совсем немного изменить таблицу Хаффмана. Для других это будет выглядеть, как испорченная картинка. И только вы будете знать волшебный вариант её исправления.

Подведём итоги: так что же нужно для декодирования JPEG? Необходимо:

1. Извлечь таблицу (таблицы) Хаффмана из заголовка и декодировать биты.
2. Извлечь коэффициенты дискретного косинусного преобразования для каждого компонента цвета и яркости для каждого блока 8х8, проведя обратные преобразования кодирования длин серий и дельты.
3. Скомбинировать косинусы на основе коэффициентов, чтобы получить значения пикселей для каждого блока 8х8.
4. Масштабировать компоненты цветов, если проводилась субдискретизация (эта информация есть в заголовке).
5. Преобразовать полученные значения YCbCr для каждого пикселя в RGB.
6. Вывести изображение на экран!

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

Код, использованный в статье, открыт, и содержит инструкции по замене картинок на свои собственные.

PNG, JPEG, TIFF (Часть 2)

Расширение не только сообщает вам систему камеры, которой сделан снимок, но и сохраняет всю информацию с датчика камеры. Расширение файла позволяет ему взаимодействовать с программами для предпросмотра и редактирования. Во второй части нашего исследования речь пойдет о форматах PNG, JPEG, TIFF. (Часть 1).

Формат файла PNG

По сравнению с другими форматами файлов, такими как файлы CRF или NEF, файл PNG встречается чаще. PNG расшифровывается как Portable Network Graphics file и придерживается сжатия без потерь. Файл PNG был создан для замены формата изображения в формате GIF, но используется на всей платформе.

В отличие от JPEG, сохранение цифрового файла в формате PNG не снижает его качество. Формат PNG полезен, когда изображения должны иметь прозрачный фон (например, логотип компании).

Они могут использоваться в качестве наложений видео или при объединении двух или более изображений в качестве слоев. Не должно быть никаких проблем с открытием или использованием формата файла PNG в любой операционной системе — это стандартный тип файла.

Для чего нужен файл PNG?

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

Формат файла JPEG

Формат файла JPEG или JPG является стандартным расширением для цифровых изображений. Файлы JPEG поступают со всех цифровых камер, которые вы можете использовать на разных платформах. JPEG — акроним Joint Photographic Expert Group – по названию организации-разработчика.

Когда вы снимаете изображение с помощью камеры, как минимум, вы получите изображение в формате JPEG. Изменяя настройки, вы можете превратить ваши JPEG в файлы RAW. Однако необработанные RAW-файлы имеют больший размер. Некоторые камеры позволяют захватывать форматы файлов RAW + JPEG, сохраняя две версии одного и того же изображения.

Преимущество заключается в том, что вы можете редактировать необработанные изображения снова и снова без потери качества. Файлы изображений JPEG служат для немедленного обмена изображениями, что идеально подходит для быстрой съемки.

Однако файл изображения JPEG — это файл с потерями. Из-за сжатия файл будет терять качество при использовании. Открытие и сохранение уменьшают разрешение файла изображения JPEG. Платформы социальных сетей будут принимать изображения в формате JPEG, но не необработанные изображения, такие как TIFF, поэтому такие большие форматы файлов нужно конвертировать перед использованием.

Где же были потеряны данные?

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

Каковы последствия использования JPEG?

• Благодаря использованию JPEG вы сэкономите место на карте памяти и жестком диске. Если вы фотограф, который любит постообработку, съемка в формате JPEG имеет свои последствия.
• Потеря данных. Во-первых, каждый раз, когда вы редактируете этот тип файла, вы теряете еще больше данных. Если вы решили отредактировать файл JPEG, сначала скопируйте его, прежде чем приступить.
• Температура. Потерянные пиксельные данные означают, что при изменении цветовой температуры изображения вы меняете фактическое изображение. Вы не меняете только метаданные. Эти изменения выглядят более резко, а с RAW вы можете сделать более тонкие настройки.
• Шум — в некоторых ситуациях вам нужно будет использовать более высокое значение ISO в условиях низкой освещенности. Есть программы снижения шума. Но только с файлом JPEG для работы они не особенно эффективны. Данные теряются в файле каждый раз, когда вы пытаетесь уменьшить шум.

Когда использовать JPEG?

Некоторые устройства с камерой не поддерживают файлы фотографий RAW. Если вы используете один из них, вам придется использовать JPEG. Это обычно смартфоны. Те, кто использует дроны, также столкнутся с той же проблемой.

Итак, когда лучше всего использовать JPEG?

• Ограниченное редактирование. Фотография, которую вы делаете, требует ограниченного редактирования. Вам может понадобиться немного больше контраста и насыщенности, но это все.
• Необходимость экономии места — вы снимаете много фотографий в день и имеете ограниченный объем места. В идеале — использовать самый большой и качественный файл JPEG, который может сделать камера.
• Простое изображение — это изображение, которое камера может легко обрабатывать, с низким ISO. Такие изображения обычно сняты на улице при хорошем освещении. Это будет означать, что изображение не нуждается в дополнительном редактировании шума в файле. Файл предназначен для использования на веб-сайте или в социальных сетях.

В чем разница между PNG и JPEG?

Разница между форматом PNG и JPEG заключается в потере качества. Файлы JPEG теряют качество при открытии и сохранении из-за сжатия. JPEG меньше по размеру, но файл изображения PNG сохраняет больше деталей и разрешения.

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

Изображение JPEG полезно для низкоконтрастной сцены. Для резкого контраста используйте файл PNG

Что лучше: PNG или JPEG?

Файл PNG лучше, чем JPEG по нескольким причинам. Как мы уже отметили, JPEG — это формат с потерями, то есть он снижает качество при каждом действии с файлом. Использование файла PNG означает, что вы сохраняете разрешение и высокое качество изображения. Фотографы и те, кто работает с цифровой графикой, используют в работе файлы PNG. Для файлов, которые вы хотите в дальнейшем редактировать, используйте PNG!

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

Что такое TIFF?

Формат файла TIFF не распространен в цифровой фотографии, потому что большинство камер не имеют возможности делать фотографии в этом формате. TIFF является аббревиатурой от Tagged Image File Format. Это означает, что он не потеряет данные изображения при постобработке.

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

Когда использовать TIFF?

Некоторые камеры будут его поддерживать, и, как и в случае с форматом RAW, чем больше данных сохраняется на изображении, тем лучше (но, конечно, понадобится много места на жестком диске).

TIFF используется чаще всего во время постобработки. Вы можете сделать фотографию в формате RAW или даже в формате JPEG, но когда вы приступите к работе, можно использовать TIFF.

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

Таким образом, выбор формата изображения зависит от того, сколько вы выполняете постобработки и как собираетесь потом использовать изображение, то есть в какой степени вы работаете коммерчески как фотограф.

Сохранение изображений. Форматы файлов изображений.

В статье об HDR-фотографии говорилось о возможности расширения интервала яркостей объекта, которые могут быть запечатлены на фотоснимке для цифровой фотографии. В принципе использование RAW-формата изображения для объектов съемки с не очень большим интервалом яркостей позволяет в некоторой степени затемнять слишком светлые участки снимка и высветлять темные (тени) в RAW-конвертере. Особенно хорошо это удается при использовании программы обработки Adobe Ligtroom, но тут многое зависит от того, какой камерой сделан снимок, от ее возможностей по части шумов в тенях.

Что же такое формат RAW и какие еще форматы файлов изображений в цифровой фотографии существуют и используются? Рассмотрим наиболее распространенные и используемые из них.

Те, кто работает на компьютере с информацией, наверняка сталкивались с программами-архиваторами файлов. При большом объеме информации, обрабатываемой и хранимой, возникает необходимость уменьшения занимаемого ею пространства на носителях. Этой цели служит сжатие данных с помощью архиваторов, таких, как WinZip, WinRar и другие. Сжатие — это уменьшение объема информации, хранящейся в файле, путем кодирования, при котором удаляется избыточная информация. Текстовую информацию можно сжать без проблем. Её сжатие производится без потерь, т. е. при восстановлении из архива она воспроизводится совершенно идентично первоначальной.

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

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

RAW-формат.

Многие современные фотоаппараты (однако не все!) имеют возможность сохранения изображений в этом формате. В этом формате сохраняется информация об изображении, получаемая матрицей фотоаппарата в чистом виде, необработанная, и поэтому без потерь. Формат RAW содержит наибольший объем информации и предоставляет широкие возможности для обработки изображений, сохраняя при этом высокое качество снимка. Но, повторяю не все фотоаппараты оснащены такой функцией.

JPEG-формат.

Самый распространенный формат сжатия данных. Формат JPEG (Joint Photographic Experts Group — объединенная группа экспертов в области фотографии) производит сжатие информации с определенными потерями. При использовании этого алгоритма сжатия потери происходят при каждом сохранении одного и того же файла. Однако в программах для редактирования изображений, в частности в такой всеми нами любимой, как фотошоп, имеется возможность сохранения с минимальной степенью сжатия, которая заметно не ухудшает качество изображения.

Окно сохранения файла в формате JPEG в программе фотошоп.

На фото показан выбор максимального размера изображения с наилучшим качеством. При этом потери информации практически не заметны.

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

Кроме того у этого формата есть еще одна очень полезная особенность. Он хранит информацию о том, когда сделан снимок, об экспозиции при фотосъемке (выдержке и диафрагме), величине фокусного расстояния. Для хранения этих метаданных служит формат JPEG EXIF (Exchangeable Image Format). Информация из этого формата может извлекаться либо специальными программами, прилагаемыми к фотокамере, либо обрабатывающими редакторами, в частности фотошопом.

TIFF — формат.

Данный формат файлов изображений является одним из наиболее универсальных и потому распространенных. Формат TIFF (Tagged Image File Format – самодокументируемый формат файлов изображений).

Этот формат читается как компьютерами PC, так и Macintosh. Он позволяет сохранять цветовые модели RGB, CMYK, LAB и другие, поддерживается многими графическими редакторами, благодаря чему используется в полиграфии. При сохранении этого формата в программе фотошоп сохраняется информация о слоях.

PSD – формат.

Это рабочий формат программы Photoshop. Он позволяет сохранять растровые изображения с многими слоями, с любой глубиной цвета. Обычно он используется как промежуточный формат при обработке изображений, которые затем окончательно сохраняются в формате JPEG. Он создает сжатый файл без потерь качества, однако имеет большой размер из-за наличия дополнительного объема информации, для постоянного хранения практически не используется.

GIF — формат.

Формат, разработанный компанией CompuServe был предназначен для передачи информации в сети. GIF {Graphics Interchange Format – формат графического обмена) до сих пор распространен в интернете. Он использует алгоритм сжатия Лемпеля-Зива-Уэлша (LZW), который служил для сжатия текстовых файлов, поэтому изображения, имеющие ряд одинаковых пикселей по горизонтали (наподобие текста) могут сжиматься значительно лучше изображений, имеющих вертикальные ряды. Этот формат отображает только 8-ми разрядные цвета, он больше используется для небольших значков и отображения линий.

GIF-формат обеспечивает чересстрочный графический обмен, при котором изображение отображается на экране монитора постепенно с все большей детализацией. Примерно так ̶ сначала отображается, скажем, каждая 8-я строка изображения, а затем постепенно заполняются все оставшиеся. К слову сказать, возможность чересстрочной развертки имеется теперь в программе фотошоп и для формата JPEG.

Окно сохранения изображения в файл в формате JPEG.

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

PNG – формат.

Формат PNG создан для улучшения формата GIF и замены его форматом, который не требует лицензии для широкого использования. В отличие от GIF формат PNG может хранить альфа-каналы при обработке в фотошопе, а также неограниченное количество цветов.

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

BMP — формат.

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

Друзья! Если Вам показался интересным материал, поделитесь с друзьями. 

Поделиться в соц. сетях

Об авторе

Я живу в г Новосибирске. Образование высшее — НГТУ, физикотехнический факультет. В настоящее время на пенсии. Семья: жена, две дочери, две внучки. Работал в последнее время в электронной промышленности в ОКБ по разработке и производству приборов ночного видения. Люблю музыку- классику, джаз, оперу, балет. Главное увлечение — любительская фотография.

Какой формат изображений больше подходит вашему сайту?

От автора: на март 2017 изображения составляют свыше 65% веб-контента. И это не удивительно: изображения придают красоту, передают сообщения, рассказывают истории и налаживают контакт с посетителями вашего сайта. Обратная сторона вопроса – при неправильном использовании изображения зачастую являются главной причиной замедления сайта и плохого пользовательского опыта.

Правильное использование изображений в интернете подразумевает две вещи:

выбор правильного формата изображений;

оптимизация изображений.

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Но прежде давайте кратко пробежимся по терминологии.

Растровые или векторные изображения

В основе растровых изображений лежит двумерная сетка пикселей. В каждом пикселе хранится цвет и значение прозрачности.

Растровые изображения плохо масштабируются: если увеличить растровое изображение, оно потеряет четкость и качество. Популярные растровые форматы изображений для веб – JPEG, JPG, GIF и PNG.

Ниже представлено два растровых изображения (JPG) с яблоком. Первое изображение в натуральную величину. Второе показывает увеличенную часть первого изображения.

Пример растрового изображения в натуральном размере.

Увеличенная часть растрового изображения.

Обратите внимание на потерю качества в увеличенной версии изображения.

В отличие от растровых изображений векторная графика состоит из линий, фигур, точек маршрутов. Информация о векторных изображениях не хранится в пикселях, она хранится в математический инструкциях по отрисовке, которые никак не связаны с пикселями. Alex Walker очень понятно объяснил разницу на примере SVG – самого популярного формата векторных изображений в сети:

«SVG – это не формат изображения, это больше рецепт изображения.» — Почему JPEG-изображения похожи на яблочный пирог из McDonalds (а SVG нет)

Одно из следствий независимости от разрешения экрана – векторные изображения можно масштабировать под размер контента. Изображения будут четкими, идеально подходят для ретина экранов.

SVG-графика в маленьком масштабе.

Часть увеличенного SVG-изображения.

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

С потерей качества или без потерь (lossy и lossless)

Оба термина lossy и lossless отсылают к техникам сжатия медиа файлов, т.е. изображений, аудио и видео.

Lossy-сжатие: «не восстанавливает цифровые данные до 100% от оригинала. Методы с потерей качества отличаются высокой степенью сжатия, что позволяет уменьшить вес сжатых файлов. Однако часть оригинальных пикселей, звуковых волн и кадров видео удаляются навсегда.» — PCMag.com Encyclopedia

Что это значит на практике: чем сильнее вы сжимаете файл с потерей качества, тем меньше он будет. Получая меньший вес файла, вы необратимо теряете качество. При lossy-сжатии нужно балансировать между маленьким весом файла и качеством.

Вам очень часто встречается формат изображений с потерей качества, это JPEG.

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

В сети легко можно найти lossless-форматы изображений, это GIF и PNG.

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

Первые три формата изображений я опишу ниже (JPG, GIF и PNG), они уже на протяжении долгого времени используются на сайтах. Последние два формата, SVG и webP, не совсем новые, они пока что не популярны. Тем не менее, они как нельзя лучше подходят под требования адаптивности и быстрозагружаемых сайтов, и их популярность значительно выросла.

JPEG

JPEG или JPG – lossy-формат, разработанный Joint Photographic Experts Group. JPG-изображения занимают почти 3% от всех типов контента на сайтах. Почему этот формат так популярен:

формат JPG умеет отображать миллионы цветов, что делает его идеальным кандидатом для отображения фотографий в интернете;

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

так как это lossy-формат, то вы можете использовать сжатие для значительного уменьшения размера файла. В JPG-файлах есть множество уровней сжатия: примерно 60% будет достаточно для изображений в интернете, что-либо выше 75% ухудшает качество изображения;

все устройства с интернетом поддерживают формат JPG, что упрощает использование формата в интернете.

Один заметный недостаток JPG – файлы этого формата не поддерживают прозрачность. Если вы хотите использовать прозрачный фон для наложения изображения на фоновый цвет или текстуру страницы, JPG-изображения не подойдут. Выберите один из вариантов, про которые я расскажу ниже.

GIF

GIF или Graphics Interchange Format – это 8-битный lossless-формат с максимальным количеством цветов, равным 256. Цветовые ограничения делают GIF неподходящим вариантом для отображения фотографий и изображений с широким диапазоном цветов.

Факторы, повлиявшие на такое долгосрочное использование в интернете:

из-за ограничения в 256 цветов размер файлов довольно низкий;

поддерживает прозрачность;

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

хорошо подходит для простых изображений с однотонными цветами, но не подходит для фотографий.

PNG

PNG или Portable Network Graphics – это альтернатива GIF. Формат разработан W3C. Как и GIF, формат использует алгоритм сжатия без потери качества, доступны варианты 8-бит и 24-бит. Оба варианта поддерживают прозрачность. Однако в 24-битном PNG-изображении прозрачность работает на альфа канале, а также красном, зеленом и синем каналах. Поэтому, несмотря на то, что GIF и 8-бит PNG изображения могут быть либо полностью непрозрачными, либо полностью прозрачными, в PNG каждый пиксель изображения предлагает 256 уровней прозрачности.

24-битный вариант PNG можно использовать для:

веб-изображений с различным уровнем прозрачности;

сложных фотографий и графики;

графики, которую требуется часто редактировать и экспортировать: lessless-формат сохранит качество.

В отличие от GIF формат PNG не поддерживает анимацию, а вес файлов может быть довольно большим.

SVG

SVG или Scalable Vector Graphics (масштабируемая векторная графика) – это тип векторных файлов на основе XML. Формат появился в 2001, однако популярность среди веб-разработчиков он получил только недавно. Причина такой запоздалой любви – плохая поддержка SVG в браузерах на протяжении многих лет. С радостью хочу сообщить, что на момент написания статьи SVG поддерживается во всех основных браузерах, но не без различий и багов.

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

Плюсы формата SVG

SVG зачастую весят меньше растровых изображений, особенно после оптимизации под веб и сжатия через gzip;

формат масштабируемый, что обеспечивает четкость на любом разрешении экрана;

SVG-код можно поместить в HTML и сэкономить на HTTP-запросах;

SVG-код можно настраивать через CSS;

SVG-изображения можно анимировать, в том числе отдельные части, как с помощью CSS, так и JS, что очень круто.

Избегайте слишком сложных SVG-изображений, это слегка увеличивает размер файла. И наконец, SVG не применим к фотографиям, здесь лучше подойдут форматы JPG и webP.

WebP

Несмотря на то, что формат появился в 2010, я не ошибусь, если скажу, что webP все еще очень новый формат, который не так известен, как JPG и PNG. Тем не менее, веб у этого формата в крови: он был специально спроектирован для интернета, что делает его крайне интересным.

WebP – формат изображений с открытым исходным кодом, разработанный Google. Ключевые особенности: «WebP – современный формат изображений в интернете, обеспечивающий превосходное сжатие как с потерями, так и без потерь качества… lossless-версии webP изображений весят на 26% меньше PNG. Lossy-версии webP весят на 25-34% меньше сравнимых JPEG изображений… Lossless webP поддерживает прозрачность… за счет 22% дополнительных байт. В случаях, где применимо lossy RGB-сжатие, lossy webP также поддерживает прозрачность, предоставляя 3х меньший размер файла по сравнению с PNG.» — WebP сайт

Крастота webP в том, что он совмещает преимущества JPG и PNG без увеличения размера файла.

На данный момент поддержка формата довольно хорошая: Blink-браузеры поддерживали формат с самого релиза, все-таки webP – создание Google. Для обратной совместимости с браузерами без поддержки, т.е. IE/Edge, Firefox и Safari, народные умельцы придумали обходные решения.

Заключение

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

JPG, GIF и PNG очень популярные форматы, которые используются уже очень долгое время. SVG и webP более новые, интересные альтернативы. SVG отлично подходит для иллюстраций и простых изображений, webP заменяет все ниши применения JPG и PNG.

Вы уже использовали SVG и webP в разработке? Какие сложности у вас возникли? Добились ли вы каких-либо заметных приростов производительности? Пишите в комментариях!

Автор: Maria Antonietta Perna

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Верстка-Мастер. От теории до верстки популярных шаблонов

Изучите современную верстку сайтов с нуля

Подробнее

Лучшие форматы изображений для веб-дизайна и разработки

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

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

Характеристика лучших форматов изображения для веб-дизайна

Публикуя очередной пост в блоге, вы наверняка сталкивались с проблемой, использовать PNG, GIF или JPEG для выбранной картинки. Мы предложим несколько идей, которые помогут уверенно выбирать формат.

Это особенно полезно, если вы планируете провести редизайн сайта.

Формат JPG

Одним из наиболее распространенных форматов изображений в Интернете является формат Объединенной группы экспертов по фотографии (JPG). Он создан в 1986 году, но продолжает использоваться по сей день.

Лучшее в этом формате то, что файл занимает минимум места на диске и значительно ускоряет загрузку сайта. Он также обеспечивает высокий уровень совместимости, а небольшой размер файла гарантирует отсутствие компромиссов в отношении качества.

Для JPG сжатие выполняется с использованием lossy compression (сжатие с потерями). Это значит, что при сохранении изображения происходит потеря качества. Потеря проявляется в мелких деталях, включая текст.

Этот вид потерь называется «артефактами», так как он проявляется в небольших и блочных компонентах. Сжатие JPG оптимизировано для фотографий, где артефакты почти незаметны для зрителя.

Каждый раз, когда ваша картинка сохраняется, количество артефактов продолжает увеличиваться. Лучший способ избежать этого — сохранить фотографию с помощью lossless compression (сжатие без потерь).

Данный формат не обеспечивает поддержку прозрачных фонов, поэтому изображение нельзя наложить на другие компоненты. Но JPG — лучший вариант для сохранения фотографических изображений.

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

Поскольку JPG остается лучшим и самым популярным выбором для сайтов, рекомендуется публиковать в нем картинки в социальных сетях.

В большинстве случаев цифровые фотокамеры и смартфоны сохраняют фотографии в формате JPG. Сомневаетесь? Проверьте свой телефон.

Формат GIF

Еще один широко используемый формат изображений для веб-сайтов — это формат обмена графическими данными (GIF), который появился в 1987 году.

Он помогает избавить вас от боли и страданий при отправке файлов через медленные соединения с низкой пропускной способностью.

В отличие от JPG, GIF сохраняет данные без потерь. Это означает, что GIF содержит все данные и, несмотря на уменьшение веса файла по сравнению с JPG, качество не ухудшается с 256 индексированными цветами.

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

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

Многие веб-дизайнеры предпочитают использовать GIF. Это отличный выбор для мелких цветных изображений. Полноцветные изображения и фотографии сохраняются в GIF с высокой степенью сжатия.

Формат PNG

Портативная сетевая графика (PNG) разработана в 1995 году с целью заменить GIF. Если вы беспокоитесь о размере и предпочитаете работать с крупными картинками, тогда PNG — лучший формат изображений для веб-дизайна.

Одним из наиболее предпочтительных вариантов будет PNG-8, поскольку он поддерживает 256 индексированных цветов и обеспечивает прозрачность.

Как и JPG, формат PNG-24 способен поддерживать более 15 миллионов цветов. Он может вместить как статические изображения, так и анимацию.

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

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

Фактически, PNG является №1 для веб-дизайна и разработки, но когда дело доходит до печати, вам придется туго. Проблема в том, что формат совсем не дружит с четырехцветной печатью.

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

PNG — удобный формат для сохранения скриншотов.

Формат SVG

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

Он позволяет получать четкие картинки любых размеров и разрешений. Сохранение данных происходит без потери качества, как и с форматами GIF и PNG. SVG относится к векторной графике, которая состоит из математически управляемых фигур и кривых, а не из пикселей.

При желании вы можете использовать SVG-анимацию, поскольку он поддерживает прозрачность и содержит комбинацию цветов и градиентов.

С другой стороны, получаются достаточно большие файлы по сравнению с другими форматами изображений в Интернете, в том числе GIF и PNG.

Современные форматы WEBP и HEIC для веб-дизайна

Теперь мы хотели бы познакомить вас с некоторыми недавно созданными форматами WEBP и HEIC, основанными на HEVC. Но начнем с пояснения.

Механизмы, используемые видеокодеками для сжатия потоков, подразделяются на два типа, межкадровый и внутрикадровый. Межкадровый помогает в использовании повторений в кадре, вне зависимости от остальных.

Вы можете применить этот механизм сжатия к статичным изображениям.

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

Эти новые форматы были созданы для соответствия новым стандартам кодирования видео. С ними доступны более серьезные наборы функций.

Формат WEBP

Этот формат изображения был разработан Google в качестве единого веб-формата для многочисленных сфер применения в Интернете.

Он является производным от видеокодека VP8. Среди возможностей WEBP предусмотрено «предсказание» блоков по содержанию ранее декодированных.

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

Но главный недостаток заключается в отсутствии всеобщей поддержки.

До недавнего времени поддержка WEBP была ограничена программным обеспечением Google (браузер Chrome) и нативными приложениями Android.

Недавно было объявлено, что Microsoft Edge и Firefox будут поддерживать WEBP, начиная с 2019 года. Однако Apple, Safari и iOS пока в раздумьях.

Формат HEIC / HEIF

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

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

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

Большинство изображений используют этот контейнер и сжимаются с производной, которая предназначена для изображений с видеокодека h365 / HEVC. Они разработаны с учетом разрешений 4K и 8K, доступных преимущественно на новейших дисплеях.

Кодирование HEVC включает в себя сложные операции, но с меньшим количеством ограничений, чем JPEG.

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