Конвертер картинки в HTML

IMG2HTML превращает JPG, PNG или WebP с веб-страницей, экраном приложения или даже бумажным наброском в один HTML-файл со стилями на Tailwind CSS. Структура, текст, цвета и иконки собираются заново как код, который можно править, а не вставляются картинкой.

Настоящий текст, заголовки, кнопки и списки в том порядке, в каком они идут на картинке.
Классы Tailwind для отступов и цветов, Font Awesome для иконок, заглушки вместо фотографий.
Редактор, где можно менять результат запросом и экспортировать в React, Vue или Angular.

Конвертировать картинку с ИИ Посмотреть 4 реальных примера

Каждая конвертация тратит один кредит. Минимальный тариф: пробный пакет на 3 кредита; см. цены.

Бесплатно, сразу и без аккаунта: извлеките текст картинки в простой HTML-файл. Работает в браузере через OCR; структуру страницы не воссоздаёт.

Бесплатно: картинка в HTML (только текст)

Загрузите картинку

Перетащите сюда скриншот или нажмите, чтобы загрузить

Форматы: JPG, PNG, WebP

Язык скриншота:

До и после: четыре реальные конвертации

Каждую картинку ниже мы отправили в IMG2HTML 23 сентября 2026 г. и открыли полученный HTML в Chrome, не меняя ни строчки. Скриншот настоящий, это снимок upload-post.com, нашего соседнего продукта; фото вайрфрейма, макет приложения и фрейм дизайна сделаны для этой страницы генератором изображений. Рядом с каждым результатом: что получилось правильно и что всё ещё придётся поправить руками.

Фото бумажного вайрфрейма

Фото нарисованного от руки на бумаге вайрфрейма сайта кофейни «Northside Coffee»: навигация, первый экран с заголовком «Slow coffee, fast mornings», три блока с товарами и ценами и подвал с часами работы — **Вход:** Фото нарисованного от руки вайрфрейма, снятое на телефон (JPG, 1536 x 1152)

Сгенерированный HTML в браузере: навигация «Northside Coffee», блок с заголовком и кнопкой «See the menu», три карточки товаров с ценами 2.50, 3.20 и 2.80 и часы работы — **Результат:** сгенерированный HTML открыт в Chrome при ширине 1280px, без правок. Строк HTML с Tailwind CSS: 124, ответ пришёл за 11 с.

Что получилось правильно

Весь текст со скетча в том же порядке: логотип, три ссылки, заголовок, кнопка, три названия товаров, цены и часы работы.
Сетка страницы: навигация с линией под ней, первый экран в рамке, три одинаковые карточки в ряд и строка подвала по центру.
Два цвета ручки: чёрный для структуры и текста, синий для ссылок, кнопки и цен.

Что придётся поправить руками

Перечёркнутый прямоугольник (обычное обозначение картинки на вайрфрейме) превратился в изображение с placehold.co, и его подпись бледно просвечивает за заголовком. Замените его своей фотографией.
Каракули под каждым товаром стали тонкими декоративными линиями. Впишите вместо них описания, которые вы собирались там написать.

coffee-wireframe.html (первые строки body)

 <body class="bg-white">
  <!-- Header -->
  <header class="max-w-6xl mx-auto px-4 py-6 flex justify-between items-center border-b-2 border-black mt-4">
   <div class="text-2xl font-bold tracking-widest">
    NORTHSIDE COFFEE
   </div>
   <nav class="space-x-8">
    <a class="text-blue-700 font-semibold tracking-wide hover:underline" href="#">
     MENU
    </a>
    <a class="text-blue-700 font-semibold tracking-wide hover:underline" href="#">
     VISIT
    </a>
    <a class="text-blue-700 font-semibold tracking-wide hover:underline" href="#">
     ORDER
    </a>
   </nav>
  </header>
  <!-- Hero Section -->
  <section class="max-w-6xl mx-auto px-4 mt-6">
   <div class="relative h-[500px] sketch-border flex flex-col items-center justify-center text-center bg-gray-50 overflow-hidden">
    <!-- Placeholder for Hero Image -->
    <img alt="A cozy coffee shop interior with wooden tables and natural light coming through large windows" class="absolute inset-0 w-full h-full object-cover opacity-20" src="https://placehold.co/1200x500?text=Cozy+Coffee+Shop+Interior+with+Natural+Light"/>
    <div class="relative z-10 px-4">
     <h1 class="text-5xl md:text-6xl font-bold tracking-tighter mb-8 uppercase">
      SLOW COFFEE,

Открыть всю сгенерированную страницу (строк: 124)

Скриншот живого лендинга

Скриншот главной страницы Upload-Post: навигация с выпадающими меню, заголовок «Social Media API, One Call, Every Platform», ряды иконок соцсетей, окно терминала с командой curl и кнопка «Create your free account» — **Вход:** Скриншот upload-post.com из браузера (PNG, 1280 x 800)

Сгенерированный HTML в браузере: та же навигация, двухцветный заголовок, иконки соцсетей, терминал с командой curl, список возможностей, кнопка призыва к действию и плашки интеграций — **Результат:** сгенерированный HTML открыт в Chrome при ширине 1280px, без правок. Строк HTML с Tailwind CSS: 463, ответ пришёл за 27 с.

Что получилось правильно

Навигация со стрелками выпадающих меню, кнопкой тёмной темы, выбором языка и кнопкой «Try for free».
Двухцветный заголовок, зелёный бейдж со счётчиком, список возможностей с мелкими иконками и кнопка «Create your free account».
Окно терминала со всеми восемью строками команды curl, причём настоящим текстом, который можно править, а не картинкой.
Узнаваемые иконки брендов из Font Awesome для TikTok, Instagram, LinkedIn, YouTube, Facebook, Pinterest, Reddit, Discord, Telegram, Slack, Mastodon, WordPress, DEV и Google.

Что придётся поправить руками

Бренды, которых нет в Font Awesome 5, заменены похожими значками: у X старая птица Twitter, у Threads знак @, у Bluesky облако. Поставьте официальные SVG.
Аватары пользователей и флаг стали заглушками placehold.co (U1, U2, U3).
Иконки переносятся в три ряда вместо двух, а первый экран стоит чуть ниже, чем в оригинале, так что отступы нужно пройти заново.

upload-post-screenshot.html (первые строки body)

 <body class="text-slate-900">
  <!-- Navigation -->
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex items-center justify-between">
   <div class="flex items-center gap-2">
    <div class="bg-indigo-600 p-1.5 rounded-lg">
     <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      </path>
     </svg>
    </div>
    <span class="text-xl font-extrabold tracking-tight">
     Upload-Post
    </span>
   </div>
   <div class="hidden md:flex items-center space-x-8 text-sm font-medium text-slate-600">
    <a class="hover:text-indigo-600" href="#">
     Add to your SaaS
    </a>
    <div class="flex items-center gap-1 cursor-pointer hover:text-indigo-600">
     Platforms
     <i class="fas fa-chevron-down text-[10px]">
     </i>
    </div>
    <div class="flex items-center gap-1 cursor-pointer hover:text-indigo-600">
     Integrations
     <i class="fas fa-chevron-down text-[10px]">

Открыть всю сгенерированную страницу (строк: 463)

Макет мобильного приложения

Вход: Макет экрана мобильного приложения (PNG, 864 x 1536)

Сгенерированный HTML при ширине 390 пикселей: приветствие, кольцо прогресса, строки привычек с отмеченными и пустыми чекбоксами и закреплённая внизу панель вкладок — **Результат:** сгенерированный HTML открыт в Chrome при ширине 390px, без правок. Строк HTML с Tailwind CSS: 191, ответ пришёл за 19 с.

Что получилось правильно

Приветствие с именем в бирюзовом акцентном цвете, дата и скруглённая карточка со сводкой.
Кольцо прогресса, нарисованное в SVG и заполненное на 3 из 5, с надписью «Keep going!» рядом.
Пять строк привычек с правильными отмеченными и пустыми состояниями и нижняя панель вкладок с иконками Font Awesome и подчёркнутой активной вкладкой.

Что придётся поправить руками

Эмодзи-иконки привычек записаны как картинки placehold.co с эмодзи в тексте и отображаются пустыми квадратами. Вставьте эмодзи напрямую или свои иконки.
Панель вкладок закреплена внизу экрана, а у списка нет нижнего отступа, поэтому она закрывает последнюю привычку. Добавьте снизу отступ высотой с панель.

habit-app-mockup.html (первые строки body)

 <body class="text-[#0a2533] min-h-screen flex flex-col">
  <div class="max-w-md mx-auto w-full px-6 pt-12 pb-24 flex-grow">
   <!-- Header -->
   <header class="mb-8">
    <h1 class="text-4xl font-bold leading-tight">
     Good morning,
     <br/>
     <span class="text-[#006d6d]">
      Ana
     </span>
    </h1>
    <p class="text-[#708090] mt-2 text-lg">
     Tuesday, 23 September
    </p>
   </header>
   <!-- Progress Card -->
   <div class="bg-[#eef7f6] rounded-3xl p-6 mb-8 flex items-center">
    <div class="relative flex items-center justify-center w-32 h-32 mr-6">
     <svg class="w-full h-full">
      <circle class="text-[#d1e5e3]" cx="64" cy="64" fill="transparent" r="48" stroke="currentColor" stroke-width="10">
      </circle>
      <circle class="text-[#006d6d] progress-ring__circle" cx="64" cy="64" fill="transparent" r="48" stroke="currentColor" stroke-dasharray="301.59" stroke-dashoffset="120.63" stroke-linecap="round" stroke-width="10">
      </circle>
     </svg>
     <div class="absolute inset-0 flex flex-col items-center justify-center text-center">
      <span class="text-3xl font-bold text-[#006d6d]">

Открыть всю сгенерированную страницу (строк: 191)

Десктопный фрейм дизайна, экспортированный в PNG

Фрейм дизайна лендинга для приложения выставления счетов Ledgerly: навигация, заголовок «Send invoices in two clicks», две кнопки и карточка дашборда с суммой к оплате, столбчатой диаграммой и тремя счетами со статусами «Paid», «Due» и «Overdue», под ними ряд логотипов клиентов — **Вход:** Фрейм дизайна лендинга (PNG, 1536 x 864)

Сгенерированный HTML в браузере: навигация, двухцветный заголовок, кнопки «Start free» и «Book a demo», карточка дашборда с боковым меню, столбчатой диаграммой и списком счетов с цветными бейджами статусов и ряд логотипов клиентов — **Результат:** сгенерированный HTML открыт в Chrome при ширине 1280px, без правок. Строк HTML с Tailwind CSS: 320, ответ пришёл за 23 с.

Что получилось правильно

Весь первый экран: плашка-метка, двухцветный заголовок, абзац текста, залитая и контурная кнопки в фиолетовом цвете дизайна.
Карточка дашборда настоящим HTML: боковое меню с активным пунктом, сумма к оплате, столбчатая диаграмма из div и три строки счетов с бейджами «Paid», «Due» и «Overdue» в зелёном, оранжевом и красном.
Ряд логотипов клиентов, где каждое название набрано текстом.

Что придётся поправить руками

Логотипы временные: знак Ledgerly стал типовым SVG из стопки слоёв, у Globex и Northwind иконки Font Awesome, а плитка Stark Industries использует класс bg-dark, который на странице нигде не определён, поэтому её не видно. Замените их своими SVG.
Иконка с искрами в плашке-метке задана как fa-sparkles, а в бесплатном наборе Font Awesome 5 такой нет, поэтому на её месте пусто.
При ширине 1280 пикселей строкам счетов тесно, и INV-0042 переносится на две строки. Дайте правой колонке больше места или сократите колонку с датой.

ledgerly-frame.html (первые строки body)

 <body class="min-h-screen">
  <!-- Navigation -->
  <nav class="max-w-7xl mx-auto px-6 py-6 flex items-center justify-between">
   <div class="flex items-center space-x-12">
    <div class="flex items-center space-x-2">
     <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
      <svg class="w-5 h-5" fill="white" viewbox="0 0 24 24">
       <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5">
       </path>
      </svg>
     </div>
     <span class="text-xl font-bold text-dark">
      Ledgerly
     </span>
    </div>
    <div class="hidden md:flex space-x-8 text-muted font-medium">
     <a class="hover:text-primary transition" href="#">
      Features
     </a>
     <a class="hover:text-primary transition" href="#">
      Pricing
     </a>
     <a class="hover:text-primary transition" href="#">
      Customers
     </a>
     <a class="hover:text-primary transition" href="#">

Открыть всю сгенерированную страницу (строк: 320)

Как превратить картинку в HTML

Выберите картинку. Лучше всего работает скриншот в натуральном размере. Обрежьте панели браузера и всё, что не относится к дизайну: модель воссоздаёт всё, что видит.
Загрузите и конвертируйте. Первая версия приходит за 10-30 секунд и открывается в редакторе с живым превью страницы.
Доработайте запросом или руками. Попросите изменения обычными словами («сделай шапку липкой», «поставь тёмный фон») или правьте код напрямую, а потом переключите вывод на инлайновый CSS, React, Vue или Angular, если в проекте не Tailwind.
Замените заглушки. Фотографии, логотипы и иконки брендов приходят заглушками с описанием того, что там было. Подставьте свои файлы, и готово.

Что конвертируется хорошо, а что нет

Ближе всего к оригиналу получаются лендинги, дашборды, таблицы тарифов, формы, блоги и экраны приложений: они состоят из текста, блоков и иконок, которые напрямую ложатся в HTML. Графики становятся простыми фигурами из div или SVG. Иллюстрации, фотографии и собственные логотипы не обрисовываются, вместо них ставятся заглушки. Очень длинные страницы лучше разбить на части по один-два экрана и конвертировать по отдельности.

Этот HTML служит отправной точкой для разработчика, а не готовым сайтом. Рассчитывайте проверить отступы, заменить картинки и подключить всю интерактивность. Зато по сравнению с вёрсткой той же страницы с нуля каждый заголовок, пункт списка и подпись кнопки уже набраны.

Конвертация картинок разного типа

Скриншот в код: воссоздать страницу, которую вы видите в браузере, с подробным разбором примера Upload-Post.
Картинка в код: мобильные макеты и макеты приложений, с примером трекера привычек.
Figma в HTML: экспорт фрейма в PNG и его конвертация.

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

Вопросы о конвертации картинки в HTML

Какие форматы картинок можно превратить в HTML?

PNG, JPG и JPEG, WebP, GIF и BMP. Подходят скриншоты, экспорт из графических редакторов, фото наброска на телефон и сканы. Чем чётче текст на картинке, тем больше его окажется в HTML настоящим текстом.

Что именно я получу?

Один HTML-файл со стилями на Tailwind CSS (подключается с CDN), с Font Awesome для иконок и заглушками placehold.co там, где на картинке были фотографии или логотипы. У каждой заглушки есть описательный alt, чтобы вы знали, что туда поставить.

HTML будет адаптивным?

Вёрстка использует flex и grid-утилиты Tailwind, поэтому подстраивается под экран, но модель собирает страницу под ширину вашей картинки. Десктопный скриншот даст страницу, сделанную в первую очередь под десктоп; проверьте мобильный вид и поправьте брейкпоинты, где нужно.

Можно получить обычный CSS, React или Vue вместо Tailwind?

Да. После конвертации в редакторе можно переключить вывод на HTML с инлайновым CSS, ReactJS, VueJS или AngularJS либо вписать другой фреймворк. Tailwind HTML стоит по умолчанию, потому что файл получается самодостаточным.

Сколько длится конвертация?

Четыре примера на этой странице заняли через API от 11 до 27 секунд каждый. Насыщенные страницы с большим количеством текста обрабатываются дольше простых.

Можно ли превратить картинку в HTML бесплатно?

Конвертер только текста вверху этой страницы бесплатный и работает в браузере: он извлекает текст картинки через OCR и оборачивает его в простой HTML-файл. Чтобы воссоздать структуру, цвета и компоненты, нужен ИИ-конвертер, который тратит кредиты.

Превратите свою картинку в HTML

Выберите тариф, загрузите скриншот, макет или фото и получите HTML меньше чем за минуту.

Смотреть тарифы и конвертировать