Imagine în Base64

Acest convertor din imagine în Base64 transformă o poză într-un URI de date, un șir lung de text care încorporează imaginea direct, plus un fragment CSS de fundal gata de folosit. Poți include o imagine în linie în loc să faci legătura către un fișier separat.

Rulează local în browserul tău, așa că imaginea ta este citită pe dispozitivul tău și nu este niciodată încărcată.

Un URI de date poartă întreaga imagine în interiorul marcajului, așa că browserul nu face o cerere de rețea separată pentru a o prelua. Pentru resurse mici precum pictogramele, acel drum dus-întors economisit poate face o pagină să pară mai rapidă.

Problema este dimensiunea și cache-ul. Base64 adaugă un supliment de aproximativ 33 la sută deoarece reprezintă date binare cu un alfabet de text limitat, iar o imagine inclusă în linie nu poate fi stocată separat în cache, așa că este descărcată din nou cu fiecare pagină care o conține.

Regula generală este să incluzi în linie imaginile mici, pictogramele, logo-urile mici sau un sprite, unde evitarea unei cereri merită suplimentul, și să păstrezi imaginile mai mari ca fișiere normale pe care browserul le poate stoca în cache și încărca în paralel.

URI-urile de date funcționează oriunde este acceptat un URL: un src de img, un fundal CSS sau un câmp în JSON ori într-un șablon de e-mail. Asta le face utile pentru fragmente de sine stătătoare.