Inline filer i CSS, JavaScript og PHP

Lær at lave inline filer som billeder i HTML koden så der ikke behøves en separat fil for billedet

Introduktion

Inline filer går ud på at man i stedet for at have en fil til for eksempel et billede så encoder man i stedet billedets data og skriver det direkte i HTML koden.

Grunden til at man encoder data er for at den binære data skal laves om til tekst så den kan skrives i HTML koden.

Dataene kan for eksempel encodes i base64 format.

Demo

Her er et PNG billede brugt som inline-fil.

I stedet for at skrive stien til en fil i src attributten så kan man skrive data:image/png;base64, efterfulgt af den encoded data fra filen.
Node
Resultatet ovenfor er skabt af følgende kode


Her er 2 inline lydfiler i wave og ogg format.
Resultatet ovenfor er skabt af følgende kode


Her er en inline HTML fil brugt til et link.
Resultatet ovenfor er skabt af følgende kode


Her bruges et inline billede som baggrundsbillede i CSS.
Resultatet ovenfor er skabt af følgende kode

base64 i JavaScript

JavaScript har 2 methods kaldet atob() og btoa() til at konverter mellem binær og base 64.

atob() og btoa() funktionerne findes i de nyeste versioner af Firefox, Opera, Safari, Chrome og Internet Explorer.
Resultatet ovenfor er skabt af følgende kode

Base64 i PHP

I PHP kan man bruge funktionen base64_encode() til at encode HTML, billeder, lyd og andet data til base64 encoding så de kan inkluderes direkte i HTML koden.

base64_decode() funktionen kan bruges til at dekode fra base64 til det originale data.

I PHP manualen står at den base64 encoded data fylder cirka 33 % mere end originalen.
Orginal : <html><h1>Noget tekst</h1></html>
Base64 encoded : PGh0bWw+PGgxPk5vZ2V0IHRla3N0PC9oMT48L2h0bWw+
Resultatet ovenfor er skabt af følgende kode


Her tages data fra en billedfil og dataene encodedes i base64 og vises.
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90BFxAHB1/ZQ9MAAAACYktHRAD/h4/MvwAAARNJREFUGBl9wTFLQlEYgOH33o4UhASBJGFNLUGDS2vD3fsH1Q8IBPeGcnWRhsaGu/QHGhpdKwyEEKzJQRyiJMpQz/cdTwVx7hD4PJFnPkNw6R2KogiKICjvGIIxezgcjhmKw+E4xxA4lBs6jHEoebbZRTEEFsczVxF/DnwZS0wgCJ5MjCDEBBZFyUwRlJjAIggZiyLEBIJiyXimCIbAMUX4dZRoOilt8IYdGn6cJZJOS0Ve8UM4rK401inguEWuI89pdblRYBXljoc0f791sckiM3o0eUnMyfFao0gOoUeHz9TuGIQlunT5qvSbZrgwYUSOJ7qMKu0mzXLnsW4jbVHrDyDy7Ccf9UkkrVmtPeCfyDPfNxVRgTAaYNy9AAAAAElFTkSuQmCC
Resultatet ovenfor er skabt af følgende kode


Her tages dataene fra det samme billede og den encoded data bruges til at vise et billede inline.
Node
Resultatet ovenfor er skabt af følgende kode

Fil til base64 konverter

Her vil jeg prøve og lave en funktion så man kan vælge en fil på sin computer og få den lavet om til en base64 streng.
Koden er ikke færdig endnu.
Vælg en fil som skal konverteres til base64

data:[MIME type];base64, :

CSS background-image:

CSS background-image demo :

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.