Форматы графических изображений: подробнее о файлах 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 и RAW, иногда к ним добавляется и формат TIFF. В этой статье я расскажу об особенностях этих трех форматов и помогу вам определиться с выбором формата для съемки. Чтобы понять, как образуется тот или иной формат в фотоаппарате, давайте кратко рассмотрим основные этапы формирования изображения, от экспонирования матрицы до записи готового результата на карту памяти.

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

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

Далее производится сжатие информации об изображении. При этом используется алгоритм сжатия с потерями, то есть, происходит необратимое ухудшение качества изображения. Такой файл будет занимать значительно меньше места, но в нем будет содержаться всего 30-40% от исходной информации, зафиксированной сенсором камеры.

Теперь подробнее о каждом формате, его достоинствах и недостатках

Формат JPEG.

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

Достоинства формата: малый размер файла, высокая совместимость со всеми устройствами (изображения можно просмотреть на любом компьютере или мобильном устройстве), полная поддержка всеми интернет-браузерами.

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

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

Формат TIFF

TIFF (Tagged Image File Format)  также является распространенным форматом изображений. Он использует алгоритмы сжатия без потерь, а также может сохранять данные и без сжатия. Файлы формата TIFF по объему значительно больше, чем файлы JPEG. Так как сжатие происходит без потерь либо не происходит вовсе, данный формат обеспечивает более высокое качество изображения и часто применяется для качественной подготовки изображений к печати, особенно большим форматом.

Достоинства формата: высокое качество изображения, использование сжатия данных без потерь

Недостатки формата: очень большой объем файлов, в 8-10 раз больше, чем изображений в формате JPEG. Если используется глубина цвета 16 бит, объем файла увеличивается еще вдвое.

Формат RAW

Файл формата RAW, как мы уже говорили, представляет собой данные с матрицы фотокамеры, оцифрованные процессором и «упакованные» с помощью специального алгоритма в стандартизованный производителем камеры формат и сжатые без потерь, без какой-либо обработки. При этом формат RAW занимает значительно меньше места, чем TIFF, но больше, чем JPEG, и содержит 10 – 16 разрядные данные, в зависимости от модели камеры.

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

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

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

Недостатки формата RAW: большой объем файла, требуются специальные программы для просмотра и редактирования.

В каком формате снимать?

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

Формат TIFF для съемки использовать нецелесообразно — он занимает очень много места на карте памяти, а данных в нем записывается меньше, чем в формате RAW.

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. Поскольку это формат без потерь, можно безопасно редактировать файл, зная, что вы не потеряете информацию при внесении изменений в файл.

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

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

От автора: на март 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.

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

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

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

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

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

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

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

Какие изображения для сайтов использую сегодня

Все изображения для сайтов, подразделяются:

• растровые (пример — JPG, JPEG, GIF, PNG),
• векторные (пример — SVG).

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

То есть при увеличении размера картинки, идёт потеря качества.

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

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

Описание популярных форматов изображения для сайта

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

JPEG

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

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

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

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

PNG

Этот формат использует алгоритм сжатия без потери качества. По количеству цветов и уровню прозрачности доступен в двух видах 8 и 24-бит. Оба поддерживают прозрачность.

8-битный пользуется малой популярностью, а вот 24-битный широко используется для различных изображений на сайте. За счёт прозрачности позволяет создавать комбинированные изображения. Часто используется для создания анимированных кнопок, иконок, css-спрайтов, где необходим эффект прозрачности.

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

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

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

GIF

Это 8-битный формат, поддерживающий 256 цветов, прозрачность и анимацию. За счёт поддержки малого количества цветов, вес файла тоже минимальный.

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

Зато широко используется при создании GIF-анимаций, баннеров, кнопок, иконок и так далее.

В современных сайтах этот формат используется всё реже.

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

SVG

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

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

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

Формат SVG имеет малый вес, отлично масштабируются, обеспечивая чёткость изображения на любом разрешении экрана, поддерживает анимацию, можно управлять через CSS и размещать в HTML, сокращая количество запросов.

WebP

Формат с открытым исходным кодом, разработан Google специально для интернета. Сегодня YouTube использует преобразование миниатюр для видео в формат WebP.

Формат обеспечивает превосходное сжатие и поддерживает прозрачность. Он сочетает в себе преимущества JPG и PNG форматов без увеличения размера файла.

Но, несмотря на преимущества формата, он поддерживается не всем браузерами, например, IE, Edge, Firefox и Safari.

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

Заключение

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

Возможно, когда WebP получит широкую поддержку, мы все перейдём на него и заменим jpg и png на своих сайтах.

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

На сегодня у меня всё, жду ваших комментариев.

С уважением, Максим Зайцев.

Форматы файлов для фотосъемки

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

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

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

Далее производится сжатие информации об изображении. При этом используется алгоритм сжатия с потерями, то есть, происходит необратимое ухудшение качества изображения. Такой файл будет занимать значительно меньше места, но в нем будет содержаться всего 30-40% от исходной информации, зафиксированной сенсором камеры.

Теперь подробнее о каждом формате, его достоинствах и недостатках

Формат JPEG.

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

Достоинства формата: малый размер файла, высокая совместимость со всеми устройствами (изображения можно просмотреть на любом компьютере или мобильном устройстве), полная поддержка всеми интернет-браузерами.

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

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

Формат TIFF

TIFF (Tagged Image File Format)  также является распространенным форматом изображений. Он использует алгоритмы сжатия без потерь, а также может сохранять данные и без сжатия. Файлы формата TIFF по объему значительно больше, чем файлы JPEG. Так как сжатие происходит без потерь либо не происходит вовсе, данный формат обеспечивает более высокое качество изображения и часто применяется для качественной подготовки изображений к печати, особенно большим форматом.

Достоинства формата: высокое качество изображения, использование сжатия данных без потерь

Недостатки формата: очень большой объем файлов, в 8-10 раз больше, чем изображений в формате JPEG. Если используется глубина цвета 16 бит, объем файла увеличивается еще вдвое.

Формат RAW

Файл формата RAW, как мы уже говорили, представляет собой данные с матрицы фотокамеры, оцифрованные процессором и «упакованные» с помощью специального алгоритма в стандартизованный производителем камеры формат и сжатые без потерь, без какой-либо обработки. При этом формат RAW занимает значительно меньше места, чем TIFF, но больше, чем JPEG, и содержит 10 – 16 разрядные данные, в зависимости от модели камеры.

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

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

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

Недостатки формата RAW: большой объем файла, требуются специальные программы для просмотра и редактирования.

В каком формате снимать?

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

Формат TIFF для съемки использовать нецелесообразно — он занимает очень много места на карте памяти, а данных в нем записывается меньше, чем в формате RAW.