Arteon Tools - platforma z darmowymi narzędziami działającymi w przeglądarce

Skąd wziął się pomysł na Arteon Tools?

Z konwerterów, liczników i generatorów korzystamy codziennie przy projektowaniu stron, sklepów, grafik i treści. Przez lata sięgaliśmy po nie na różnych stronach. Niestety większość z nich jest bardzo przestarzała – ładują się bardzo wolno, mają słaby design oraz masę wyskakujących natrętnych reklam. Proste obliczenia wymagają kilku kliknięć. Część takich stron pozwala skorzystać z narzędzia kilka razy i potem wymaga dodatkowych mikroopłat, a część już na wejściu każe założyć konto. To skłoniło nas do budowy narzędzi, które nie mają limitów, działają natychmiast bez rejestracji i nie wyświetlają natrętnych reklam.

Drugą sprawą były dane. Wiele popularnych konwerterów wysyła plik na swój serwer, tam go przetwarza, następnie odsyła plik, jednocześnie przechowując go przez określony czas na własnym serwerze. Przy skanie dowodu osobistego, podpisanej umowie czy fakturze uważamy to za bardzo niebezpieczne. Dlatego stworzyliśmy każde nasze narzędzie w taki sposób, aby przetwarzało wszelkie dane lokalnie, nie wysyłając niczego na serwer oraz nie zbierając żadnych informacji o tym, co dokładnie w danym narzędziu robisz.

Pierwsze narzędzia powstały do naszej własnej pracy

Na początku budowaliśmy wyłącznie narzędzia, których sami potrzebowaliśmy najbardziej przy projektach dla klientów:

• generator stopki mailowej, w którym składamy stopkę HTML do Gmaila i Outlooka,
• generator kodów QR, bo klienci często chcieli mieć kod QR w projektach graficznych,
• licznik słów i znaków, bo pisząc treści, trzymamy się określonej długości tekstu,
• tester kontrastu kolorów według WCAG (wytycznych dostępności treści internetowych), bo kontrast sprawdzamy u każdego klienta, gdy projektujemy nowy wygląd strony,
• licznik długości meta title i description w pikselach, bo Google obcina w wynikach wyszukiwania zbyt długie tytuły i opisy,
• generator palet kolorów, który przydaje się, gdy klient ma w logo jeden kolor, a my potrzebujemy z niego stworzyć całą kolorystykę dla strony czy innych materiałów reklamowych.

Na tamtym etapie liczyło się dla nas to, żeby narzędzia działały szybko i były zawsze pod ręką na jednej stronie. Z czasem doszła zamiana formatów zdjęć. Jako pierwsze powstały konwertery JPG i PNG na WebP, bo z nich także korzystamy na co dzień. WebP to format obrazów opracowany przez Google z myślą o stronach internetowych.

Jak narzędzia do własnej pracy stały się osobną platformą?

Na samym początku pod pierwszymi narzędziami były tylko instrukcje obsługi. Kompletnie nie nastawialiśmy się na pozycjonowanie tych narzędzi. Po jakimś czasie zauważyliśmy jednak, że na te strony wchodzą ludzie z Google pomimo braku optymalizacji pod kątem SEO. Potem zaczęliśmy je pozycjonować z czystej ciekawości i dlatego, że uznaliśmy je za pomocne oraz wartościowe dla innych. Ruch na stronie z czasem zrobił się spory, a kilka narzędzi w wersji PL trafiło do pierwszej trójki wyników Google. Wtedy postanowiliśmy rozbudować je jeszcze bardziej oraz dodać nowe.

Następnie dodaliśmy testowo kilka języków. Chcieliśmy sprawdzić, czy narzędzia zbiorą wejścia z innych krajów, mimo że stały na polskiej domenie (.pl), która mocno ogranicza ruch międzynarodowy. Wejścia nie tylko się pojawiły – część stron, np. w języku hiszpańskim, również zaczęła być widoczna w Top 3. Wtedy stwierdziliśmy, że zdecydowanie powinniśmy je przenieść na domenę międzynarodową. Chcieliśmy to zrobić w sposób czysty 1:1, więc najpierw przenieśliśmy je na osobną subdomenę tools.arteonagency.pl, a następnie posegregowaliśmy je w odpowiednie kategorie, dodając przy tym język angielski jako domyślny język witryny.

Na subdomenie z czasem narzędzia zdobywały coraz więcej miejsc w pierwszej trójce wyników. W pewnym momencie zobaczyliśmy, że nasz ruch na tej stronie przebił 250 użytkowników w ciągu doby. Potem przenieśliśmy je na domenę .com. Uznaliśmy również, że chcemy pracować nad nimi bardziej systematycznie. Tak powstał pomysł na regularne aktualizacje oraz paczki nowych narzędzi publikowane w każdy wtorek.

Skoro narzędzia okazały się przydatne dla tak wielu osób, najlepsze, co mogliśmy zrobić, to udostępnić je wszystkim.

Jakie narzędzia znajdziesz na arteontools.com?

Narzędzia dzielą się aktualnie na siedem kategorii. Każda kategoria ma własną stronę ze spisem narzędzi, a sześć z nich dzieli się dodatkowo na podkategorie:

• Zdjęcia: zamiana formatów JPG, PNG, WebP, AVIF, HEIC, SVG, TIFF, BMP, GIF i PDF, zamiana obrazu na Base64 i z powrotem, edytor zdjęć i generator favicon. Podkategorie: Zmiana formatu oraz Edycja i tworzenie.
• Dane: zamiana plików CSV, JSON, XML, YAML, Markdown i HTML, jednostki rozmiaru danych od bajtów do petabajtów, znacznik czasu Unix, systemy liczbowe i prędkość łącza. Podkategorie: Zmiana formatu, Rozmiar danych oraz Liczby i czas.
• Miary: przeliczanie jednostek długości, wagi i objętości, także między układem metrycznym i imperialnym. Podkategorie: Długość, Waga oraz Objętość.
• Druk i ekran: przeliczanie centymetrów, milimetrów, cali, stóp i metrów na piksele i z powrotem przy dowolnym DPI oraz jednostki typograficzne pt, rem, em i pica. Podkategorie: Piksele i DPI oraz Jednostki typograficzne.
• Teksty: licznik słów i znaków, licznik długości meta title i description oraz generator Lorem Ipsum. Podkategorie: Analiza tekstu oraz Generatory.
• Kolory: tester kontrastu według WCAG, generator palet, ekstraktor kolorów z obrazu oraz zamiana zapisu HEX, RGB i CMYK. Podkategorie: Palety i kontrast oraz Konwersja kolorów.
• Biznes: generator stopki mailowej do Gmaila i Outlooka oraz generator kodów QR.

Każde narzędzie jest dostępne w ośmiu językach: English, Polski, Deutsch, Español, Français, Português, Italiano i Čeština.

Jak zaprojektowaliśmy stronę narzędzia?

Każde narzędzie jest dostępne od razu po wejściu, widoczne obok tytułu i krótkiego wstępu albo zaraz pod nim. Nad tytułem stoją okruszki nawigacyjne, czyli ścieżka od spisu wszystkich narzędzi przez kategorię do narzędzia.

Dwa układy strony, zależnie od wielkości narzędzia

Konwertery jednostek mieszczą się w wąskiej kolumnie. Na komputerze stoją więc po prawej stronie, obok tytułu, wstępu i spisu treści, a treść została umieszczona w lewej kolumnie. Konwertery plików, edytor zdjęć, generatory i narzędzia do tekstu potrzebują całej szerokości strony. W ich przypadku narzędzie zajmuje pełną szerokość pod wstępem, a pod nim zaczyna się treść z boczną kolumną, w której są przyciski udostępniania i spis treści. Na telefonie oba układy wyglądają podobnie: narzędzie stoi zaraz pod wstępem, a treść pod narzędziem.

Narzędzie zostaje obok treści podczas przewijania

Treść konwertera jednostek bywa długa, bo zawiera tabele z gotowymi wartościami, wzory i odpowiedzi na pytania, a także regionalne ciekawostki. Kolumna z narzędziem przesuwa się razem ze stroną i zatrzymuje przy górnej krawędzi okna. Tak samo działa boczna kolumna ze spisem treści przy większych narzędziach.

Przewijając w dół, dojdziesz do dołu kolumny, a przewijając w górę, wrócisz do jej początku. To zachowanie działa na ekranach szerokich od 1024 pikseli.

Spis treści prowadzi do każdej sekcji

Spis treści powstaje z nagłówków sekcji podczas budowania strony. Każdy nagłówek dostaje kotwicę, czyli adres fragmentu strony stworzony z treści nagłówka. Link ze spisu przenosi Cię prosto do wybranej sekcji. Dzięki temu możesz również skopiować link do danego fragmentu strony i wysłać go komuś. Kotwice są zapisane w kodzie strony od pierwszej chwili, więc spis działa zaraz po otwarciu strony i nie przesuwa układu podczas ładowania.

Długie tabele z nagłówkiem, który zostaje na górze

Tabele przeliczeń mają często kilkadziesiąt wierszy. Po kilku obrotach kółkiem myszy łatwo zapomnieć, która kolumna pokazuje np. kilogramy, a która funty. Dlatego nagłówek tabeli przykleja się pod paskiem nawigacji na czas przewijania tabeli. Nagłówek ma pełne tło i cienką linię u dołu, więc wiersze przesuwają się pod nim czytelnie. Gdy tabela się kończy, nagłówek przesuwa się w górę razem z jej ostatnimi wierszami.

Na telefonie tabele z trzema i więcej kolumnami wartości możesz również przesuwać w bok, a każda komórka ma szerokość wystarczającą na szesnaście znaków, aby zapewnić dobrą czytelność na małym ekranie. Tabele z jedną lub dwiema kolumnami wartości mieszczą się na ekranie w całości.

Pytania i odpowiedzi w rozwijanych panelach

Na końcu treści znajdziesz pytania i odpowiedzi związane z danym przeliczeniem albo formatem. Każde pytanie to panel zbudowany na elemencie przeglądarki przeznaczonym do rozwijanych treści, więc odpowiedź da się otworzyć nawet wtedy, gdy skrypty strony jeszcze się wczytują. Po ich wczytaniu panel rozwija się płynnie, a otwarcie kolejnego pytania zwija poprzednie. Jeśli w systemie masz włączone ograniczenie animacji, panele otwierają się od razu.

Źródła i data aktualizacji pod treścią

Liczby i fakty na stronach narzędzi opieramy na źródłach: publikacjach instytucji zajmujących się miarami, specyfikacjach formatów plików, dokumentacji producentów oprogramowania i Wikipedii w języku danej wersji strony. Na stronach z listą źródeł przy zdaniu z faktem stoi numer w nawiasie kwadratowym, który przenosi do tej listy nad sekcją pytań. Pod listą znajdziesz zdanie o tym, jak powstały liczby w tabelach, oraz datę ostatniej aktualizacji treści z informacją, kto ją przygotował i sprawdził.

Przejście do sąsiednich jednostek i formatów

Pod konwerterem jednostek stoją dwa przyciski z nazwami jednostek, na przykład Kilogramy na Funty (lb). Kliknięcie w jeden z nich rozwija listę jednostek z tej samej kategorii. Na liście są wyłącznie jednostki, dla których mamy konwerter w parze z jednostką po drugiej stronie, więc każda opcja prowadzi prosto do gotowego narzędzia.

Nad sekcją pytań są jeszcze dwa rzędy kafelków. Pierwszy prowadzi do konwerterów na tę samą jednostkę docelową, a drugi do konwerterów z tej samej jednostki źródłowej. Konwertery plików mają pod narzędziem taki sam wybór formatów, na przykład JPG na WebP. Jeśli w kolejce są już pliki, przed zmianą formatu narzędzie pyta, czy mają zostać usunięte z kolejki.

Udostępnianie, formularz i wygoda na telefonie

Obok narzędzia stoją przyciski udostępniania na Facebooku, X i LinkedInie oraz przycisk kopiowania adresu strony. Pod treścią każdego narzędzia jest formularz, przez który możesz napisać do nas uwagę albo pomysł.

Trzy narzędzia mają rozbudowany interfejs, który potrzebuje większego ekranu: edytor zdjęć, generator favicon i generator stopki mailowej. Na telefonie w ich miejscu pojawia się komunikat z prośbą o otwarcie strony na laptopie, komputerze albo tablecie ustawionym w poziomie. Gdy okno przeglądarki stanie się wystarczająco szerokie, na przykład po obróceniu tabletu, narzędzie pokaże się samo. Pozostałe narzędzia działają na telefonie w pełni.

Menu na komputerze rozwija się po najechaniu na kategorię. Zamknięcie menu po zjechaniu wskaźnikiem z paska ma krótkie opóźnienie, dzięki czemu menu zostaje otwarte, gdy przesuwasz wskaźnik w dół do listy narzędzi. Menu obsłużysz też klawiaturą, a klawisz Escape zamyka panel i przenosi fokus z powrotem na przycisk, którym go otworzyłeś. Na telefonie menu wysuwa się z boku ekranu, kategorie rozwijają się jedna pod drugą, a podkategorie są nagłówkami w ich wnętrzu. Do narzędzia dochodzisz trzema dotknięciami: otwierasz menu, rozwijasz kategorię i wybierasz narzędzie.

Dla osób poruszających się po stronie klawiaturą pierwszym elementem każdej strony jest link Przejdź do treści, który pojawia się po naciśnięciu klawisza Tab i pozwala pominąć menu. Treści poniżej ekranu pojawiają się z delikatnym przejściem, gdy przewiniesz do nich stronę. Miejsca na reklamy mają zarezerwowaną wysokość, dlatego wczytana reklama nie przesuwa tekstu, który właśnie czytasz.

Jak działają konwertery jednostek?

Wpisujesz liczbę w pierwsze pole, a wynik pojawia się w drugim w trakcie pisania. Pole wyniku także przyjmuje wpis, więc wpisując w nie wartość, od razu dostajesz przeliczenie w drugą stronę. Przy polach stoją skróty jednostek, na przykład kg i lb, a podpowiedź w pustym polu mówi, co wpisać, na przykład Wpisz kilogramy.

Przecinek, kropka i ułamki

Pola konwerterów są polami tekstowymi, dzięki czemu przyjmują liczbę zapisaną z przecinkiem, tak jak piszemy ją po polsku. Wpis odczytuje nasz kod, który rozumie zapisy liczb z różnych krajów. Wpiszesz 2,5 albo 2.5 i dostaniesz ten sam wynik.

Gdy liczba ma oba znaki, na przykład 1.234,56 albo 1,234.56, znakiem dziesiętnym jest ten stojący dalej po prawej. Gdy po jedynym znaku stoją dokładnie trzy cyfry, o znaczeniu decyduje język strony. W polskiej wersji wpis 2.500 oznacza dwa i pół tysiąca, a w angielskiej dwa i pół.

Pole przyjmuje także ułamki zwykłe, na przykład 1/2 i 3/8, oraz ułamki mieszane, na przykład 1 1/2. Ma to znaczenie przy jednostkach imperialnych, bo cale i funty często zapisuje się właśnie w ułamkach. Litery i znaki, które nie należą do zapisu liczby, narzędzie usuwa z pola już podczas wpisywania, dzięki czemu w polu zostaje sama liczba.

Przełączniki dla jednostek o kilku wartościach

Część jednostek ma dziś kilka używanych wartości. Galon amerykański to 3,785 litra. Galon brytyjski jest większy i ma 4,546 litra. Trzeci, amerykański galon suchy, to 4,405 litra. Przy takich jednostkach konwerter ma pod polami przełącznik, na przykład Rodzaj galona z opcjami Amerykański (US), Brytyjski (UK) i Amerykański suchy (US dry). Wybór opcji przestawia cały rachunek, a linijka pod przyciskami wyjaśnia, gdzie spotkasz każdą z miar.

Przełączniki mają też konwertery uncji płynu, cupów, uncji handlowej i trojańskiej, ton, mil lądowych i morskich czy piki. W konwerterach kolorów wybierasz zapis kanałów RGB w skali 0–255 albo 0–1. Konwertery rozmiaru danych liczą w standardzie binarnym, po 1024 bajty, albo w dziesiętnym, po 1000 bajtów.

Pole DPI, rozmiar czcionki i próbka koloru

Niektóre przeliczenia potrzebują trzeciej wartości. Konwertery pikseli na centymetry, milimetry, cale, stopy i metry mają pole DPI / PPI, czyli liczbę punktów na cal. Ta sama liczba pikseli daje inny wymiar na wydruku przy innej rozdzielczości. Szerokość kartki A4 to 21 centymetrów. Przy 96 DPI daje to 794 piksele, a przy 300 DPI już 2480 pikseli. Konwertery rem i em mają z kolei pole z bazowym rozmiarem czcionki.

Konwertery kolorów pokazują obok pola kwadrat w kolorze, który właśnie wpisałeś. Kliknięcie w kwadrat otwiera systemowy wybór koloru, a wybrany odcień od razu trafia do pola.

Zmień kolejność, Kopiuj wynik i Wyczyść wszystko

Pod polami są trzy przyciski. Zmień kolejność przenosi na stronę konwertera w odwrotnym kierunku, na przykład z kilogramów na funty do funtów na kilogramy. Każdy kierunek przeliczenia ma u nas własną stronę z tabelami i przykładami dopasowanymi do tego kierunku. Kopiuj wynik kopiuje liczbę z pola wyniku i na dwie sekundy zmienia napis na Skopiowano. Wyczyść wszystko opróżnia oba pola. Przyciski kopiowania i czyszczenia stają się aktywne, gdy w polach pojawi się wartość.

Wszystkie jednostki danych w jednym konwerterze

Strona podkategorii Rozmiar danych jest jednocześnie konwerterem, w którym jednostki wybierasz przyciskami B, KB, MB, GB, TB i PB. Wpisujesz liczbę w pole Konwertuj z, zaznaczasz jednostkę źródłową i docelową, a wynik pojawia się w polu Konwertuj na. Przełącznik Standard jednostek zmienia rachunek między binarnym (1024), którego używa Windows i w którym podaje się pojemność pamięci RAM, a dziesiętnym (1000), którego używają producenci dysków, macOS i wyszukiwarki. Pod konwerterem stoją kafelki z konwerterami dla konkretnych par jednostek.

Jak działają konwertery zdjęć i dokumentów?

Konwerter formatu obrazu składa się z dwóch kart. W lewej karcie, w polu Dodaj pliki, przeciągasz pliki albo klikasz, żeby wybrać je z dysku. Pod polem ustawiasz suwakiem jakość, gdy plik wynikowy ma format JPG, WebP albo AVIF. Prawa karta Pliki w kolejce pokazuje każdy plik z jego stanem, wagą przed konwersją i po niej oraz zmianą w procentach.

Przycisk Konwertuj zamienia wszystkie pliki z kolejki, a pasek postępu i licznik Zakończone pokazują, ile plików jest już gotowych. Pod przyciskami narzędzie podsumowuje łączny rozmiar plików przed konwersją i po niej oraz podaje, ile zaoszczędziłeś albo o ile pliki urosły. Gotowy plik pobierasz przyciskiem Pobierz w jego wierszu, a przyciskiem Usuń zdejmujesz go z kolejki.

Wiele plików naraz i jedno archiwum ZIP

Do kolejki dodasz kilka albo kilkadziesiąt plików naraz. Przycisk Pobierz wszystkie zapisuje pojedynczy plik prosto na dysk, a kilka plików pakuje w jedno archiwum ZIP. Przy kilku pobraniach naraz Chrome pyta o zgodę na pobranie wielu plików, a jedno archiwum pobiera się od razu. Archiwum powstaje w przeglądarce szybko, bo obrazy są już skompresowane i trafiają do niego bez ponownego pakowania. Pliki o tej samej nazwie dostają w archiwum kolejny numer, na przykład zdjecie-2.png, więc każdy plik zostaje zapisany osobno.

Formaty, które obsługują biblioteki w przeglądarce

Konwerter rysuje obraz na płótnie przeglądarki, czyli w elemencie canvas, i z niego zapisuje plik. Chrome, Edge i Firefox zapisują z płótna JPG, PNG i WebP, a Safari tylko JPG i PNG. Pozostałe formaty obsługujemy bibliotekami, które także pracują w przeglądarce, na Twoim urządzeniu:

• AVIF zapisuje biblioteka libavif skompilowana do WebAssembly, czyli formatu, w którym kod napisany w innych językach programowania działa w przeglądarce. Plik kodera pobiera się dopiero przy pierwszej konwersji, więc strona otwiera się szybko także u osób, które tylko czytają treść.
• WebP w Safari, także na iPhonie i iPadzie, zapisuje biblioteka libwebp, również skompilowana do WebAssembly. Narzędzie raz sprawdza, czy przeglądarka sama zapisuje WebP, i pobiera koder tylko wtedy, gdy przeglądarka tego nie potrafi. Oba kodery pochodzą z aplikacji Squoosh.
• HEIC, czyli format zdjęć z iPhone'a, odczytuje biblioteka heic2any.
• TIFF odczytuje i zapisuje biblioteka UTIF.
• GIF zapisuje koder gifenc, który dobiera paletę 256 kolorów i zachowuje przezroczystość.
• BMP zapisujemy własnym koderem, który składa plik bajt po bajcie. Wynik jest dzięki temu identyczny w każdej przeglądarce.

Koder AVIF ma ustawienie szybkości w skali od 0 do 10. Przy domyślnej wartości 6 zdjęcie o wymiarach 1920 na 1280 pikseli zapisywało się w 7,5 sekundy. Przy wartości 9 zapis trwa 0,7 sekundy. Plik jest wtedy większy o 2,4 procent, a różnica jakości mierzona wskaźnikiem PSNR wynosi 0,48 decybela. Wybraliśmy wartość 9, bo koder pracuje w tym samym wątku co strona, więc krótszy zapis to krótsze czekanie na reakcję interfejsu. Formaty bez przezroczystości, czyli JPG i BMP, dostają na przezroczystych obszarach białe tło.

Animacje, bardzo duże obrazy i pliki w innym formacie

Płótno przeglądarki mieści jedną klatkę obrazu. Dlatego przy animowanym pliku GIF albo AVIF narzędzie rozpoznaje animację z zawartości pliku i pokazuje przy nim informację Plik z animacją — zapisujemy pierwszą klatkę. Wiesz wtedy od razu, jaki plik dostaniesz.

Pojedynczy plik może ważyć do 100 MB. Format WebP mieści obraz o boku do 16 383 pikseli, a płótno przeglądarki przyjmuje bok do 16 384 pikseli. Tę różnicę jednego piksela zmierzyliśmy w przeglądarce Chromium, więc bardzo duże obrazy skalujemy proporcjonalnie do granicy formatu, zanim trafią do kodera. Gdy dodasz plik w formacie innym niż ten, który obsługuje konwerter, zobaczysz komunikat z nazwą właściwego formatu, na przykład Dodaj pliki JPG.

Tabele z pomiarem wagi plików

Konwertery formatu obrazu mają na stronie tabelę z wagą plików przed konwersją i po niej. Liczby w tych tabelach pochodzą z naszego pomiaru. Pliki testowe przepuściliśmy przez nasze konwertery w przeglądarce Chromium sterowanej przez Playwright, czyli narzędzie do automatycznej obsługi przeglądarki. W zestawie są zdjęcia, zrzut ekranu, logo i ikona z przezroczystym tłem oraz strona tekstu w rozdzielczości 200 DPI. Każdy pobrany plik otworzyliśmy i sprawdziliśmy jego format, wymiary i przezroczystość. Na stronie konwertera JPG na WebP zdjęcie o wymiarach 1920 na 1280 pikseli waży 369,8 KB jako JPG i 218,2 KB jako WebP.

PDF w obie strony

Konwertery PDF na JPG, PNG i WebP odczytują dokument biblioteką pdf.js i zamieniają każdą stronę na osobny obraz, oznaczony w kolejce numerem strony. Wszystkie strony pobierasz jednym archiwum ZIP.

Konwertery obrazów na PDF układają każdy obraz na osobnej stronie A4, na środku i z marginesem. Zaznaczone pole Połącz wszystkie obrazy w jeden dokument PDF składa jeden plik z całej kolejki, w kolejności z listy. Po odznaczeniu pola każdy obraz dostaje własny plik PDF. Grafika SVG trafia do dokumentu jako wektor, więc wydrukowane logo jest ostre w każdej skali. Gdy plik SVG zawiera elementy, których biblioteka svg2pdf nie przetwarza, na przykład filtry, narzędzie zapisuje go jako obraz w rozdzielczości druku.

Jak działają edytor zdjęć i generator favicon?

Edytor zdjęć zmienia rozmiar zdjęcia, kadruje je i zapisuje w wybranym formacie. Po dodaniu pliku w polu Dodaj zdjęcie karta Parametry obrazu pokazuje wymiary oryginału, proporcje, wymiary docelowe, format wejściowy i wyjściowy, kształt kadru oraz wagę pliku. Po prawej stronie są Narzędzia kadrowania podzielone na zakładki Wymiary w px, Gotowe formaty, Kształty kadru, Przybliżenie, Pozycja i Kolor siatki.

W zakładce Wymiary w px wpisujesz szerokość i wysokość, a zaznaczone pole Zachowaj proporcje uzupełnia drugi wymiar automatycznie. Zakładka Gotowe formaty zawiera wymiary publikowane przez serwisy społecznościowe i typowe grafiki na strony internetowe. Znajdziesz tam na przykład post pionowy na Instagramie o wymiarach 1080 na 1350 pikseli. Jest też okładka strony na Facebooku o wymiarach 820 na 312 pikseli oraz obraz podglądu linku o wymiarach 1200 na 630 pikseli.

Kształt kadru zmienisz na prostokąt, kwadrat albo koło. Przy kole zapisany plik PNG albo WebP ma przezroczyste tło poza kształtem, co przydaje się przy zdjęciach profilowych. Podgląd kadru pokazuje jasnym obszarem dokładnie ten fragment zdjęcia, który trafi do pliku. Kadr przesuwasz na podglądzie, suwakami Poziom (X) i Pion (Y) albo przyciskami wyśrodkowania. Na koniec wybierasz format JPG, PNG albo WEBP, ustawiasz jakość i klikasz Zmień rozmiar i pobierz. Po wgraniu kolejnego zdjęcia kadr, przybliżenie i kształt wracają do ustawień początkowych, więc nowe zdjęcie kadrujesz od początku.

Generator favicon robi z jednego obrazu komplet ikon strony internetowej. Wgrywasz logo w formacie PNG, JPG albo SVG, w sekcji Ustaw tło wybierasz przezroczyste tło albo kolor tła i klikasz Generuj favicon. Narzędzie składa plik favicon.ico, który mieści w sobie trzy rozmiary ikony: 16, 32 i 48 pikseli. Oprócz niego tworzy pliki PNG o boku 16 i 32 pikseli oraz ikonę apple-touch-icon o boku 180 pikseli. Na koniec dokłada ikony o boku 192 i 512 pikseli dla aplikacji PWA, czyli stron, które można zainstalować na telefonie jak aplikację.

Plik .ico składamy sami z trzech obrazów PNG. Nagłówek pliku wskazuje, gdzie zaczyna się każdy rozmiar, a przeglądarka i system wybierają ten, który pasuje do miejsca ikony. Na karcie przeglądarki wyświetla się więc obraz przygotowany dokładnie w tym rozmiarze. Podgląd pokazuje, jak logo wygląda w małym rozmiarze na karcie przeglądarki i w większym rozmiarze. Lista plików podaje wymiary i wagę każdej ikony, a pliki pobierasz pojedynczo albo wszystkie naraz przyciskiem Pobierz.

Jak działają narzędzia do kolorów?

Tester kontrastu kolorów sprawdza, czy tekst będzie czytelny na wybranym tle. Wpisujesz kolor tekstu i kolor tła albo wybierasz je z próbnika, a narzędzie liczy współczynnik kontrastu według WCAG 2.1. Wynik widzisz w trzech kartach. Karta Tekst zwykły ma progi AA 4,5:1 i AAA 7:1. Karta Tekst duży / pogrubiony ma progi AA 3:1 i AAA 4,5:1. Karta Ikona ma próg AA 3:1. Każda karta pokazuje Twój przykładowy tekst albo ikonę w wybranych kolorach, a oznaczenia progów od razu mówią, które warunki spełnia para kolorów.

Przycisk Zamień kolory miejscami odwraca kolor tekstu i tła. Gdy kontrast jest za niski, wybierasz w polu Cel dopasowania próg, który chcesz osiągnąć, i klikasz Dopasuj. Narzędzie zachowuje wtedy odcień i nasycenie Twojego koloru tekstu, zmienia jego jasność w krokach co pół procenta i proponuje wariant, który spełnia próg przy najmniejszej zmianie. Przyciskiem Ustaw wstawiasz go do pola.

Generator palet kolorów buduje z jednego koloru 17 palet. Wpisujesz kod HEX albo wybierasz kolor z próbnika i klikasz Zaktualizuj kolor, a przycisk Losowy kolor losuje kolor bazowy. Wśród palet są układy z koła barw, czyli paleta monochromatyczna, analogiczna, komplementarna, triadyczna i tetradyczna. Są też palety pastelowa, ciemna, ciepłych i chłodnych tonów oraz paleta o wysokim kontraście. Każdy kolor ma kod HEX, zapis HSL i przycisk kopiowania, a każda paleta krótki opis, skąd biorą się jej odcienie.

Ekstraktor kolorów z obrazu wyciąga ze zdjęcia do 12 dominujących kolorów. Obraz analizuje przeglądarka, a przy każdym kolorze masz kod HEX, zapis RGB i przycisk kopiowania. Konwertery HEX na RGB, RGB na HEX, RGB na CMYK i CMYK na RGB działają tak samo jak konwertery jednostek opisane wyżej, z próbką koloru przy polu.

Jak działają narzędzia do tekstów i danych?

Licznik długości meta title i description sprawdza, czy tytuł i opis strony zmieszczą się w wynikach wyszukiwania Google. Pod każdym polem widzisz liczbę znaków, liczbę słów i szerokość tekstu w pikselach. Obok pól stoi podgląd wyniku wyszukiwania z Twoim tytułem i opisem.

Szerokość mierzy przeglądarka. Narzędzie rysuje tekst na niewidocznym płótnie czcionką systemową, tytuł w rozmiarze 20 pikseli, a opis w rozmiarze 15 pikseli. Liczymy piksele, bo o tym, czy tytuł zmieści się w całości, decyduje także szerokość liter. Tytuł z literami W i M zajmuje więcej miejsca niż tytuł z tą samą liczbą liter i, l oraz t.

Oznaczenie Za krótki dostaje tytuł krótszy niż 35 znaków albo węższy niż 350 pikseli. Oznaczenie Za długi dostaje tytuł dłuższy niż 65 znaków albo szerszy niż 580 pikseli. Dla opisu dolna granica to 100 znaków i 430 pikseli, a górna 165 znaków i 920 pikseli. Wszystko pomiędzy tymi granicami ma oznaczenie Dobra długość.

Licznik słów i znaków liczy w trakcie pisania słowa, znaki ze spacjami, znaki bez spacji i zdania. Przycisk Kopiuj tekst kopiuje całą treść pola, a przycisk Wyczyść opróżnia pole.

Generator Lorem Ipsum tworzy tekst zastępczy do projektów stron i grafik. Wybierasz tryb Akapity, Zdania albo Słowa, wpisujesz ilość, wybierasz styl tekstu i klikasz Generuj. Stylów jest osiem, wśród nich klasyczny Lorem Ipsum, Business Ipsum i Legal Ipsum. Jeden styl w każdej wersji językowej składa tekst ze słów danego języka: po polsku nazywa się Polski wypełniacz, a po niemiecku Deutsche Füllwörter. Gotowy tekst kopiujesz przyciskiem Kopiuj tekst albo zapisujesz przyciskiem Pobierz .txt.

Konwertery z podkategorii Zmiana formatu zamieniają JSON na CSV, XML i YAML oraz z powrotem, a także Markdown na HTML i HTML na Markdown. Tekst wklejasz w lewe pole albo wgrywasz plik przyciskiem, na przykład Wgraj plik CSV, i klikasz Konwertuj. Wynik kopiujesz przyciskiem Kopiuj albo zapisujesz przyciskiem Pobierz.

Konwerter CSV na JSON sam rozpoznaje znak, którym plik rozdziela kolumny. Sprawdza pierwszy wiersz i wybiera znak, który występuje w nim najczęściej: przecinek, średnik, tabulator albo pionową kreskę. Przydaje się to przy plikach z polskiego Excela, który rozdziela kolumny średnikiem, bo przecinek jest u nas znakiem dziesiętnym. Wartość w cudzysłowie zachowuje przecinki i średniki w środku, a pierwszy wiersz daje nazwy pól każdego obiektu JSON.

W podkategorii Liczby i czas działają konwertery liczby dziesiętnej na zapis binarny i szesnastkowy, konwerter prędkości łącza z megabitów na megabajty na sekundę oraz konwerter znacznika czasu Unix. Wszystkie mają te same pola i przyciski co konwertery jednostek.

Jak działają generator stopki mailowej i generator kodów QR?

Generator stopki mailowej był jednym z naszych pierwszych narzędzi. Na górze wybierasz jeden z ośmiu układów stopki: Standard, Pasek u góry, Kolumna etykiet, Wyśrodkowany, Kompaktowy, Dwie kolumny, Minimalistyczny albo Pasek na dole. Pod układami jest edytor podzielony na zakładki Dane, Przyciski, Media społecznościowe, Wygląd, Styl tekstu, Odstępy i Klauzula. Obok edytora widzisz podgląd stopki, który przełączasz między jasnym tłem, ciemnym tłem i szachownicą.

Programy pocztowe czytają HTML inaczej niż przeglądarki, dlatego stopkę składamy z tabel i stylów wpisanych bezpośrednio w znaczniki. Ikony serwisów społecznościowych to pliki PNG na naszej domenie. Według serwisu caniemail.com Gmail, Outlook i Yahoo Mail usuwają z wiadomości grafiki SVG, a Gmail nie wyświetla też obrazów zapisanych w kodzie jako Base64. Plik ikony ma 72 piksele, czyli trzy razy więcej niż największa ikona w stopce, więc na ekranach o dużej gęstości pikseli ikony są ostre.

Generator sam buduje działające linki. Numer +48 12 345 67 89 wew. 12 zamienia na link tel:+48123456789, a numer wpisany w polu WhatsApp na adres wa.me. Adresy wpisane w pola przechodzą przez filtr, który odrzuca niebezpieczne protokoły, na przykład javascript:, a pozostałe dane trafiają do kodu stopki jako zwykły tekst.

Gotową stopkę kopiujesz przyciskiem Kopiuj stopkę (Gmail / Outlook) i wklejasz w ustawieniach poczty. Kopiuj kod HTML kopiuje sam kod, Pobierz jako HTML zapisuje plik, a Pokaż kod HTML otwiera podgląd kodu. Do skopiowania stopki potrzebne są co najmniej imię i nazwisko oraz adres e-mail. Dane stopki zapisują się w pamięci przeglądarki, więc po powrocie na stronę pracujesz dalej. Przyciskiem Eksportuj ustawienia zapiszesz plik .json, a przyciskiem Importuj ustawienia wczytasz go na innym komputerze.

Generator kodów QR zbudowaliśmy, bo klienci często chcieli mieć kod QR w projektach graficznych. W polu Typ danych wybierasz Adres URL, Tekst, Wizytówka (vCard), E-mail albo Telefon, a narzędzie pokazuje pola dla wybranego typu. Podgląd kodu odświeża się przy każdej zmianie danych.

Ustawiasz rozmiar w pikselach, margines, czyli pusty pas wokół kodu potrzebny skanerowi, kolor kodu i kolor tła. Gdy kontrast między kolorami spadnie poniżej 3:1, narzędzie ostrzega, że kod może być trudny do zeskanowania. Poziom korekcji błędów ma cztery stopnie. Kod na poziomie L da się odczytać przy uszkodzeniu do 7 procent, na poziomie M do 15 procent, na poziomie Q do 25 procent, a na poziomie H do 30 procent. Podpowiedź pod polem radzi, żeby do druku wybrać rozmiar co najmniej 300 pikseli i poziom H. Kod pobierasz jako PNG albo SVG, a plik SVG jest ostry w każdej skali druku.

Jakiej technologii użyliśmy?

Witryna działa na Next.js 16 i React 19, a kod piszemy w TypeScript. Style powstają w Tailwind CSS 4, a stronę publikujemy na platformie Vercel. Arteon Tools i strona naszej agencji to jedno repozytorium z dwiema aplikacjami i wspólnym pakietem komponentów. Spis treści, panele pytań i formularz kontaktowy piszemy raz i używamy ich na obu stronach.

Każda strona narzędzia powstaje z wyprzedzeniem, podczas budowania witryny, jako gotowy plik HTML z treścią, tabelami i danymi strukturalnymi. Przeglądarka dostaje od razu kompletną stronę, a kod narzędzia uruchamia się po jej wczytaniu. React Compiler sam zapamiętuje wyniki pracy komponentów, dzięki czemu wpisanie liczby odświeża tylko te elementy strony, które się zmieniły.

Wszystkie narzędzia opisuje jedna lista w kodzie. Z niej powstają menu, adresy stron w ośmiu językach, okruszki nawigacyjne, powiązania między wersjami językowymi, mapy witryny, wyszukiwarka i stopka. Nowe narzędzie wymaga wpisu na tej liście i plików z treścią w każdym języku. Menu, mapy witryny i linki między językami aktualizują się wtedy same.

Biblioteki do plików pobierają się dopiero wtedy, gdy są potrzebne. Biblioteka pdf.js wczytuje się przy pracy z plikiem PDF, heic2any przy zdjęciu z iPhone'a, a jsPDF przy zapisie dokumentu. Tak samo działają js-yaml, marked i turndown w konwerterach danych. Obrazy na stronach przeglądarka dostaje w formacie AVIF albo WebP, zależnie od tego, który obsługuje, a czcionkę Inter wysyłamy z naszej domeny.

Po zbudowaniu witryny przepuszczamy gotowy JavaScript przez kompilator SWC, który zapisuje go w składni standardu ES2019. Dzięki temu kod uruchamiają także starsze przeglądarki, które nowszej składni jeszcze nie znają.

Nagłówek Content Security Policy wskazuje przeglądarce, z jakich adresów strona może wczytywać skrypty, a osobne uprawnienie wasm-unsafe-eval pozwala uruchomić kodery WebAssembly. W krajach Unii Europejskiej i Europejskiego Obszaru Gospodarczego, w Wielkiej Brytanii i w Szwajcarii zgody na analitykę i reklamy są domyślnie wyłączone, dopóki nie zaznaczysz ich w komunikacie o prywatności.

Jak przygotowujemy strony narzędzi dla Google i dla AI?

Każde narzędzie ma w każdym języku własny adres zapisany w tym języku. Konwerter galonów na litry ma takie adresy:

• po polsku arteontools.com/pl/miary/objetosc/konwerter-galonow-na-litry,
• po angielsku arteontools.com/measurements/volume/gallons-to-liters-converter,
• po niemiecku arteontools.com/de/masse/volumen/gallonen-in-liter-umrechner,
• po czesku arteontools.com/cs/miry/objem/prevodnik-galonu-na-litry.

W kodzie każdej strony są linki hreflang do wszystkich ośmiu wersji językowych i wskazanie wersji domyślnej. Na ich podstawie Google może pokazać w wynikach wersję w języku osoby, która szuka. Każdy język ma też własną mapę witryny z adresami stron, zdjęciami i datą ostatniej zmiany treści.

Wstęp pod tytułem podaje od razu najważniejszą informację. Na stronie konwertera galonów na litry brzmi ona tak: Galon amerykański to 3,785 litra, a brytyjski 4,546 litra. Strona narzędzia ma dane strukturalne JSON-LD z opisem strony, opisem aplikacji, okruszkami nawigacyjnymi, pytaniami i odpowiedziami oraz danymi organizacji. Adres, pod którym nie ma strony, zwraca kod 404, więc do indeksu nie trafiają puste adresy.

Menu, okruszki nawigacyjne i spis treści są w kodzie HTML od pierwszej chwili, także linki kategorii, których nikt nie rozwinął. Robot wyszukiwarki widzi więc wszystkie powiązania między narzędziami bez uruchamiania skryptów. W głównym katalogu domeny stoi też plik llms.txt z opisem witryny i spisem narzędzi, zapisany w formacie proponowanym dla modeli językowych.

Osiem języków i dwa kolejne w przygotowaniu

Narzędzia działają po angielsku, polsku, niemiecku, hiszpańsku, francusku, portugalsku, włosku i czesku. Tłumaczymy wszystkie etykiety pól, przyciski, jednostki i komunikaty, a teksty pod narzędziami piszemy osobno dla każdego rynku. Niemiecka wersja konwertera kilogramów na funty wyjaśnia, że funt podany w przepisie, u masarza albo na targu to w Niemczech 500 gramów. Francuska wersja tego samego konwertera opisuje Kanadę, gdzie funt jest używany obok kilograma i ma 453,59 grama.

Język strony zmienia też zapis liczb. W wersji angielskiej wynik ma kropkę dziesiętną, a w pozostałych siedmiu przecinek. Pole konwertera odczytuje wpis według zasad języka strony, tak jak opisaliśmy to przy konwerterach jednostek.

Pracujemy nad wersją arabską. Arabski zapisuje się od prawej do lewej, więc cały układ strony musi się odwrócić: menu zaczyna się po prawej stronie, wyszukiwarka stoi po lewej, a kolumny z treścią i narzędziem zamieniają się miejscami. Komponenty piszemy na logicznych klasach Tailwinda, na przykład ms- i me- w miejsce ml- i mr-. Klasy logiczne oznaczają początek i koniec wiersza, więc same dopasowują się do kierunku pisma. Test automatyczny przegląda kod komponentów i nie przechodzi, gdy pojawi się w nim klasa przypisana na stałe do lewej albo prawej strony. Arabskie litery wyświetla czcionka Noto Sans Arabic, a litery łacińskie Inter.

Przygotowujemy też wersję indonezyjską. Adresy stron dostaną nazwy w języku indonezyjskim, na przykład /id/gambar/konversi-format/png-ke-jpg dla konwertera PNG na JPG. Liczby zapisuje się tam z przecinkiem dziesiętnym i kropką oddzielającą tysiące, więc pola konwerterów odczytają wpis 2.500 jako dwa i pół tysiąca. Obie wersje pojawią się na stronie razem z pierwszymi narzędziami z pełną treścią.

Co wtorek nowa paczka narzędzi

Nowe narzędzia i poprawki publikujemy paczkami w każdy wtorek. Każde narzędzie najpierw sprawdzamy u siebie: działanie przy nietypowych wpisach i plikach, liczby w treści, linki oraz zrzuty ekranu w każdym języku. We wtorek na stronę trafiają narzędzia, które są gotowe.

Na witrynie przygotowujemy sekcję Aktualności. Każdy wpis opisze jedną wtorkową paczkę: jakie narzędzia doszły, co zmieniliśmy w istniejących i jak z tego skorzystać. Pierwszy wpis opisuje nowe konwertery jednostek, w tym dwie nowe grupy: Ciśnienie i Prędkość. Wpisy przygotowujemy po polsku i po angielsku.

Nad czym pracujemy teraz?

Nowe narzędzia do analizy tekstu

Najwięcej pracy wkładamy teraz w narzędzia do tekstu. Każde z nich ma własny panel wyników dopasowany do jednego zadania.

Licznik sylab pokazuje sumę sylab, podział każdego wyrazu na sylaby i liczbę sylab w każdym wersie. Wiersz wklejony do pola dostaje wynik linijka po linijce, więc od razu widać, czy wersy trzymają tę samą miarę. Podział opiera się na zasadzie, że do następnej sylaby przechodzi najdłuższa grupa spółgłosek, od której może zaczynać się polski wyraz. Dlatego słowo polski dzieli się na pol-ski.

Wskaźnik czytelności Flesch podaje wynik w skali od 0 do 100, poziom trudności, średnią liczbę sylab na słowo i nazwę użytego wzoru. Wersje językowe liczą różnymi wzorami: niemiecka wzorem Amstada, francuska wzorem Kandela i Molesa, włoska indeksem Gulpease, a hiszpańska i portugalska wzorem Fernándeza-Huerty. W polskiej wersji współczynnik przy sylabach dobraliśmy pomiarem, dzięki czemu wynik polskiego tekstu da się porównać z wynikiem angielskiego.

Indeks czytelności FOG podaje, ile lat nauki potrzeba, żeby swobodnie zrozumieć tekst. Oprócz wyniku pokazuje poziom, liczbę i udział wyrazów trudnych, średnią długość zdania oraz listę wyrazów, które podnoszą indeks. Robert Gunning, autor wzoru z 1952 roku, uznał za trudne wyrazy o trzech sylabach i dłuższe. W polskiej wersji próg wynosi cztery sylaby, tak jak w aplikacji Jasnopis, którą opracowali naukowcy z Uniwersytetu SWPS i Polskiej Akademii Nauk.

Kalkulator czasu czytania przyjmuje wklejony tekst albo samą liczbę słów i podaje czas w pełnych minutach. Tempo wybierasz przyciskami Czytanie po cichu, Czytanie na głos i Własne tempo. Liczby różnią się między językami, bo polskie słowa są średnio dłuższe od angielskich. Tempo czytania na głos, 166 słów na minutę, pochodzi z norm testu szybkości czytania IReST opublikowanych w 2012 roku. Tempo czytania po cichu, 204 słowa na minutę, wyliczyliśmy wzorem z metaanalizy Marca Brysbaerta z 2019 roku, do którego podstawiliśmy średnią długość polskiego słowa zmierzoną na treściach naszych narzędzi.

Zmiana wielkości liter zamienia cały tekst w jednym z pięciu trybów: WIELKIE LITERY, małe litery, Pierwsza litera zdania, Pierwsze Litery Wyrazów i Odwróć wielkość liter. Polskie znaki przechodzą przez każdy tryb bez uszkodzenia. Licznik słów i znaków dostanie z kolei liczbę akapitów i średnią długość zdania.

Wyszukiwarka narzędzi

W pasku nawigacji pojawi się pole Szukaj narzędzia. Lista podpowiedzi rozwija się pod polem w trakcie pisania i pokazuje do siedmiu narzędzi z krótkim opisem, a pod nimi link Zobacz wszystkie wyniki. Strzałki przesuwają zaznaczenie, a Enter otwiera zaznaczone narzędzie. Pierwsze naciśnięcie klawisza Escape zamyka listę, a drugie czyści pole. Pole działa w zwykłym formularzu, więc wyszukiwanie zadziała także wtedy, gdy skrypty strony jeszcze się nie wczytały.

Nowe jednostki, kolory i dokumenty

• W kategorii Miary pojawią się grupy Ciśnienie i Prędkość, w których przeliczysz bary, psi, kilopaskale, atmosfery oraz kilometry i mile na godzinę. Przybędą też kolejne jednostki długości, objętości i wagi, na przykład centylitry, cupy, karaty i jednostki astronomiczne.
• W podkategorii Liczby i czas dojdą konwertery przepływności łącza w kilobitach, megabitach i gigabitach na sekundę oraz konwerter daty na znacznik czasu Unix. Konwerter znacznika czasu rozpozna po liczbie cyfr, czy wpisałeś sekundy, milisekundy, mikrosekundy czy nanosekundy, i pokaże datę w czasie UTC albo w strefie czasowej ustawionej na Twoim urządzeniu.
• W kategorii Kolory dojdą konwertery HSL na HEX i RGB oraz w drugą stronę. Po nich zbudujemy symulator zaburzeń widzenia barw, który pokaże obraz albo paletę tak, jak widzi je osoba z protanopią, deuteranopią, tritanopią albo achromatopsją.
• Planujemy narzędzia do dokumentów i plików PDF, na przykład zmniejszanie wagi PDF-a oraz wybór rozmiaru strony i marginesu przy zapisie obrazów do PDF.
• Edytor zdjęć, generator favicon i generator stopki mailowej dostaną wersje wygodne na telefonie.

Gdzie zgłosić uwagę albo pomysł na narzędzie?

Pod treścią każdego narzędzia jest formularz z nagłówkiem Masz pytanie lub sugestię? W formularzu wpisujesz imię i nazwisko, adres e-mail i wiadomość, a odpowiedź dostaniesz na podany adres. Tą drogą zgłosisz błąd w tabeli, pomysł na nową funkcję albo narzędzie, którego Ci brakuje.

Drugim miejscem jest publiczne repozytorium Arteon Tools na GitHubie. Znajdziesz tam opis projektu, mapę narzędzi z linkami do kategorii i wszystkich wersji językowych oraz zakładkę Issues. W zgłoszeniu napisz, z którego narzędzia korzystałeś, co zrobiłeś, czego się spodziewałeś i w jakiej przeglądarce. Tyle wystarczy, żebyśmy odtworzyli problem i go poprawili. W tym samym miejscu zgłosisz narzędzie, którego brakuje, razem z opisem, co ma robić. Możesz też napisać do nas przez stronę kontaktu.

Czy zbudujemy podobne narzędzie dla Twojej firmy?

Kalkulator ceny, konfigurator produktu albo konwerter na stronie firmy możemy bez problemu zbudować w tej samej technologii co Arteon Tools. Narzędzie będzie liczyło wynik w przeglądarce klienta, strona będzie otwierała się błyskawicznie, a treść pod narzędziem możemy napisać tak, żeby odpowiadała na pytania, które klienci faktycznie wpisują w Google. Jeśli chcesz dodać takie narzędzie do swojej strony, napisz do nas.