Zamiana HTML na obraz

To narzędzie zamienia HTML na obraz: wklej kod, wybierz szerokość, kliknij „Utwórz obraz” i pobierz PNG, JPG lub WebP. Obraz powstaje w Twojej przeglądarce – kod nie jest wysyłany, zapisywany ani dodawany do paska adresu.

Źródło: W3C SVG 2 – foreignObject (HTML-Inhalt in SVG einbetten). Stan na: 30 września 2026.

Szerokość

Szerokość obrazu w pikselach CSS (50–4000)

Wysokość

0 = automatycznie według zawartości

Margines wewnętrzny

Odstęp między zawartością a krawędzią obrazu

Rozdzielczość

Tło

Format

Moje narzędziaWpisane dane są zapisywane tylko w tej przeglądarce.

Kod HTMLHTML ze stylami inline lub blokiem <style>. Obrazy tylko jako Base64 (data:image/…), czcionki tylko systemowe. Skrypty i adresy zewnętrzne są usuwane.

Twój tekst zostaje w przeglądarce – nie jest wysyłany, zapisywany ani dodawany do paska adresu.

Wynik

Wynik: Obraz o szerokości 600 px, rozdzielczość 2× → 1200 px

Jak to obliczamy

Jak HTML zamienia się w obraz

Przeglądarka rysuje kod HTML jako grafikę: najpierw jest oczyszczany, potem renderowany jako SVG z osadzonym HTML (foreignObject) i malowany na płótnie (canvas), które zapisuje się jako PNG, JPG lub WebP. To działa dla kart, cytatów, tabel, fragmentów faktur, elementów e-maili czy grafik do mediów społecznościowych – wszystkiego, co da się zaprojektować w HTML i CSS.

Co jest obsługiwane

HTML i CSS: style inline i blok <style>, flexbox, grid, gradienty, cienie, zaokrąglone rogi, tabele.
Obrazy: tylko osadzone jako adres Base64 (data:image/png;base64,…) lub jako SVG inline. Obraz do Base64 zamienia plik graficzny na właściwy adres.
Czcionki: zainstalowane na urządzeniu oraz czcionka systemowa. Czcionki internetowe pobierane z sieci (Google Fonts) nie są ładowane.

Co nie działa

Skrypty się nie uruchamiają, obrazy, czcionki i arkusze stylów z innych adresów nie są ładowane, a animacje, efekty hover, iframe, canvas i video nie dają obrazu. Takie elementy są usuwane podczas oczyszczania; informacja pod wynikiem o tym mówi. Wygląd może się nieco różnić od prawdziwej strony, bo przeglądarka rysuje tylko Twój fragment.

Rozmiar, ostrość i format

Szerokość i wysokość: przy „0” wysokość wynika z zawartości.
Rozdzielczość: 2× daje dwa razy więcej pikseli i wygląda ostro na telefonach i ekranach Retina. Przy bardzo dużych obrazach rozdzielczość jest ograniczana automatycznie.
Format: PNG dla tekstu i grafiki o ostrych krawędziach z przezroczystością, JPG dla małych plików (zawsze z tłem), WebP jako nowoczesny kompromis.

Prywatność i bezpieczeństwo

Kod jest przetwarzany tylko w przeglądarce i nigdzie zapisywany. Skrypty, atrybuty zdarzeń jak onclick i adresy zewnętrzne są usuwane przed rysowaniem. Jeśli chcesz raczej dodać napis do istniejącego zdjęcia, użyj napisu na zdjęciu.

Najczęściej zadawane pytania

Jak zamienić HTML na obraz?

Wklej kod HTML, wybierz szerokość i rozdzielczość i kliknij „Utwórz obraz”. Potem pobierz obraz jako PNG, JPG lub WebP.

Dlaczego moje obrazy się nie wyświetlają?

Obrazy z innych adresów (https://…) nie są ładowane ze względów bezpieczeństwa. Osadź je jako adres Base64 (data:image/…) lub użyj SVG inline.

Czy mój kod jest wysyłany?

Nie. Kod jest odczytywany w przeglądarce i tam rysowany jako obraz. Nie jest wysyłany ani zapisywany.

Jak uzyskać przezroczyste tło?

Wybierz tło „Przezroczyste” i format PNG lub WebP. JPG nie obsługuje przezroczystości i zawsze dostaje białe tło.

Dlaczego obraz jest nieostry?

Ustaw rozdzielczość na 2× lub 3×. Obraz będzie miał wtedy dwa lub trzy razy więcej pikseli przy tym samym rozmiarze wyświetlania.

Czy działają Google Fonts?

Nie, czcionki internetowe pobierane z sieci nie są ładowane. Używaj czcionek systemowych, jak Arial, Georgia czy Verdana, lub czcionek zainstalowanych na urządzeniu.

Źródła i podstawa prawna

Stan na: 30 września 2026 · Zasady redakcyjne