Base64 dla deweloperow web: zastosowania w JS, CSS i API
Deweloperzy web spotykaja Base64 w wielu kontekstach: preview pliku przed uploadem, przesylanie obrazow przez JSON API, osadzanie w CSS. WikiPlus Image to Base64 to szybkie narzedzie do testowania i generowania ciAgow Base64 bez pisania kodu.
JavaScript FileReader i preview przed uploadem
Przed wyslaniem obrazu na serwer, wiele formularzy pokazuje preview. To dzieje sie przez FileReader API: input.addEventListener('change', e => { const reader = new FileReader(); reader.onload = ev => { img.src = ev.target.result; }; reader.readAsDataURL(e.target.files[0]); }). readAsDataURL zwraca data URI (Base64). Obraz nigdy nie opuszcza przegladarki podczas podgladu.
Przesylanie obrazow przez REST API
Kiedy API przyjmuje obrazy jako JSON, czesto wymaga kodowania Base64: { 'image': 'iVBORw0KGgo...', 'type': 'png' }. To unika mulitpart/form-data. Wady: rozmiar JSON rosnie o 33%, parsowanie jest wolniejsze dla duzych obrazow. Zalety: proste w implementacji, latwe do debugowania, dziala z kazda biblioteka HTTP. WikiPlus Image to Base64 generuje string gotowy do wklejenia w testowaniu API przez Postman lub Insomnia.
Canvas i eksport jako Base64
Canvas API pozwala na generowanie obrazow w przegladarce i eksport jako Base64: const dataURL = canvas.toDataURL('image/png'). To jest uzywane w: narzedzia do edycji zdjec, edytory diagramow, generatory certyfikatow, narzedzia do podpisu online. Mozna nastepnie te dane wyslac na serwer lub zaofertowac do pobrania.
Webpack i automatyczne inline Base64
Nowoczesne bundlery (Webpack, Vite) moga automatycznie konwertowac male obrazy na Base64 podczas budowania projektu. Webpack url-loader: modules: { rules: [{ test: /\.(png|jpg)$/, use: [{ loader: 'url-loader', options: { limit: 8192 } }] }] }. Pliki ponizej 8 KB (8192 bajty) beda automatycznie konwertowane na Base64 inline. Wieksze beda kopiowane jako pliki zewnetrzne. WikiPlus przyda sie do testowania przed dodaniem do konfiguracji webpack.
Często zadawane pytania
- Jak zdekodowac Base64 z powrotem do obrazu w JavaScript?
- const binary = atob(base64String); nastepnie stworz Blob i URL: const blob = new Blob([...binary].map(c => c.charCodeAt(0)), {type: 'image/png'}); const url = URL.createObjectURL(blob).
- Jak sprawdzic rozmiar obrazu po zakodowaniu Base64?
- Rozmiar Base64 to okolo 4/3 rozmiaru binarnego. Wzor: base64Length = Math.ceil(binarySize * 4 / 3). Rozmiar ciagu Base64 to rozmiar, o ktory zwieksza sie dokument HTML lub CSS.
- Czy Base64 wplTwa na SEO?
- Obrazy osadzone jako Base64 nie sa indeksowane przez Google Images jako oddzielne zasoby. Dla obrazow waznych dla SEO (produkty, zdjecia w artykule) lepiej uzywaj zewnetrznych URL.