Однажды я отправил конвертированный логотип на сайт клиента, и он вернулся с черным прямоугольником, где раньше был прозрачный фон. Я преобразовал PNG в JPEG, не думая об этом. Странная часть заключалась в том, что я ожидаемый белый - каждая статья, которую я читал, говорила прозрачность & quot; становится белым. & quot; он стал черным, и я потратил двадцать минут, предполагая, что мой код был сломан, прежде чем я прочитал спецификацию HTML и узнал, что браузер делает именно то, что ему сказали.
Это честная тема этого руководства. выше Конвертер формата изображения на Toolz.dev тонкая обертка над браузером's собственный холст кодер.Это дает ему реальные преимущества - ничего выгружает, it's мгновенно, он работает в автономном режиме после загрузки - и реальные ограничения, что большинство "преобразовать любое изображение в любой формат" страницы не признаются. я построил этот, так что I' расскажет вам обе половины.
TL;DR: выше Конвертер формата изображения Делает любое изображение, которое может открыть ваш браузер, и перекодирует его как PNG, JPEG или webp- эти три, и только эти три. Выхода AVIF, GIF или SVG нет, потому что инструмент использует брезентовый кодер browser's и это то, что поддерживает холст. Выберите цель, перетащите ползунок качества (только JPEG и WebP - PNG игнорирует его), скачайте. две вещи, которые нужно знать, прежде чем конвертировать: Прозрачность композитов на черный цвет, когда вы нацелены на JPEG, по спецификации и Метаданные EXIF удаляются При каждом преобразовании, потому что холст перекодирует только пиксели. Чтобы уменьшить файлы, соедините его с имиджевый компресс и тот Изменение размера изображения инструмент
Что на самом деле поддерживает этот конвертер?
Давайте сначала найдем область, потому что именно здесь большинство форматов направляют перепроданность.
Вход: Сборщик файлов принимает image/*, и файл загружается в равнину <img> элемент. так что если ваш браузер может отображать его, инструмент может читать его - PNG, JPEG, WebP, GIF, BMP, AVIF, а в большинстве современных браузеров, SVG.
Выход: PNG, JPEG, WebP. Три кнопки. Это список.
Причина не лень, это платформа. Инструмент рисует ваше изображение в <canvas> и звонки canvas.toBlob(callback, type, quality), йо- HTML Living Standard требует, чтобы каждый браузер поддерживает image/png для этого вызова и оставляет другие форматы необязательными; на практике, image/jpeg а image/webp поддерживаются повсюду и image/avif кодирование не. нет браузер API для записи AVIF или GIF с холста. сайт, который предлагает вам выход AVIF, либо отправляет кодировщик WebAssembly (сотни килобайт загрузки), либо - гораздо чаще - загружает ваше изображение на сервер. Этот инструмент также не делает этого.
Итак, вот честная таблица сравнения, Tool-First:
| Вы хотите | этот инструмент | почему |
|---|---|---|
| PNG → JPEG | да | холст кодирует image/jpeg |
| PNG → Вебп | да | холст кодирует image/webp |
| JPEG → Вебп | да | Самая полезная конверсия здесь |
| Вебп → PNG/JPEG | да | Для инструментов, которые до сих пор не могут читать webp |
| AVIF → WebP | Да (Авиф на только) | Браузер декодирует avif; не может его кодировать |
| что-нибудь → авиф | нет | Кодировщик AVIF Canvas не существует |
| Анимированный GIF → Анимированный webp | нет | выше <img> Дает холст один кадр |
| Что-нибудь → SVG | нет | SVG — вектор, это растровый конвейер |
| Пакет из 200 файлов | нет | по одному файлу за раз |
Если вам нужен AVIF или анимированный WebP, используйте squoosh Локально, cwebp/avifenc из командной строки или шага изображения конвейера сборки. Я лучше отправлю тебя куда-нибудь полезное, чем притворяюсь.
Почему JPEG делает мой прозрачный фон на черном?
Потому что спецификация так и говорит, и я узнал это только после электронной почты клиента.
JPEG не имеет альфа-канала. Когда вы просите холст сериализовать в формате, который не поддерживает альфа, уровень жизни в HTML явный: растровое изображение должно быть сложено в сплошной черный фон перед кодировкой. Не белый. черный Chrome, Firefox и Safari — все это следуют за этим, поэтому поведение является последовательным, и почему оно удивляет всех ровно один раз.
Итак: Преобразование прозрачного логотипа PNG в JPEG даст вам черный ящик за ним. каждый раз. Это не ошибка в инструменте, это платформа, а платформа не исправляет.
Что делать вместо этого:
- Сохраняйте прозрачность? мишень png или webp, йо- Оба несут альфа. WebP обычно будет меньшим из двух.
- Нужен JPEG конкретно? Сгладьте изображение на цвет фона, который вы действительно хотите в редакторе, сначала, к тому же конвертировать
- Только конвертировать фото? На фотографиях нет прозрачности, так что это никогда не всплывает. конвертировать.
Это самый распространенный способ, которым люди повреждают изображение с помощью конвертера, и его стоит усвоить: Альфа - это свойство формата, а не вашего файла. Выбор JPEG — это выбор альфа-канала.
Что еще теряется в перекодировании холста?
Холст содержит пиксели. Просто пиксели. Все остальное в вашем исходном файле отбрасывается при перекодировании браузера, и это вылавливает людей:
Эксиф ушел. Марка и модель камеры, объектив, экспозиция, дата захвата, поля авторского права и GPS-координаты все исчезают. это выигрыш конфиденциальности случайно - преобразование фотографии телефона перед публикацией он лишает место, в котором он был сделан - но если вы ' архивист или вам нужно поле авторских прав, чтобы выжить, не запускать оригиналы через любой конвертер на основе холста. Преобразовать копию.
Цветовые профили сплющиваются. Изображение, помеченное широкополюсным профилем, таким как Display P3 или Adobe RGB, тянется к холсту, который на практике рассматривает его как sRGB. В веб-изображениях это то, что вам нужно. Для печатных работ это не так.
Анимация сворачивается на один кадр. выше <img> Элемент руки холст любой кадр показывает. Запишитесь на двенадцать секунд анимированного GIF, и вы получите один кадр. Инструмент не предупреждает вас об этом, что я считаю подлинным грубым краем, а не особенностью.
Все остальное перекодируется из декодированных пикселей. Что подводит нас к одному правилу, которое важнее всего.
Что такое потеря генерации и как избежать ее?
Каждый раз, когда вы сохраняете формат с потерями, кодер выбрасывает данные. Выбрасывайте данные, расшифровывайте их и выбрасывайте больше, а повреждения урона. Это потеря поколения, и это причина, по которой ваши шаблоны мемов выглядят так, как будто они были отправлены по факсу.
Правило короткое: Всегда конвертируйте из лучшего оригинала, который у вас есть, а из конвертированной копии.
Конкретно, JPEG → WebP → JPEG хуже, чем оригинальный JPEG, дважды. Первые артефакты кодирования рассматриваются как реальная деталь изображения с помощью второго кодирования, который добросовестно тратит на их сохранение бит. Если у вас есть необработанный файл или экспорт PNG, начните с этого.
Есть следствие, которое заставляет людей сбивать с толку: Преобразование JPEG в PNG не восстанавливает качество. PNG не имеет потерь, поэтому он прекрасно сохранит ваше изображение, включая каждый артефакт сжатия, уже впеченный в пиксели. Вы получаете то же самое поврежденное изображение в файле в три или четыре раза больше. PNG-from-JPEG стоит этого только как промежуточный шаг, когда вы & # 39; собираетесь выполнить множество раундов редактирования и хотите избежать повторного сжатия при каждом сохранении.
Какой формат мне на самом деле выбрать?
Пропустите таксономию формата, вот решение в том порядке, в котором я его действительно принимаю.
Это фотография? Вебп в 80–85. Если что-то в вашем конвейере не может читать WebP, JPEG - 80–85.
Есть ли в нем прозрачность? Вебп. png, если вам нужна максимальная совместимость.
Это скриншот, макет пользовательского интерфейса, диаграмма или что-то с текстом и плоским цветом? PNG, или WebP. JPEG's дискретное косинусное преобразование размазывает острые края в видимый комариный шум вокруг надписей - он был разработан в конце 1980-х годов для фотографий непрерывного тона (формат стандартизирован как ITU-T T.81/ISO/IEC 10918-1), а текст - это именно тот контент, с которым он обращается хуже всего.
Это логотип или значок, которым вы управляете источником? Ни - используйте SVG, и don't вообще пропустите его через растровый преобразователь.
Для спецификаций, стоящих за ними: PNG — это ИСО/МЭК 15948, а WebP наконец-то был опубликован в виде RFC 9649 в 2024 году, через четырнадцать лет после того, как Google отправил его. По размеру, Google' собственное сравнительное исследование показывает, что потери WebP примерно на 2534% меньше, чем у JPEG при эквивалентном SSIM, а потери WebP примерно на 26% меньше, чем у PNG. Это номера поставщика и #39;s корпус - относитесь к ним как к сильному намеку, а не как к обещанию относительно вашего конкретного изображения. Причина, по которой I' мне удобно цитировать их, заключается в том, что они ' достаточно точно соответствовали моим результатам на реальных скриншотах и фотографиях на протяжении многих лет. Ваши результаты могут отличаться, поэтому инструмент показывает вам размер источника перед конвертацией.
Как преобразовать изображение на Toolz.dev?
Шаг 1: Откройте конвертер
ПЕРЕЙТИ К Конвертер формата изображения, йо- Ничего не ставить, нет аккаунта.
Шаг 2: Загрузите свое изображение
Щелкните область загрузки и выберите файл. Он загружается в ваш браузер через URL-адрес объекта - файл никогда никуда не отправляется. You'll увидеть имя файла и его размер.
Шаг 3: Проверьте считывание формата
Инструмент показывает Текущий → цель, йо- "Кукатое" читается из MIME файла типа, поэтому .jpg Файловые отчеты как JPEG, йо- Полезная проверка здравомыслия, когда кто-то переименовал расширение файла, не преобразовывая его, что происходит больше, чем вы думаете.
Шаг 4: Выберите свою цель
PNG, JPEG или WebP.
Шаг 5: Установите качество - если оно применимо
Ползунок качества (1–100, по умолчанию 90) Появляется только для JPEG и WebP, йо- Это намеренно: PNG не потерь и canvas.toBlob Игнорирует качественный аргумент для image/png, поэтому показ слайдера, который ничего не делает, было бы ложью.
Для чего его установить: 90 - это по умолчанию и почти неотличимо от оригинала для большинства контента. 80 北85 - это то место, где я на самом деле работаю - значительно меньше, все еще чисто. Ниже 60 you' увидим это на фотографиях и на чем угодно с текстом you' увидим гораздо раньше.
Шаг 6: конвертировать и скачивать
бить Конвертировать & amp; Загрузить, йо- Кодировка происходит на вашем компьютере, и файл сохраняется как converted_<original-name>.<ext>. Размеры точно сохранены - конвертер пропускает ваше изображение и #39;s собственную ширину и высоту, поэтому этот шаг меняет кодировку и ничего больше.
Перевести или сжать - какой мне нужен?
Люди тянутся к конвертеру, когда им нужен файл меньшего размера, и часто это не тот инструмент. Три разные работы, три разных инструмента:
| мишень | стрелка | Что меняется |
|---|---|---|
| Изменить кодировку | конвертер формата | Формат, качество |
| Тот же формат, меньший файл | имиджевый компресс | Только качество |
| Меньше пикселей | Изменение размера изображения | размеры |
И самая большая победа почти всегда пропускается. Если вы обслуживаете фотографию 4000×3000 в макете шириной 1200px, Изменение размера бьет каждый выбор формата вместе- вы 'выбрасываете 90% пикселей, которые браузер собирался уменьшить и все равно сбросить. Сначала измените размер, затем преобразуйте. Делать это в таком порядке обычно занимает 4 МБ PNG менее 200 КБ, и никакое умное выделение формата на полноразмерном оригинале не приближается.
Еще одна привычка, которую стоит выработать: сохраните свои оригиналы. Архивируйте мастера без потерь, генерируйте производные потери для распространения. Когда наконец прибудет Avif-Everywhere или следующий формат после него, вы будете реэкспортировать из чистых источников, а не сожалеть о том, что вы можете увеличить масштаб.
Часто задаваемые вопросы
Какой формат изображения лучше всего подходит для сайтов?
WebP, для большинства контента. It's меньше JPEG для фотографий и меньше, чем PNG для графики, поддерживает прозрачность, и каждый текущий браузер читает его. Safari был последним противником и добавил поддержку в версии 14. AVIF сжимается еще лучше, но вы можете 't производить его в холсте браузера; вам нужен этап сборки или настольный кодер.
Может ли этот инструмент преобразовать мое изображение в avif?
нет , йо- Конвертер выводит только PNG, JPEG и WebP, потому что он использует кодер холста, и ни один браузер не может кодировать AVIF с холста. Ваш браузер может декодировать Avif, так что вы можете преобразовать файл AVIF на WebP или PNG здесь - только не в другом направлении. Для вывода AVIF используйте кодер командной строки, например avifenc Или конвейер изображений вашей структуры.
Почему мой прозрачный png получил черный фон после преобразования в jpeg?
Поскольку JPEG не имеет альфа-канала, а спецификация HTML говорит, что холст сериализует в формате без поддержки альфа, он должен составлять изображение на сплошном черном фоне. Это поведение, не зависящее от спецификаций, а не ошибка, и в каждом браузере одинаково. Вместо этого конвертируйте в PNG или WebP, если вам нужна сохранение прозрачности.
Удаляет ли преобразование изображения свои данные EXIF?
Да - все это, включая GPS-координаты, настройки камеры и дату захвата. Инструмент рисует ваше изображение на холсте и повторно кодирует пиксели, а холст не содержит метаданных. Это & # 39; полезно, если вы & # 39; повторно удаляете данные о местоположении перед публикацией фотографии, и возникает проблема, если вам нужны метаданные, поэтому в любом случае сохраните непреобразованный оригинал.
Могу ли я преобразовать анимированный GIF в анимированный webP?
Не с этим инструментом. он загружает ваше изображение в <img> элемент и захватывает один кадр на холсте, поэтому анимированный GIF выходит как одно неподвижное изображение. для анимированного WebP требуется настоящий многокадровый кодер - использование gif2webp Из инструментов Google WebP или конвертировать анимацию в MP4, которая будет значительно меньше, чем любой другой.
Улучшит ли преобразование JPEG в PNG?
Нет. PNG без потерь, поэтому он сохраняет именно то, что он 's задал - включая артефакты сжатия, уже впеченные в пиксели JPEG's. Вы получаете идентичное изображение в гораздо большем файле. потерянные данные теряются; никакое изменение формата не возвращает его.
Есть ли ограничение на размер файла?
Никакого жесткого ограничения не применяется Практический потолок является вашим устройством & #39;s памяти, так как все изображение декодируется в битовую карту холста на примерно ширине × высоте × 4 байт - фото 8000 × 6000 нуждается около 192 Мб оперативной памяти в качестве необработанных пикселей, прежде чем кодирование даже начинается. браузеры рабочего стола обрабатывают типичный вывод камеры без жалоб; старые телефоны могут бороться с очень большими файлами.
В чем разница между PNG и JPEG?
JPEG имеет потери и создан для фотографий: он отбрасывает мелкие детали для доступа к небольшим файлам и не имеет прозрачности. PNG не потерь и создан для графики, скриншотов и логотипов: он сохраняет каждый пиксель в точности и поддерживает прозрачный фон за счет больших файлов для фотографий. Вы можете конвертировать между ними здесь, но помните, что прозрачный PNG-файл, сохраненный в формате JPEG, получает солидный фон, поскольку JPEG не имеет альфа-канала.
Как бесплатно конвертировать изображение в webp?
Загрузите PNG или JPEG, выберите WebP в качестве выходного формата, установите качество, если вам нужен файл меньшего размера, и загрузите - он бесплатный и полностью работает в вашем браузере. WebP обычно является преобразованием, которое стоит сделать для Интернета, поскольку он меньше, чем JPEG и PNG, но при этом поддерживает прозрачность и читается каждым текущим браузером.
Мое изображение загружается на сервер?
Нет. Файл читается локально с URL-адресом объекта, декодируется вашим браузером, перекодируется вашим браузером 's холстом и сохраняется вашим браузером. Вы можете убедиться в этом самостоятельно: откройте DevTools, перейдите на вкладку "Сеть" и преобразуйте изображение - вы' не увидите загрузки. После загрузки страницы преобразование работает с отключением Wi-Fi.
короткая версия
Каст для браузера — хороший, честный конвертер изображений для трех форматов и плохой для всего остального. В webp PNG, JPEG и WebP это мгновенно, приватно и бесплатно, и это касается преобразования, которое на самом деле имеет значение для Интернета: ваши фотографии в webp. Это не поможет, и я лучше так могу сказать, чем позволить вам узнать с черным прямоугольником на главной странице клиента.
Прежде чем что-либо конвертировать, спросите, нужна ли вам прозрачность (тогда не JPEG), нужны ли вам метаданные (тогда сохраняйте оригинал) и не слишком ли много пикселей (тогда же пиксели) менять размер первый). Сделайте эти три правильно, и выбор формата — самая простая часть.
выше Конвертер формата изображения здесь. Для остального рабочего процесса изображения есть имиджевый компресс, Изменение размера изображения инструмент и - для вырезов на плоском фоне - Фоновое средство для удаления, йо- более широкая картина находится в Руководство по инструментам изображения и тот Руководство по сжатию изображений, йо-
