Generator avatara (identicon)

Generator avatara identicon — unikalna grafika z tekstu

Identicon to geometryczny obraz generowany z tekstu. Zamiast domyślnego szarego awatara możesz nadać użytkownikowi rozpoznawalną, jego własną grafikę. Ten sam tekst zawsze daje identyczny wzór i kolor.

Jak to działa?

• Hash tekstu — z nicku lub e-maila liczony jest skrót SHA-256.
• Wzór — z bitu skrótu powstaje symetryczna siatka 5×5.
• Kolor — odcień wyznaczają pierwsze bajty skrótu.

Dzięki symetrii i determinizmowi identicony wyglądają jak małe herby, a przy tym są lekkie — to zwykły plik SVG.

Gdzie wykorzystać identicon?

• Domyślne awatary w serwisie, gdy użytkownik nie wgrał zdjęcia.
• Grafiki w komentarzach i na forach.
• Identyfikacja kont w narzędziach deweloperskich.
• Awatar dla botów i kont systemowych.

Dlaczego SVG?

SVG skaluje się bez utraty jakości, jest bardzo lekki i można go użyć w każdym rozmiarze — od 32 px w interfejsie do 512 px na stronie profilu. Można go też z łatwością edytować i zmieniać kolor.

Jak dokładnie powstaje identicon — od tekstu do siatki

Generator przyjmuje tekst — nick, adres e-mail albo dowolny identyfikator — i liczy z niego skrót SHA-256. Skrót ma 256 bitów, a zapisuje się go jako 64 znaki szesnastkowe, bo każdy znak szesnastkowy odpowiada 4 bitom (64 × 4 = 256). Ten krok decyduje o wszystkim, co widzisz dalej: nie ma tu losowania ani znacznika czasu, więc ten sam tekst daje zawsze ten sam skrót, a w konsekwencji identyczny obraz.

Wzór rysowany jest na siatce 5 kolumn na 5 wierszy, czyli 25 komórek. Siatka jest symetryczna względem środkowej kolumny: kolumna czwarta powtarza drugą, a piąta — pierwszą. Dzięki temu nie trzeba wyznaczać wszystkich 25 komórek. Wystarczy zdecydować o trzech kolumnach w każdym z pięciu wierszy: 5 × 3 = 15 komórek decyzyjnych, a pozostałe 10 to ich lustrzane odbicie. Każda z tych 15 komórek odpowiada jednemu bitowi skrótu — włączona albo wyłączona. Daje to 2 do potęgi 15, czyli 32768 możliwych układów wzoru.

Kolor nie jest osobnym ustawieniem — wyznaczają go pierwsze bajty skrótu. Skoro sam wzór zużywa tylko 15 z 256 bitów, do wyliczenia odcienia zostaje zapas danych. Dlatego zmiana koloru sprowadza się do zmiany tekstu: inna treść to inny skrót, a więc inny wzór i inny odcień. Wynikiem jest plik SVG — obraz opisany geometrycznie, a nie siatka pikseli, więc skaluje się bez rozmycia i można go wskazać w każdym miejscu, gdzie przyjmowany jest format wektorowy.

Przykład krok po kroku: od nicku do gotowego wzoru

1. Bierzemy krótki identyfikator, na przykład webp. Generator liczy z niego skrót SHA-256, czyli 256 bitów zapisanych jako 64 znaki szesnastkowe.
2. Do wzoru potrzeba tylko 15 pierwszych bitów. Dla ilustracji przyjmijmy, że układają się one tak: 1 0 1 | 1 1 0 | 0 1 0 | 1 0 0 | 0 1 1 — trzy bity na każdy wiersz, od góry do dołu.
3. Wiersz pierwszy: bity 1, 0, 1. Kolumna 1 włączona, kolumna 2 pusta, kolumna 3 (środkowa) włączona. Po odbiciu lustrzanym wiersz ma postać: 1 0 1 0 1, czyli 3 włączone komórki z 5.
4. Wiersz drugi: bity 1, 1, 0, po odbiciu 1 1 0 1 1 — 4 włączone komórki. Wiersz trzeci: bity 0, 1, 0, po odbiciu 0 1 0 1 0 — 2 komórki.
5. Wiersz czwarty: bity 1, 0, 0, po odbiciu 1 0 0 0 1 — 2 komórki. Wiersz piąty: bity 0, 1, 1, po odbiciu 0 1 1 1 0 — 3 komórki.
6. Suma: 3 + 4 + 2 + 2 + 3 = 14 włączonych komórek na 25, czyli 14 / 25 = 0,56 — wzór wypełnia 56 procent siatki. Do tego dochodzi odcień wyliczony z pierwszych bajtów skrótu. Ten układ jest jednym z 32768 możliwych i właśnie on zostałby zapisany jako plik SVG.

Parametry identiconu — zestawienie

Praktyczne wskazówki przy generowaniu awatarów

• Trzymaj się jednego identyfikatora — jeśli avatar ma reprezentować konto, generuj go zawsze z tego samego tekstu. Zmiana choćby jednej litery daje inny skrót, więc i inny obraz, a użytkownik traci rozpoznawalną ikonę.
• Sięgaj po nick lub adres e-mail, nie po dane osobowe — do wygenerowania wzoru wystarczy krótki, powtarzalny identyfikator. Im mniej wrażliwy tekst wejściowy, tym mniej wątpliwości przy jego przetwarzaniu.
• Osadzaj plik SVG bezpośrednio — gotowy plik wstawiony na stronę zachowuje ostrość w każdym rozmiarze i pozostaje lekki. Konwersja do PNG czy JPG odbiera obie te zalety.
• Oceń wzór w docelowym rozmiarze — siatka 5 × 5 czyta się dobrze również w małych wymiarach, ale przy bardzo małych ikonach sąsiednie komórki mogą się zlewać. Sprawdź to na realnym tle interfejsu, a nie w powiększeniu.
• Traktuj identicon jako oznaczenie, nie zabezpieczenie — to wygodny, deterministyczny obrazek, który pomaga odróżnić konta, ale nie potwierdza tożsamości i nie zastępuje weryfikacji użytkownika.

Czego narzędzie nie uwzględnia

• Brak kontroli nad kolorem — odcień wynika z pierwszych bajtów skrótu, więc nie ustawisz go suwakiem ani nie dopasujesz do identyfikacji wizualnej serwisu. Jedyny prosty sposób to zmiana tekstu wejściowego.
• Ograniczona pula wzorów — 32768 układów to niedużo przy dużym serwisie. Przy tysiącach kont podobne wzory pojawiają się częściej, niż sugerowałoby to intuicyjne odczucie.
• Powtórka wzoru nie jest wykluczona — do obrazu trafia tylko 15 bitów skrótu, a nie wszystkie 256, więc dwa różne teksty mogą dać ten sam wzór i ten sam kolor. Nie oznacza to błędu generatora.
• Wrażliwość na najdrobniejszą zmianę tekstu — wielkość liter, spacja czy kropka całkowicie zmieniają obraz. To zaleta przy rozróżnianiu kont, ale pułapka, gdy identyfikator bywa zapisywany niekonsekwentnie, na przykład raz z dużej litery, raz z małej.

Najczęstsze pytania