Jpg поддерживает прозрачность: Используем JPEG с прозрачностью / Хабр

Содержание

Использование флажков «Прозрачность» и «Подложка» в Photoshop Elements

Руководство пользователя
Отмена

Поиск

  1. Photoshop Elements User Guide
  2. Introduction to Photoshop Elements
    1. What’s new in Photoshop Elements
    2. System requirements | Photoshop Elements
    3. Workspace basics
    4. Guided mode
    5. Making photo projects
  3. Workspace and environment
    1. Get to know the Home screen
    2. Workspace basics
    3. Tools
    4. Panels and bins
    5. Open files
    6. Rulers, grids, and guides
    7. Enhanced Quick Mode
    8. File information
    9. Presets and libraries
    10. Multitouch support
    11. Scratch disks, plug-ins, and application updates
    12. Undo, redo, and cancel actions
    13. Viewing images
  4. Fixing and enhancing photos
    1. Resize images
    2. Cropping
    3. Process camera raw image files
    4. Add blur, replace colors, and clone image areas
    5. Adjust shadows and light
    6. Retouch and correct photos
    7. Sharpen photos
    8. Transforming
    9. Auto Smart Tone
    10. Recomposing
    11. Using actions to process photos
    12. Photomerge Compose
    13. Create a panorama
    14. Moving Overlays
    15. Moving Elements
  5. Adding shapes and text
    1. Add text
    2. Edit text
    3. Create shapes
    4. Editing shapes
    5. Painting overview
    6. Painting tools
    7. Set up brushes
    8. Patterns
    9. Fills and strokes
    10. Gradients
    11. Work with Asian type
  6. Guided edits, effects, and filters
    1. Guided mode
    2. Filters
    3. Guided mode Photomerge edits
    4. Guided mode Basic edits
    5. Adjustment filters
    6. Effects
    7. Guided mode Fun edits
    8. Guided mode Special edits
    9. Artistic filters
    10. Guided mode Color edits
    11. Guided mode Black & White edits
    12. Blur filters
    13. Brush Stroke filters
    14. Distort filters
    15. Other filters
    16. Noise filters
    17. Render filters
    18. Sketch filters
    19. Stylize filters
    20. Texture filters
    21. Pixelate filters
  7. Working with colors
    1. Understanding color
    2. Set up color management
    3. Color and tonal correction basics
    4. Choose colors
    5. Adjust color, saturation, and hue
    6. Fix color casts
    7. Using image modes and color tables
    8. Color and camera raw
  8. Working with selections
    1. Make selections in Photoshop Elements
    2. Saving selections
    3. Modifying selections
    4. Move and copy selections
    5. Edit and refine selections
    6. Smooth selection edges with anti-aliasing and feathering
  9. Working with layers
    1. Create layers
    2. Edit layers
    3. Copy and arrange layers
    4. Adjustment and fill layers
    5. Clipping masks
    6. Layer masks
    7. Layer styles
    8. Opacity and blending modes
  10. Creating photo projects
    1. Project basics
    2. Making photo projects
    3. Editing photo projects
  11. Saving, printing, and sharing photos
    1. Save images
    2. Printing photos
    3. Share photos online
    4. Optimizing images
    5. Optimizing images for the JPEG format
    6. Dithering in web images
    7. Guided Edits — Share panel
    8. Previewing web images
    9. Use transparency and mattes
    10. Optimizing images for the GIF or PNG-8 format
    11. Optimizing images for the PNG-24 format
  12. Keyboard shortcuts
    1. Keys for selecting tools
    2. Keys for selecting and moving objects
    3. Keys for the Layers panel
    4. Keys for showing or hiding panels (expert mode)
    5. Keys for painting and brushes
    6. Keys for using text
    7. Keys for the Liquify filter
    8. Keys for transforming selections
    9. Keys for the Color Swatches panel
    10. Keys for the Camera Raw dialog box
    11. Keys for the Filter Gallery
    12. Keys for using blending modes
    13. Keys for viewing images (expertmode)

Прозрачные изображения и изображения с незаметным переходом кромки изображения к фоновому цвету веб-страницы

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

Кнопка веб-страницы без прозрачности (слева) и с прозрачностью (справа)

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

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

При работе с файлами в формате GIF или PNG-8 можно создать области с высокой прозрачностью на краях: все пиксели, прозрачность которых в оригинальном изображении выше 50% становятся полностью прозрачными в оптимизированном изображении, в все пиксели, непрозрачность которых в оригинальном изображении выше 50% становятся полностью непрозрачными в оптимизированном изображении. Применяйте высокую прозрачность на краях в случае, когда вам неизвестен цвет фона веб-страницы или он представляет собой текстурную или узорную заливку. Однако помните о том, что высокая прозрачность на краях может привести к зубчатые границам в изображении.

GIF без высокой прозрачности на краях (слева) и с высокой прозрачностью на краях (справа)

Сохранение прозрачного фона в изображениях в формате GIF или PNG

Формат GIF и PNG-8 поддерживают один уровень прозрачности — пиксели могут быть либо полностью прозрачными, либо полностью непрозрачными. Частичная прозрачность не допускается. (И наоборот, формат PNG-24 поддерживает многоуровневую прозрачность, т. е. пиксели в изображении могут иметь до 256 уровней непрозрачности, начиная с полной прозрачности и заканчивая полной непрозрачностью.)

  1. Откройте или создайте изображение, которое содержит прозрачные области, и выполните команду «Файл» > «Сохранить для Web».

  2. В диалоговом окне «Сохранить для Web» выберите «GIF», «PNG-8» или «PNG-24» в качестве формата оптимизации.

  3. Установите флажок «Прозрачность».

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

Создание изображения с незаметным переходом кромки изображения к фоновому цвету веб-страницы в формате GIF или PNG

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

  1. Откройте или создайте изображение, которое содержит прозрачные области, и выполните команду «Файл» > «Сохранить для Web».

  2. В диалоговом окне «Сохранить для Web» выберите «GIF», «PNG-8» или «PNG-24» в качестве формата оптимизации.

  3. В окне сохранения в формате «GIF» и «PNG-8» выполните одно из следующих действий.

    • Чтобы полностью прозрачные пиксели оставались прозрачными, а частично прозрачные пиксели смешивались с цветом подложки, установите флажок «Прозрачность». Этот параметр предотвращает возникновение ореола, который часто имеет место пир размещении изображения со сглаживанием на фон веб-страницы, отличающийся от фона изображения. Этот флажок также предотвращает зазубренность краев областей с высокой прозрачностью.

    • Чтобы полностью прозрачные пиксели заполнялись цветом подложки, а частично прозрачные пиксели смешивались с цветом подложки, снимите флажок «Прозрачность».

  4. Выберите один из вариантов заполнения фона:

    • «Без фона», «Цвет, выбранный пипеткой» (для использования пипетки для выбора цвета),

    • «Белый», «Черный» и «Произвольный» (для выбора цвета на палитре «Выбор цвета»).

Создание файлов в формате GIF или PNG-8 с высокой прозрачностью на краях

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

  1. Откройте или создайте изображение, которое содержит прозрачные области, и выполните команду «Файл» > «Сохранить для Web».

  2. В диалоговом окне «Сохранить для Web» выберите «GIF» или «PNG-8» в качестве формата оптимизации.

  3. Установите флажок «Прозрачность».

  4. Выберите из списка вариантов заполнения фона параметр «Без фона» для отмены использования цвета подложки для заполнения фона.

Создание изображения с незаметным переходом кромки изображения к фоновому цвету веб-страницы в формате JPEG

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

  1. Откройте или создайте изображение, которое содержит прозрачные области, и выполните команду «Файл» > «Сохранить для Web».

  2. В диалоговом окне «Сохранить для Web» выберите «JPEG» в качестве формата оптимизации.

  3. Выберите один из вариантов заполнения фона: «Без фона», «Цвет, выбранный пипеткой» (для использования пипетки для выбора цвета), «Белый», «Черный» и «Произвольный» ( для выбора цвета на палитре «Выбор цвета»).

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

Справки по другим продуктам

  • Добавление слоев
  • Оптимизированные форматы файлов для веб-страниц
  • Формат GIF
  • Формат PNG-24
  • Формат PNG-8
  • Формат JPEG

Вход в учетную запись

Войти

Управление учетной записью

3 способа конвертировать изображения JPG в PNG с прозрачным фоном

Зачем вам нужно конвертировать изображения JPG в формат PNG? В большинстве случаев вы пытаетесь получить прозрачный фон изображения. На самом деле, вам вообще не нужна мощная программа для редактирования фотографий. В этой статье мы поделимся с вами четырьмя способами конвертировать JPG в PNG с прозрачным фоном на Windows и Mac. Так что вы можете делать логотипы и многое другое без фона и позволить аудитории сосредоточиться на основном объекте на ваших изображениях.

  • Часть 1: Самый простой способ конвертировать JPG в PNG в прозрачном режиме онлайн
  • Часть 2. Преобразование JPG в прозрачный PNG на рабочем столе
  • Часть 3. Часто задаваемые вопросы о преобразовании JPG в PNG

Часть 1: Самый простой способ конвертировать JPG в PNG в прозрачном режиме онлайн

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

Шаг 1:

О компании https://www.aiseesoft.com/online-bg-remover/ в веб-браузере, чтобы открыть веб-страницу.

Шаг 2:

Нажмите Загрузить портрет кнопку, найдите целевое изображение JPG и загрузите его.

Шаг 3:

После загрузки JPG веб-приложение распознает основной объект и удалит фон с помощью технологии искусственного интеллекта. Вы также можете уточнить край с помощью инструмента «Кисть».

Шаг 4:

Нажмите Скачать кнопку, чтобы завершить преобразование JPG в PNG с прозрачным фоном.

Дальнейшее чтение

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

Часть 2. Преобразование JPG в прозрачный PNG на рабочем столе

Если у вас нет подключения к Интернету, вам понадобится программа для редактирования фотографий, чтобы сделать JPG прозрачным. Хорошей новостью является то, что и в Windows, и в Mac есть встроенное приложение для редактирования фотографий соответственно.

Способ 1: как конвертировать JPG в прозрачный PNG в Windows 10

MS Paint 3D — это встроенный фоторедактор в Windows 10 и более поздних версиях. Это позволяет сделать JPG прозрачным без дополнительного программного обеспечения. К сожалению, это приложение недоступно для старых ПК. Вот шаги ниже:

Шаг 1:

Найдите файл JPG в проводнике, щелкните его правой кнопкой мыши и откройте с помощью Paint 3D.

Шаг 2:

Выберите Кисти инструмент в строке меню и выберите Волшебный выбор. Переместите рамку выбора, чтобы закрыть основной объект. Затем приложение обнаружит и выберет объект внутри коробки.

Шаг 3:

Нажмите Download кнопка с правой стороны. Проверить Фон автозаполнения, нажмите Добавитьи ударил Готово.

Шаг 4:

Выделив объект, переместите его за пределы фона. Затем выберите фон с помощью Выберите инструмент и щелкните значок Удалить кнопку, чтобы удалить его. Затем выберите объект и переместите его на белый холст.

Шаг 5:

Перейдите в холст меню на верхней ленте и включите Прозрачный холст на правой стороне. Теперь вы делаете JPG прозрачным.

Шаг 6:

Если вы довольны результатом, переходите к Меню на верхней ленте. Выбирать Сохранить как и затем выберите Фото товара.

Шаг 7:

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

Способ 2: как конвертировать JPG в прозрачный PNG на Mac

Когда дело доходит до прозрачности JPG на Mac, доступно встроенное приложение Preview. Многие люди используют Preview в качестве фоторедактора. Он включает альфа-канал, поэтому вы можете быстро сделать прозрачное изображение.

Шаг 1:

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

Шаг 2:

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

Шаг 3:

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

Наконечник: Вы можете увеличить изображение, чтобы уточнить выбор.

Шаг 4:

Нажмите Удалить или относительную клавишу на клавиатуре, пока весь фон покрыт красным цветом. Или выберите Порез в Редактировать меню, чтобы сделать JPG прозрачным фоном.

Шаг 5:

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

Шаг 6:

Когда вы закончите, перейдите к Файл в верхней строке меню и выберите Экспортировать. В диалоговом окне экспорта введите имя файла в Экспортировать как поле, установите папку местоположения в где коробка, опустите Формат вариант и выберите PNG. Установите флажок рядом с Альфа, и нажмите Сохраните кнопку.

Часть 3. Часто задаваемые вопросы о преобразовании JPG в PNG

Является ли JPG прозрачным?

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

Почему мои изображения PNG не прозрачны?

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

Как узнать, прозрачно ли изображение?

Во-первых, только часть форматов изображений поддерживает прозрачность, например PNG, GIF, RAW, EPS, WebP, JPEG 2000, TIFF, BMP и TGA. Кроме того, вы можете узнать информацию о прозрачности с помощью фоторедактора, такого как GIMP или Photoshop.

Заключение

Теперь вы должны освоить как минимум три способа преобразования JPG в PNG с прозрачным фоном на рабочем столе или в Интернете. Встроенный Paint 3D может помочь вам удалить фон из JPG и сохранить результат в формате PNG. Кроме того, приложение Preview поможет вам добиться желаемого эффекта в Mac OS X. Aiseesoft Free Background Remover Online — лучший вариант для выполнения работы онлайн. Если у вас есть лучшие предложения, пожалуйста, запишите их ниже.

Что вы думаете об этом посте.

  • 1
  • 2
  • 3
  • 4
  • 5

Прекрасно

Рейтинг: 4.9 / 5 (на основе голосов 146)Подпишитесь на нас в

Оставьте свой комментарий и присоединяйтесь к нашему обсуждению

png — Прозрачность в формате JPEG

спросил

Изменено
2 года, 3 месяца назад

Просмотрено
7к раз

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

Кто-нибудь знает, как добиться этого, например, с помощью PHP или JavaScript?

  • png
  • jpeg
  • прозрачность

6

Нет. Вы не можете этого сделать. Файлы JPG не поддерживают альфа-каналы и не имеют возможности обозначать определенные цвета как прозрачные (стиль GIF).

0

С этим связано несколько проблем, и все они связаны с тем, что JPEG является форматом сжатия с потерями. Формат JPEG оптимизирован для естественных изображений, а острые края будут размыты. Если вы предполагаете, что определенный пиксель должен иметь значение #d67fff, нет гарантии, что после преобразования цвета, FDCT, квантования, IDCT и преобразования цвета пиксель все еще будет иметь это значение. Также существует большая вероятность того, что это значение пикселя появится в областях, которые вам не нужны.

1

Нет. JPEG не поддерживает прозрачность и вряд ли будет поддерживать ее в будущем.
скоро. http://www.faqs.org/faqs/jpeg-faq/part1/section-12.html

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

Я считаю, что вы можете использовать 8-битный пользовательский формат png, это сэкономит вам много места. В противном случае 24-битный PNG — ваш единственный вариант высокого цвета.

Вы можете преобразовать изображение в SVG, содержащее информацию о цвете в формате JPEG и альфа-канал в виде маски оттенков серого. Вот инструмент, который я написал для этого https://github.com/igrmk/transpeg

.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Изображение

JPEG с прозрачностью [2 ответа]0001

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

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

РЕДАКТИРОВАТЬ: я нашел эту страницу, описывающую изображение JPEG с прозрачностью. Кто-нибудь знает, есть ли удобный способ создавать файлы в этом формате? Широко ли это поддерживается?

  • прозрачность
  • jpeg
  • непрозрачность
  • альфа

2

Да, вы можете это сделать. Формат JPEG позволяет обмениваться форматами файлов изображений

  • Определение цветового пространства
  • Регистрация подвыборки компонентов
  • Определение соотношения сторон пикселя

JPEG/Exif чаще всего используется для фотографии, а JPEG/JFIF чаще всего используется для хранения.

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

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

7

Устаревший ответ

Если ваш браузер не поддерживает холст, вы не можете использовать JPEG с прозрачностью.
Вам нужно будет придерживаться PNG или GIF.

2

Вы также можете использовать SVG для объединения JPG с альфа-каналом, как описано здесь.
Вам нужно будет встроить SVG в HTML, иначе он не будет работать во всех браузерах.
Кроме того, IE8 не поддерживается.

Встроенный код svg будет выглядеть так:

  1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http:// www.w3.org/1999/xlink" viewBox="0 0 560 1388">
  <определения>
    <маска>
      <изображение xlink:href="img/can-top-alpha.png" />
    
  
  

 

Исходный формат JPEG не предусматривает альфа-канал. Однако вы можете создать файл PNG. Он будет работать в IE7+ и других «современных» браузерах.

Формат «JPEG 2000» поддерживает прозрачность , но, несмотря на название, это действительно совершенно новый формат кодирования изображений. Он поддерживается только Safari.

1

В настоящее время JPEG не поддерживает прозрачность.

Вы можете переключиться на изображения PNG , чтобы получить либо 1 бит, либо 8 бит прозрачности (или GIF , который поддерживает только 1 бит, т.е. прозрачный или непрозрачный) .

Вы также можете переключиться на WebP , механизм которого аналогичен JPEG. Он поддерживает сжатие с потерями/без потерь, прозрачность и анимацию.

3

Я все еще ищу такое же решение.

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

Использование jpeg для изображения и png для маски значительно уменьшит размер, но увеличит количество файлов (2 ИЗОБРАЖЕНИЯ+АЛЬФА вместо 1 ИЗОБРАЖЕНИЯ с АЛЬФА).

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

Любое найденное мной решение является прототипом. Но вы должны проверить это:

Маски CSS3
http://www.webkit.org/blog/181/css-masks/

И комбинация из двух файлов
http://blog. jackadam.net/2010/alpha-jpegs/

Планируется, что JPEG XL будет поддерживать прозрачность. Из проекта конкурса предложений по кодированию изображений следующего поколения (JPEG XL):

Деятельность по кодированию изображений следующего поколения направлена
стандарт кодирования, который предлагает:

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

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

Основные требования

Поддержка кодирования альфа-канала/прозрачности

4

С технической точки зрения JPEG поддерживает тысячи каналов даже в 12-битном формате, а не только в 8-битном. Интерпретация данных определяется оболочкой JFIF или SPIFF.

This entry was posted in Популярное