UltKit

Konwerter HTML na PNG

Zamień zapisaną stronę internetową, eksport pulpitu lub makietę komponentu na PNG, w którym każda litera i każda cienka linia wygląda dokładnie tak, jak narysowała ją przeglądarka. Wybierz szerokość okna, a układ strony się do niej dopasuje.

Dokument na obraz

lub upuść Pliki DOC, DOCX, DOCM … tutaj ·

Maks. 95 MB na plik· Do 20 plików· Usuwane po 30 min

Plik wynikowy

Pliki są przetwarzane na naszych serwerach i usuwane po 30 min.

Jak korzystać z narzędzia

  1. 1

    Dodaj plik HTML

    Prześlij pliki .html, .htm lub .mhtml – do 20 w jednej partii, każdy do 95 MB. Strona zapisana jako pojedynczy plik MHTML zawiera w sobie obrazy i style.

  2. 2

    Ustaw szerokość okna

    Szerokość strony HTML domyślnie wynosi 1280 px. Użyj 390 px dla układu na telefon lub 1920 px dla szerokiego panelu. Opcja Konwertuj na jest już ustawiona na PNG, a Obrazy to jeden długi obraz.

  3. 3

    Konwertuj do PNG

    Kliknij Konwertuj na PNG →. Włącz Przezroczyste tło w sekcji Ustawienia zaawansowane, jeśli strona nie ma własnego koloru tła, a obraz trafi na inną grafikę.

Odpowiedź

Jak przekonwertować HTML na PNG?

Prześlij plik .html lub .mhtml, ustaw Szerokość strony HTML odpowiadającą ekranowi, który chcesz odwzorować, i kliknij Konwertuj na PNG →. Cała wyrenderowana strona wróci jako jeden obraz bez strat.

Konwertuj HTML na PNG, gdy tekst i linie muszą pozostać ostre

PNG jest rekomendacją W3C od 1996 roku i używa kompresji bezstratnej, więc wygładzone krawędzie tekstu 14 px, jednopikselowe obramowania tabel i kolorowany kod pozostają nienaruszone. Dlatego programiści dołączają zrzuty PNG do zgłoszeń błędów, a projektanci udostępniają je w przeglądach: nikt nie musi się zastanawiać, czy rozmyta krawędź to problem CSS, czy artefakt kompresji.

Ceną jest rozmiar. Strona z tekstu i jednolitych kolorów kompresuje się dobrze, a strona pełna zdjęć już nie. Jeśli zrzut trafia na czat lub do e-maila, gdzie rozmiar ważniejszy jest od ostrości detali, plik JPG będzie mniejszy. W dokumentacji, notatkach wydania, panelach i przewodnikach stylu PNG to bezpieczniejszy wybór domyślny.

O układzie decyduje szerokość. HTML nie ma stałej strony: ten sam plik pokazuje trzykolumnowy układ na komputer przy 1280 px i jedną ułożoną w stos kolumnę przy 390 px. Konwerter układa stronę przy podanej Szerokości strony HTML, od 320 do 3840 px, a potem robi zrzut od pierwszej linii do stopki.

Szerokości w konwerterze HTML na PNG dla popularnych ekranów

195:422

390 × 844 px

Telefon

Viewport CSS wielu nowszych iPhone’ów; pokazuje układ mobilny

41:59

820 × 1180 px

Tablet

iPad Air w pionie; wiele witryn zmienia tu punkty graniczne układu

8:5

1280 × 800 px

Laptop

Domyślna szerokość w tym konwerterze

16:9

1920 × 1080 px

Monitor Full HD

Szerokie panele i panele administracyjne

HTML

HyperText Markup Language

HTML to język znaczników sieci WWW, opisany po raz pierwszy przez Tima Bernersa-Lee na początku lat 90., a obecnie rozwijany przez WHATWG jako żywy standard. Plik HTML opisuje nagłówki, akapity, odnośniki, tabele, obrazy i formularze, a stylizacja zwykle pochodzi z CSS. Renderuje go każda przeglądarka, a używa się go też w szablonach e-maili i zapisanych stronach. Pojedynczy plik HTML często zależy od zewnętrznych obrazów i arkuszy stylów, więc po przeniesieniu osobno może wyglądać na zepsuty.

Kompresja
–
Przezroczystość
–
Animacja
–
Rok powstania
1993 · Tim Berners-Lee; maintained by WHATWG
Konwerter HTML

PNG

Portable Network Graphics

PNG to bezstratny format rastrowy opublikowany w 1996 roku przez PNG Development Group, a później ustandaryzowany przez W3C i ISO. Zachowuje każdy piksel dokładnie, obsługuje pełną przezroczystość alfa i bez artefaktów radzi sobie z tekstem, ostrymi krawędziami i jednolitymi kolorami. Ta precyzja czyni go idealnym do zrzutów ekranu, logo, ikon i grafik interfejsu. Wadą jest rozmiar: zdjęcia zapisane jako PNG są często kilkukrotnie większe niż to samo zdjęcie w JPEG lub WebP. PNG otwierają wszystkie przeglądarki, systemy operacyjne i edytory.

Kompresja
Bezstratna
Przezroczystość
Tak
Animacja
Nie
Rok powstania
1996 · PNG Development Group
Konwerter PNG

PNG wybiera się, gdy strona to głównie tekst, kod, tabele lub elementy interfejsu: piksele bez strat zachowują ostrość cienkich linii i małego druku w dokumentacji, zgłoszeniach błędów i przeglądach projektów, gdzie artefakty JPG byłyby widoczne.

Konwertuj HTML na PNG bez utraty stylów i czcionek

Zwykły plik .html często zależy od rzeczy przechowywanych gdzie indziej: arkusza stylów w folderze css, obrazów na oryginalnym serwerze, czcionek z usługi czcionek. Gdy ich brakuje, strona wraca do niestylizowanego tekstu w domyślnej czcionce. Zapisanie strony w Chrome lub Edge jako Strona internetowa, pojedynczy plik tworzy plik .mhtml, który przechowuje style i obrazy razem – to najpewniejsza rzecz do przesłania.

Czcionki internetowe podlegają tej samej zasadzie. Czcionka zadeklarowana przez @font-face wczyta się tylko wtedy, gdy jej plik jest osiągalny; czcionka istniejąca tylko na Twoim komputerze zostanie zastąpiona podobną. Jeśli liczy się dokładna typografia, osadź czcionkę lub sprawdź wynik przed wysłaniem dalej.

Stała szerokość sprawia też, że cotygodniowe zrzuty raportu można porównywać obok siebie. Gdy wynik ma pozostać zaznaczalnym tekstem do druku, lepiej użyć formatu HTML do PDF.

Pytania o konwersję HTML na PNG

Czy konwersja HTML na PNG jest lepsza niż zrzut ekranu z własnej przeglądarki?

Zrzut ekranu z przeglądarki obejmuje tylko to, co mieści się na ekranie, chyba że użyjesz narzędzia do zrzutu całej strony, a jego szerokość zależy od okna. Tutaj szerokość to liczba, którą ustawiasz sam, więc dwa zrzuty wykonane w odstępie tygodni idealnie do siebie pasują, a cała strona jest uwzględniona od pierwszej linii do stopki.

Dlaczego plik PNG jest kilka razy większy niż ta sama strona w JPG?

PNG zapisuje każdy piksel bez strat. Tekst i jednolite kolory dobrze się tak kompresują, ale zdjęcia, gradienty i plakaty wideo już nie, więc strona docelowa pełna zdjęć może dać duży plik PNG. Dla takich stron lżejszym wyborem jest HTML do JPG; w przypadku fragmentów kodu, wykresów i interfejsów zwykle nie warto godzić się na rozmycie.

Czy PNG może mieć przezroczyste tło zamiast białego?

Tak. Włącz Przezroczyste tło. Prześwituje ono tylko tam, gdzie sama strona nie ustawia koloru tła, więc witryna z białym kolorem body nadal będzie biała. Najlepiej działa przy pojedynczym komponencie lub plakietce zbudowanej jako osobny plik HTML.

Czy konwerter uruchamia JavaScript na stronie?

Treść budowana przez skrypt po otwarciu strony może się pojawić, ale to, co czeka na kliknięcie, przewinięcie lub logowanie, nie zostanie uwzględnione. Jeśli wykres lub tabela istnieje dopiero po interakcji, otwórz stronę w przeglądarce, poczekaj na jej załadowanie i zapisz ją jako pojedynczy plik przed przesłaniem.

Jak zrobić obraz tylko z górnej części długiej strony?

Przełącz Obrazy na jeden na stronę i ustaw Strony na Pierwsza strona. Otrzymasz pierwszą sekcję o wysokości strony zamiast całej długości. Aby potem przyciąć obraz do dokładnego kadru, użyj narzędzia przytnij obraz.