W tym poradniku przeczytasz o tym czym jest kodowanie Base64 oraz na czym polega zmiana ciągu bajtów tablicą znaków. Dowiesz się z niego także dlaczego w pewnych sytuacjach warto stosować kodowanie Base64 na stronie internetowej oraz jak to zrobić.
Zestaw znaków a kodowanie
Na sam początek zanim przejdziemy do kodowania Base64 zacznijmy od nieco bardziej ogólnego opisu dotyczącego tym czym w ogóle są zestawy znaków. Stanowią one bowiem wspólnie fundament współczesnego internetu, w tym stron internetowych, ale również wszelkiego rodzaju oprogramowania komputerowego. Zestaw znaków to swego rodzaju tablica zawierająca grupę elementów, które możemy wykorzystać w ramach pisanego kodu w dowolnym języku np. HTML.
Najpopularniejszą odmianą zestawu znaków w internecie jest międzynarodowy standard Unicode. Powstał on po to, aby rozwiązać problemy pierwotnych tablic, które były ograniczone lub po prostu zbyt trudne to zastosowania w różnych środowiskach. I chociaż cel został osiągnięty to sam zestaw znaków to jednak za mało, by móc z niego swobodnie korzystać. Aby wykorzystane znaki były odpowiednio „zrozumiane” potrzebne jest kodowanie, które pozwala zamienić znaki graficzne na ich liczbowe odpowiedniki. W ten sposób korzystając z zestawu znaków Unicode oraz kodowania UTF-8 jesteśmy w stanie w znormalizowany sposób przedstawić każdy język pisany obecnego świata.
Zdarza się, że różne zestawy znaków korzystają z tego samego kodowania.
Tytułowe Base64 jest właśnie jedną z takich form kodowania, która wykorzystuje zestaw znaków ASCII. Więcej o kodowaniu Base64 przeczytasz poniżej.
Base64 – na czym polega
Kodowanie Base64 polega na zamianie znaków na ciąg bajtów, który to może służyć następnie do różnych celów takich jak np. przesyłanie załączników w poczcie elektronicznej, czy też prezentowania obrazków na stronie internetowej. Kodowanie Base64 jak sama nazwa wskazuje, przypisuje każdemu z 64 znaków jeden z indeksów, czyli wartości. Ten z kolei w tablicy kodowania Base64 posiada określony kod binarny 0/1 [np. litera S = 010010). Następnie ciąg bajtów (ciąg wartości) dzielony jest na grupy po 3 bajty, które to z kolei mają łącznie 24 bity (jeden bajt = 8 bitów). 24 Bity są natomiast dzielone na 4 jednostki 6-bitowe co daje nam 64 możliwe wartości dla każdej z jednostek.
I tak dla przykładu nazwa naszej firmy Sirius Pro zapisana za pomocą zestawu znaków ASCII i kodowania Base64 będzie następująca:
U2lyaXVzIFBybw==
Poniżej możesz sprawdzić jaki kod binarny w Base64 jest przypisany dla każdego indeksu i znaku:
A = 0 = 000000
B = 1 = 000001
C = 2 = 000010
D = 3 = 000011
E = 4 = 000100
F = 5 = 000101
G = 6 = 000110
H = 7 = 000111
I = 8 = 001000
J = 9 = 001001
K = 10 = 001010
L = 11 = 001011
M = 12 = 001100
N = 13 = 001101
O = 14 = 001110
P = 15 = 001111
Q = 16 = 010000
R = 17 = 010001
S = 18 = 010010
T = 19 = 010011
U = 20 = 010100
V = 21 = 010101
W = 22 = 010110
X = 23 = 010111
Y = 24 = 011000
Z = 25 = 011001
a = 26 = 011010
b = 27 = 011011
c = 28 = 011100
d = 29 = 011101
e = 30 = 011110
f = 31 = 011111
g = 32 = 100000
h = 33 = 100001
i = 34 = 100010
j = 35 = 100011
k = 36 = 100100
l = 37 = 100101
m = 38 = 100110
n = 39 = 100111
o = 40 = 101000
p = 41 = 101001
q = 42 = 101010
r = 43 = 101011
s = 44 = 101100
t = 45 = 101101
u = 46 = 101110
v = 47 = 101111
w = 48 = 110000
x = 49 = 110001
y = 50 = 110010
z = 51 = 110011
0 = 52 = 110100
1 = 53 = 110101
2 = 54 = 110110
3 = 55 = 110111
4 = 56 = 111000
5 = 57 = 111001
6 = 58 = 111010
7 = 59 = 111011
8 = 60 = 111100
9 = 61 = 111101
+ = 62 = 111110
/ = 63 = 111111
Mamy także w tablicy Base64 dopełnienie [padding], który zajmuje cztery puste bity i służy do wypełniania jednostek w przypadku, gdy ilość pełnych bitów jest nie wystarczająca, czyli mniejsza niż 24. I to tyle jeżeli chodzi o teorię kodowania Base 64 ☺️
Kodowanie i dekodowanie Base64
Wydaje się nie takie proste prawda? 🤨 Na całe szczęście, aby skorzystać z kodowania Base64 nie musisz robić tego ręcznie, a wystarczy skorzystać do tego celu z dostępnych z darmo w internecie narzędzie do kodowania i dekodowania Base64. Co najważniejsze, kodowanie z użyciem Base64 jest w 100% odwracalne, oznacza to, że bez problemu można najpierw zakodować zestaw znaków to tablicy Base64, a następnie go odkodować.
Dotyczy to także zdjęć, które z powodzeniem mogą być używane na stronach internetowych z wykorzystaniem kodowania Base64. Na naszym blogu widoczne w menu górnym logo jest umieszczone właśnie nie jako grafika, a Base64. Ciąg znaków tego kodowania dla naszego loga jest bardzo długi i wygląda tak:
Kodowanie logo Sirius Pro za pomocą Base64.
A skoro mowa o Base64 w kontekście obrazków to przejdźmy teraz do tego kiedy stosować te kodowanie na stronie internetowej.
Base64 – kiedy stosować?
Jak już wspomnieliśmy kodowanie Base64 znalazło swoją niszę i z powodzeniem do dziś stosowane jest np. w programach pocztowych, czy też do szyfrowania niektórych plików, a nawet wystawiania certyfikatów SSL. Kodowanie Base64 wykorzystywane jest także dosyć często w języku HTML, a przypadku stron internetowych potrafi dać wymierne korzyści ich właścicielom.
Chodzi tutaj mianowicie o grafiki umieszczone w kodzie jako Base64 zamiast standardowego pliku graficznego. Główną zaletą korzystania do tego celu z Base64 jest mniejsza ilość zapytań HTTP wykonywanych po stronie serwera, ponieważ umieszczona w całości w kodzie HTML grafika nie musi być wczytywana jako dodatkowy zasób. Z tego powodu nie jest potrzebne otwieranie dodatkowego połączenia z serwerem, co szczególnie jest istotne w przypadku protokołów starszych niż HTTP/2. Co ważne, grafiki zakodowane w Base64 mogą być także przechowywane w bazie danych, co w pewnych sytuacjach pozwala na osiągnięcie dodatkowych korzyści.
Obrazki zakodowane w Base64 mogą być stosowane zarówno w elementach <img> jak i jako obrazek tła w CSS.
Najczęściej więc zalety korzystania z kodowania obrazków w Base64 będą dostrzegalne przy małych obrazkach oraz elementach umieszczonych w pierwszej widocznej części strony internetowej tzw. Above the fold. Należy jednak pamiętać, że pliki graficzne zakodowane za pomocą Base64 ważą więcej niż standardowe ich odpowiedniki, co czasami może przynieść efekt odwrotny do zamierzonego. Jednak rozsądne korzystanie z kodowania Base64 na stronie internetowej może poprawić jej wynik oraz szybkość ładowania o czym więcej przeczytasz w naszym poradniku Przyspieszanie WordPres. Odpowiednia optymalizacja grafik, w tym wykorzystanie do tego celu na stronie internetowej Base64 może pomóc szczególnie w rozwiązaniu problemów m.in. ze złym wynikiem Largest Contentful Paint.
I to w sumie tyle na temat kodowania Base64 🤓 mamy nadzieję, że wiesz już wystarczająco wiele na ten temat. Jeżeli potrzebujesz dodatkowych informacji to skorzystaj z komentarzy poniżej 👇 lub napisz do nas jeżeli chcesz skorzystać z naszej pomocy w konkretnym zadaniu.