Какой формат поддерживает прозрачность

Используем JPEG с прозрачностью

Конечно же, формат JPEG не поддерживает прозрачность, но сама идея использовать JPEG вместо PNG для прозрачных текстур будоражит умы довольно давно. Камрад PaulZi не так давно предложил использовать для HTML формат SVG, в котором хранится само изображение и маска. Jim Studt предлагает использовать EXIF поля в JPEG и хранить там маски, а отображать на веб-странице с помощью Canvas.
Оба метода относительно сложны для использования, да и рассчитаны на веб, потому я остановился на самом простом варианте: хранить отдельно lossy JPEG для RGB и lossless маску в PNG, а совмещать их на этапе получения UIImage в программе. Сразу хочу сказать, что пишу на MonoTouch, потому код привожу на C#, хотя в ObjC это делается почти точно так же, с учетом синтаксиса.

Разделение каналов

Для разделения я использую консольные утилиты ImageMagik.
Эта команда отделяет альфа-канал:
convert file.png -channel Alpha -separate file.mask.png

Следующая команда создает JPEG файл, отбрасывая данные о прозрачности. Что характерно, некоторые другие утилиты (в т.ч. и Photoshop) при конверсии PNG файла в JPEG добавляют к нему некую одноцветную подложку и лишь затем сохраняют в RGB, что дает красивую, но неверную картинку с pre-multiplied alpha.
convert file.png -quality 90 -alpha off file.jpg

Качество полученного файла регурируется параметром quality 90. 90% качества для JPEG это больше, чем Apple ставит для скриншотов программ и фильмов. Думаю, каждый сможет подстроить под свой вкус это значение.

Оптимизация

Маска получается в виде 8-битного Grayscale PNG без прозрачности. Такой формат отлично сжимается через optipng или через веб-сайт www.tinypng.org.
С JPEG ситуация интереснее. Можно было бы ограничиться только заданием качества, но недавно мне попалась замечательная утилита jpegrescan от Loren Merritt, одного из разработчиков ffmpeg и кодировщика x264 (на счет него же есть подозрения, что он является представителем инопланетного разума или кибернетического мозга).
Утилита использует необычный подход: подбирает разные коэффициенты для Progressive сжатия и выбирает наиболее оптимальные. Выигрыш получается от 5 до 15% с идентичным качеством картинки. Собственной страницы у утилиты нет, только топик с обсуждением и сам perl-код: pastebin.com/f78dbc4bc

Чтобы не вводить команды каждый раз вручную, я написал простенький скрипт на bash:

#!/bin/bash basefile=$ maskfile="$.mask.png" jpegfile="$.jpg" convert $1 -channel Alpha -separate $maskfile convert $1 -quality 90 -alpha off $jpegfile optipng $maskfile jpegrescan $jpegfile $jpegfile 

Вот результат работы скрипта:

В моем случае из файла в 1,8Мб получилось два файла на 380Кб и 35Кб.

Склеивание

Само склеивание делается очень просто — загружается две картинки в UIImage, затем создается на их основе CGImage методом WithMask (в ObjC это CGImageRef и initWithMask соответственно), а потом оборачивается в новый UIImage.

 UIImage result; using(UIImage uiimage = UIImage.FromFile(file)) using(UIImage mask = UIImage.FromFile(maskFile))

В реальном проекте я сделал чуть сложнее и проверяю наличие файла *.mask.png и если он отсутствует, то возвращаю обычный UIImage.FromFile().

Профит

Визуально игра не изменилась никак. Задержка загрузки и склеивания текстур на глаз не заметна, потому я и не стал ее замерять. Сам же проект уменьшился на 6 (!!) мегабайт, как в .ipa виде, так и в iTunes и на устройстве.

Скрин из игры в PNG. Никаких артефактов или проблем сжатия/прозрачности не видно.
Немного смущает удвоенное количество картинок в папке проекта, но это можно пережить. Изменения кода минимальные. Для графики интерфейса этот метод не идеален из-за необходимости вручную присваивать UIImage, а не загружать из NIB/XIB, но для собственных контролов или текстур подходит вполне. Даже если JPEG сохранять с 100% качеством, размер полученных файлов может быть меньше, чем изначального PNG без потерь качества.

P.S. ImageMagick и optipng ставятся из портов (MacPorts/Fink/Brew) и называются так же. Скрипт jpegrescan качается с pastebin и использует порт jpeg

• Разработка под iOS
• Обработка изображений

Графические форматы поддерживающие прозрачность

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

Создать интернет магазин
Современная торговля приносящая прибыль.

Продвинуть сайт
Продвижение в поисковых системах и социальных сетях.

Отдел Архитектурной визуализации

Архитектурная мастерская

Отдел 3D и 2D анимации

BALLISTART

• Главная
• Вопросы-ответы
• Графический дизайн

Вопрос:

Какие есть форматы поддерживающие прозрачность поддерживающие прозрачность для веба?

Ответ:

Для веба Вы можете использовать PNG, GIF для растровой графики или SWF (Flash) для векторной графики. Для растровой предпочтительней PNG так как он поддерживает частичную прозрачность и Ваши изображения не будут «обрызганы» по краям.

Мы предлагаем!

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

Создать интернет магазин
Современная торговля приносящая прибыль.

Продвинуть сайт
Продвижение в поисковых системах и социальных сетях.

Отдел Архитектурной визуализации

Форматы изображений для веба

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

Растровые форматы

Для начала рассмотрим форматы, которые относятся к растровой графике: GIF, JPEG, PNG и WebP.

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

GIF (Graphics Interchange Format)

Формат был разработан компанией CompuServe в далёком 1987 для передачи растровых изображений по интернету. GIF имеет цветовую палитру, состоящую из 256 цветов. Алгоритм GIF выбирает 256 наиболее используемых в исходном изображении цветов, а все остальные оттенки создаются путём подмешивания — подбора соседних пикселей таким образом, чтобы человеческий глаз воспринимал их как нужный цвет. По этой причине GIF не подходит для хранения полноцветных изображений и фотографий.

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

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

Таким образом, формат GIF подходит если:

• изображение не многоцветное;
• нужна простейшая прозрачность;
• нужна анимация.

JPEG (Joint Photographic Experts Group)

Формат JPEG получил своё название от объединённого комитета экспертов по фотографии, который и создал этот стандарт в конце 80-х — начале 90-х годов. Он был разработан для сжатия и хранения полноцветных фотографий. Поддерживает более 16 миллионов цветов.

Формат JPEG сжимает изображения с потерей качества. Алгоритм сжатия основан на разбиении исходного изображения на квадраты 8×8 пикселей, и последующей их группировке. Можно получать JPEG изображения очень маленького веса, но только за счёт ухудшения качества картинки, можно получить и очень качественные JPEG, но тогда картинка будет слишком тяжёлой. Поэтому главная задача при работе с JPEG — подобрать такой уровень качества, чтобы вес был небольшой и качество картинки было приемлемым (обычно, это диапазон от 60 до 70, но нужно тестировать на каждой картинке).

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

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

Для третьей картинки мы задали уровень качества 95, из-за чего её вес стал 169 килобайт. Вторая и третья картинка внешне почти неразличимы, однако вторая картинка весит на 104 килобайта легче.

Таким образом, формат JPEG лучше подходит для:

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

PNG (Portable Network Graphics)

PNG является относительно недавним форматом, который был введён как альтернатива для GIF-файлов.

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

Формат имеет две вариации: PNG8 и PNG24. PNG8 может хранить лишь 256 цветов, а PNG24 использует уже более 16 миллионов цветов.

Главная особенность формата PNG — поддержка альфа-прозрачности, то есть каждому пикселю в отдельности можно задать свою степень прозрачности.

Итак, формат PNG подходит для:

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

WebP

WebP — новый формат, созданный и развиваемый с 2010 года компанией Google.

Главная цель этого проекта — ещё больше уменьшить вес при сохранении такого же качества.

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

• сжимает изображения без потерь лучше, чем PNG (на 26% по данным Google);
• сжимает изображения с потерями лучше, чем JPEG (на 25–34% по данным Google);
• поддерживает прозрачность (альфа-канал).

Иногда WebP сжимает изображение даже лучше, чем заявляет Google.

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

Векторные форматы

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

SVG (Scalable Vector Graphics)

SVG переводится как — масштабируемая векторная графика. Формат существует с 1999 года.

Размер объектов SVG намного меньше размера растровых изображений, а сами изображения не теряют в качестве при масштабировании. В отличие от растровых форматов мы можем взаимодействовать с изображениями в формате SVG — при помощи CSS можно изменять параметры графики: цвет, прозрачность или границы, а при помощи JavaScript — анимировать изображение.

SVG поддерживается почти всеми браузерами за исключением Internet Explorer 8 и ниже, но и это можно решить подключением JavaScript-библиотек, например, SVGeezy.

Формат SVG отлично подходит для малоцветных схем, логотипов и иконок, например, таких:

Таким образом, формат SVG подходит если:

• нужно анимировать части изображения;
• изменять цвет элементов изображения;
• необходимо масштабировать изображение без потерь.

Форматы в зависимости от цели использования

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Формат PNG: особенности и нюансы применения

О чем речь? Формат PNG – довольно популярный вариант, основным отличием которого является прозрачность фона. Его история ведется с 1995 года, когда он был разработан в качестве альтернативы GIF.

На что обратить внимание? За 28-летнее использование PNG не потерял актуальности и сегодня поддерживается всеми браузерами и операционными системами. Существует большое количество софта для работы с этим форматом.

В статье рассказывается:

1. Суть формата PNG
2. Плюсы и минусы формата PNG
3. Создание и работа с форматом PNG
4. Программы для работы с форматом PNG
5. Программы для сжатия или конвертации формата PNG

Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.
Бесплатно от Geekbrains

Суть формата PNG

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

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

Прозрачность не является обязательной опцией для PNG. Вы можете использовать этот формат просто как полноцветное изображение и без вырезания фона.

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

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

Плюсы и минусы формата PNG

• Качество изображения не изменяется при любой степени сжатия.
• Удобен для промежуточных версий картинок, так как после редактирования и пересохранения качество не ухудшается.
• Держит высококонтрастное попиксельное изображение экрана на скриншотах без объединения соседних пикселей.
• Использует максимально возможное количество цветов: 256 цветов для веб-графики (PNG-8), 16 миллионов – для полноцветных (PNG-24) и изображений в оттенках серого.
• Поддерживает многоуровневую прозрачность, что позволяет создавать прозрачные градиенты, эффект отбрасывания тени на соседние элементы на веб-странице. Файлы PNG хорошо подходят для логотипов, рисунков и фотографий, если нужно удобно наложить на многоцветные изображения.
• Содержит метаданные (EXIF), которые закрепляют авторские права.
• Сохраняет веб-графику маленького размера, что ускоряет загрузку сайтов.
• Предоставляет возможность работы со слоями.

Узнай, какие ИТ — профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Павел Симонов
Исполнительный директор Geekbrains

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов
Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно
Уже скачали 23671

• PNG сохраняет полноцветные изображения, такие как фото и иллюстрации, большего размера, чем эквивалентные .jpeg, .tiff или .gif.
• Графический формат PNG не годен к анимации, не предназначен для печати, разработан специально для изображений в Сети, не поддерживает цветовую модель CMYK.

Создание и работа с форматом PNG

Предположим, вы загрузили изображение в другом формате из Интернета и хотите преобразовать его в формат PNG. Как это сделать? Рассмотрим процесс создания PNG-изображения в Paint, которая есть на вашем компьютере. Сначала откройте картинку в программе. Затем выберите «Изображение в формате PNG». После этого определите подходящее место для сохранения файла PNG на компьютере.
Эта программа не сохраняет прозрачность в PNG-изображении, поэтому вы можете использовать Photoshop, например, чтобы создать необходимый фон. Очень удобно работать с этим форматом онлайн.

Программы для работы с форматом PNG

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

В основном инструментарий PNG классифицируется по ряду критериев, а именно:

• разработанных для функционирования в операционных системах Windows, Mac и Linux;
• применяемых на мобильных гаджетах.

Существует несколько программных продуктов для Windows, позволяющих открывать и редактировать PNG файлы:

• Movavi Fhoto Editor – это выдающееся приложение для исправления изображений и фотографий в Windows, которое поддерживает файловые форматы PNG.
• Microsoft Paint – программа, которую мы уже упоминали. Она доступна на любом ПК с Windows, осуществляет функции просмотра и конвертации PNG-файлов в другие форматы.
• Artweaver – утилита, обладающая качественными возможностями для исправления различных картинок, включая PNG-формат.
• Adobe Photoshop – программа, которая знакома многим пользователям, она позволяет редактировать изображения на высоком уровне, делать их уникальными и сохранять в формате PNG.

Для вас подарок! В свободном доступе до 29.10 —>
Скачайте ТОП-10
бесплатных нейросетей
для дизайнера
Помогут находить референсы и изображения в 2 раза быстрее
Чтобы получить подарок, заполните информацию в открывшемся окне

Данных приложений достаточно для открытия и исправления изображений в формате PNG. Рассмотрим другие программы для редактирования PNG-файлов на различных устройствах:

• MacPhun ColorStrokes – это быстрое приложение для редактирования PNG-изображений, предназначенное в первую очередь для операционной системы MAC.
• GIMP – простое ПО для создания и исправления картинок PNG и других форматов, работающее в Linux.
• Adobe Photoshop Express для Android – специальное приложение, устанавливаемое на телефоны через App Store или Google Play, которое может отредактировать изображение для блога или социальных сетей.

Конечно, это далеко не все программы. В интернете можете найти еще много похожих приложений.

Программы для сжатия или конвертации формата PNG

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

Дарим скидку от 60%
на обучение «Дизайнер» до 29 октября
Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

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

• Compress JPEG – бесплатный онлайн-инструмент, который обеспечивает сжатие нескольких форматов, включая PNG. Для уменьшения размера файла просто перетащите его на сайт. Compress PNG дополнительно позволяет настраивать процент сжатия, что может уменьшить цветность изображения, если вам нужно сильнее сократить объем.
• Iloveimg – еще один онлайн-инструмент для сжатия файлов PNG. Кроме того, здесь доступен инструмент обрезки, изменения размера, преобразования. После загрузки файла и клика на кнопку «Сжать», приложение автоматически загрузит мини-версию PNG.

Только до 2.11
Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней
Список документов:

ТОП-100 площадок для поиска работы от GeekBrains

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

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

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

Ниже перечислены несколько конвертеров файлов, которые могут помочь:

• FreeConvert предлагает широкий выбор онлайн-инструментов, включая конвертер изображений в формат PNG. Просто загрузите файл с компьютера или облачного хранилища и выберите опцию PNG, чтобы его преобразовать.
• Convertio – это конвертер PNG, который может стать любимым помощником, если вам нужно изменить формат файлов. Convertio работает с изображениями, документами, электронными книгами, векторами и САПР из разнообразного списка расширений. Вы можете конвертировать файлы до 100 МБ, однако если объем превышен, потребуется заплатить небольшую сумму. Инструмент имеет расширение, чтобы упростить задачу.

Мы надеемся, что данная статья помогла вам разобраться в вопросе о том, что такое формат PNG. Он может быть необходим в разных случаях, например, для публикации в блогах, если вы зарабатываете в Интернете, рекламируете товары и услуги. PNG-изображения имеют высокое качество, их можно использовать для создания обложек, коробок, оформления лэндингов. Удачи в вашем творческом процессе!

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