Din păcate, chiar și astăzi, unele pluginuri și bloguri de optimizare sugerează „optimizarea” imaginilor dvs. prin codificarea acestora în Base64 și includerea acestora direct în HTML.

optimizare

În această postare, vreau să abordez de ce în zilele noastre, aceasta este aproape întotdeauna o idee foarte proastă care a fost reportată de ani în urmă. Pe atunci, browserele web aveau limite grele asupra numărului de conexiuni simultane pe care le puteau trimite la server. Acest lucru a însemnat că un site web cu imagini grele ar trebui să aștepte cererile și să aștepte ca acestea să termine. Base64 a oferit o modalitate de a rezolva acest lucru prin utilizarea unei conexiuni HTTP deja deschise pentru a livra imagini încorporate direct în HTML sau CSS. Acest lucru a eliminat efectiv nevoia unui dus-întors suplimentar de care ar avea nevoie browserul pentru fiecare dintre fișiere.

Odată cu introducerea multiplexării care a sosit cu HTTP/2, browserele web au devenit incredibil de eficiente în furnizarea a sute de fișiere printr-o singură conexiune. Acest lucru funcționează în jurul majorității limitelor rezolvate de codificarea Base64 și, de fapt, înseamnă că Base64 face acum mai mult rău decât bine.

Pentru a ajunge la răspunsul de ce, mai întâi trebuie să stabilim ce este de fapt Base64. Mai simplu spus, Base64 este o schemă de codificare utilizată pentru a reprezenta date binare într-un format text. Acest lucru este util atunci când mediul de stocare sau livrare nu acceptă date binare, cum ar fi atunci când încorporează o imagine într-o bază de date, fișiere CSS sau HTML. Trebuie să aveți grijă să nu amestecați compresia cu codificarea. În timp ce compresia comprimă de fapt datele, codificarea definește doar o modalitate de codificare a datelor, ceea ce ne duce la prima problemă.

Creșterea dimensiunii descărcării

Deși Base64 este un mod relativ eficient de codificare a datelor binare, va crește în medie dimensiunea fișierului cu mai mult de 25%. Acest lucru nu numai că mărește factura lățimii de bandă, ci și crește timpul de descărcare.

CPU Overhead

Când livrați imagini în Base64, browserul trebuie mai întâi să decodeze șirurile codate Base64 și apoi să decodeze și imaginile, ceea ce introduce un strat suplimentar de lucru inutil. Base64 este foarte eficient, dar numărați în timpul de procesare GZip sau Brotli care se întâmplă pe server pentru a comprima răspunsul și milisecundele încep să adune rapid.

Probleme de stocare în cache

Al treilea număr este probabil cel mai mare ucigaș de performanță, dar poate nu cel mai evident la prima vedere. Când un utilizator vă accesează site-ul web, browserul va memora în mod automat imaginile la nivel local și apoi le va încărca direct de pe disc atunci când vizitați din nou aceeași pagină. Datorită modului în care funcționează Base64, browserul nu poate stoca imaginile la nivel local, așa că va trebui întotdeauna să le aducă de pe server sau CDN, ceea ce creează o încărcare suplimentară pe server, precum și crește factura lățimii de bandă.

O altă problemă aici este că, dacă imaginile dvs. sunt încorporate în codul dvs. HTML, rețelele de livrare a conținutului, cum ar fi BunnyCDN, nu pot cache fișierele și vor fi întotdeauna returnate de pe serverul dvs. de origine, care ar putea fi la mii de kilometri distanță.

SEO și experiență utilizator

Problemele nu se limitează doar la performanță. Folosind imagini codificate Base64 pe site-ul dvs. web, s-ar putea să vă răniți atât SEO-ul, cât și experiența utilizatorului.

Motivul pentru aceasta este că partajarea imaginilor Base64 este mult mai dificilă din cauza faptului că nu sunt de fapt accesibile printr-un URL public. Acest lucru înseamnă că crawlerele web și utilizatorii dvs. nu sunt capabili să obțină linkuri care să indice înapoi către site-ul dvs. web, ceea ce face ca partajarea conținutului să fie mult mai dificilă și potențial să afecteze „rangul paginii” dvs.

Când se folosește efectiv Base64?

Base64 are multe utilizări în tehnologie, dar dacă nu aveți un motiv foarte bun, ar trebui să încercați să evitați utilizarea acestuia ca parte a fișierelor HTML sau CSS. Există câteva cazuri marginale în care Base64 ar putea fi de fapt util.

Un astfel de exemplu ar fi imagini foarte mici, în care șirul Base64 este de fapt mai mic decât lungimea unui șir URL și suprasolicitare HTTP atunci când se conectează la un fișier imagine. Luați, de exemplu, un PNG transparent 1x1 pixel. În ciuda faptului că imaginea originală are o dimensiune de numai 68 de octeți, luând în considerare antetele HTTP etc., de fapt ajunge să fie mai mare decât șirul codificat Base64:

Dacă întâlniți vreodată un blog care vă sugerează să utilizați Base64 pentru a îmbunătăți performanța, asigurați-vă că îl luați cu un bob de sare și evaluați cu atenție dacă există beneficii reale care se aplică propriului dvs. caz de utilizare.