Изменение прозрачности изображения

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

Чем отличается этот инструмент для изменения прозрачности

Как пользоваться инструментом изменения прозрачности изображения

1. Откройте изображение: перетащите JPG, PNG, WebP или GIF в область загрузки, нажмите на неё, чтобы выбрать файл, или вставьте изображение сочетанием Ctrl+V. Изображение обрабатывается в браузере и никуда не загружается.
2. Настройте непрозрачность: перетащите ползунок «Непрозрачность», введите точное значение в процентах или нажмите на миниатюру в шкале, чтобы увидеть каждый уровень на исходном изображении.
3. Выберите фон предпросмотра: переключайте фон между шахматной сеткой, белым, чёрным и выбранным вами цветом, чтобы оценить непрозрачность на том фоне, где будет размещено изображение.
4. Добавьте затухание при необходимости: выберите линейный или радиальный градиент либо растушёвку краёв, затем задайте угол и ширину затухания, а также минимальную непрозрачность.
5. Скачайте результат: выберите PNG или WebP, чтобы сохранить альфа-канал, и скачайте изображение в исходном разрешении. Либо выберите JPG и задайте цвет, на который будет сведена прозрачность.

Какую непрозрачность выбрать?

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

Три вида затухания

• Линейное затухание изменяет непрозрачность в одном направлении, заданном углом. При 90° изображение постепенно исчезает вниз — так часто вписывают фотографию в фон страницы. Ширина затухания определяет, какую часть изображения занимает переход: при 25% большая часть останется непрозрачной, а при 100% переход охватит всё изображение от края до края.
• Радиальное затухание сохраняет непрозрачность в центре и постепенно делает изображение прозрачнее к краям по эллипсу. Объект остаётся чётким, а фон вокруг него растворяется. Такой вариант подходит для мягкой виньетки или круглой аватарки без чёткой границы.
• Растушёвка краёв равномерно затухает со всех четырёх сторон. Поскольку переход зависит от расстояния до ближайшего края, широкое и высокое изображения получают рамку одинаковой толщины. Это удобно, если несколько изображений должны выглядеть одинаково.

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

Где это используют

• Водяные знаки: задайте логотипу 20% непрозрачности, экспортируйте его в PNG и добавляйте поверх фотографий в любом редакторе, не настраивая прозрачность заново.
• Фон слайдов и документов: фотография с непрозрачностью 12% под текстом добавляет глубину и не снижает контраст ниже уровня, нужного для доступности.
• Веб-дизайн и приложения: заранее подготовьте полупрозрачные изображения для наложений, неактивных состояний и слоёв при наведении, чтобы использовать их в CSS без настройки непрозрачности.
• Видео и трансляции: OBS и похожие инструменты обрабатывают альфа-канал PNG напрямую, поэтому значок с непрозрачностью 35% можно наложить на трансляцию без отдельного фильтра.
• Печать и творчество: создавайте бледные фотофоны для приглашений, альбомов и сертификатов. Изображения сохраняются в исходном разрешении, без повторной выборки.
• Сравнение наложением: наложите одно фото на другое, чтобы совместить архитектурные или предметные снимки.

Непрозрачность, прозрачность и альфа-канал — три способа описать одно и то же

Пиксель RGBA содержит четыре байта: красный, зелёный, синий и альфа-канал. Альфа — это не цвет, а значение покрытия: оно показывает, какая часть фона за пикселем должна быть видна. Непрозрачность выражает это значение в процентах, а прозрачность дополняет её до 100%. Поэтому непрозрачность 30%, альфа 77 и прозрачность 70% описывают один и тот же пиксель. Инструмент меняет только байт альфа-канала и не затрагивает красный, зелёный или синий каналы. Поэтому после снижения и повторного повышения непрозрачности исходные цвета точно восстанавливаются.

Есть и ещё одна важная особенность: ImageData в canvas хранится без предварительного умножения цвета на альфа-канал. Это значит, что цветовые каналы сохраняют полные значения, а альфа хранится отдельно. Некоторые конвейеры обработки изображений сначала умножают цвет на альфа-канал. Из-за этого повторное изменение непрозрачности постепенно затемняет края изображения. Хранение без такого умножения позволяет полностью отменить это изменение.

Выбор формата экспорта

Как получить более качественный результат

• Сначала подберите подходящий фон предпросмотра. Если настроить 25% на шахматной сетке, а затем разместить изображение на тёмном фоне, водяной знак может оказаться плохо различимым.
• Сначала используйте шкалу, затем ползунок. Сравнение шести уровней на одном изображении помогает быстрее выбрать подходящий, чем последовательная настройка ползунка по памяти.
• Ширина затухания больше 80% может выглядеть неестественно. Если оставить непрозрачную область хотя бы в 20%, глазу будет за что зацепиться.
• Увеличьте минимальную непрозрачность для текста. При затухании до 0 часть подписи исчезнет. Минимум 15–25% оставит её бледной, но читаемой.
• Если сомневаетесь, экспортируйте в PNG. Он сохраняет качество, поддерживается повсеместно и надёжно сохраняет прозрачность.

Конфиденциальность

Декодирование изображения, изменение альфа-канала и повторное кодирование выполняются в браузере через API HTML5 canvas. Данные изображения не отправляются ни на miniwebtool, ни третьим лицам; файл нигде не сохраняется. Страница продолжит работать, даже если вы отключитесь от интернета. Это особенно важно для изображений, которым часто добавляют водяные знаки: неопубликованных фотографий продуктов, работ клиентов и личных снимков.

Часто задаваемые вопросы

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

Откройте изображение, перетащите ползунок «Непрозрачность» до нужного значения и скачайте результат в PNG. Инструмент перезаписывает альфа-канал каждого пикселя: при непрозрачности 40% в нём сохраняется значение альфа 102 из 255, а каналы красного, зелёного и синего остаются неизменными. Изображение не сводится к белому фону и сохраняет настоящую полупрозрачность при любом дальнейшем размещении.

Почему прозрачное изображение снова выглядит непрозрачным?

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

Какую непрозрачность выбрать для водяного знака?

Для логотипа поверх фотографий обычно выбирают 15–30%: его можно заметить, если присмотреться, но он не отвлекает от изображения. Текстовым водяным знакам нужна немного большая непрозрачность — примерно 25–40%, поскольку тонкие штрихи бледнеют быстрее сплошных фигур. Перед выбором задайте фон предпросмотра, похожий на ваши фотографии: один и тот же водяной знак намного заметнее на белом, чем на тёмном изображении.

Снижение непрозрачности ухудшает качество изображения?

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

Моё изображение загружается на сервер?

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