Come visualizzare le immagini Basetop 10 in HTML

Durante la creazione di un documento HTML, è possibile includere immagini in vari modi. Questi possono utilizzare URL di immagini esterni, immagini locali e immagini Base64. Quando abbiamo incorporato un'immagine nel documento HTML, significa che diventa parte del file HTML. Quindi, incorporandolo come contenuto di base64 riduce le richieste HTTP. L'HTML “"Il tag può essere utilizzato per incorporare immagini codificate da base64.

In questo articolo, imparerai come vengono visualizzate le immagini Base64 in HTML.

Come aggiungere immagini di base64 in html?

La codifica di base64 riduce le richieste HTTP affinché il browser visualizzi le immagini HTML. Allo stesso tempo, il contenuto di Base64 sarà aumentato al 20-25 percento. Ciò indica che l'approccio Base64 è migliore per immagini di piccole e medie dimensioni e avrà un effetto maggiore sulle prestazioni di immagini di grandi dimensioni.

Mentre incorpora un'immagine di base64, l'URL di dati dell'immagine verrà considerato. L'URL di dati è diviso in due parti come segue:

• Primo componente: l'immagine codificata da base64.
• Secondo componente: la stringa codificata Base64.

Per incorporare l'immagine Base64 in HTML, controlla gli esempi indicati di seguito.

Esempio 1
Innanzitutto, aggiungi il “Tag con il "src" E "Al"Attributi per includere l'immagine. Aggiungi il tipo di supporto dati e la stringa Base64 all'attributo "SRC". L'attributo "Alt" definirà il testo che verrà visualizzato sul browser se l'immagine non è stata possibile caricare:

AP+GVAETAAABHULEQVRIIE3VSURDYBTF8V/TJLQLHW5I3RX8JG4+HZUCI+ALKILV0D3JWAFZF9HJWVZETIKOAM
E4jneyk5 kaicae+cd3uyfnh27yex5bq+hjga7aqov4w9hfd7dykwloi0ityzrtvm2mur6biodldecac8xhns0
CT68IOJNZC4ADNPCY 098PAMIPAQTYZ9L/WUIRQA1HYWDNoftBRCJJNYUZZWP6TUP2JGKPFZDOPMSB+HWPFX
4r+tfewjp9uy8goagja8octywl tjh3jfiehmjmmwkwipm1vjitazauyb4dqu6ongfeywuxjwjw5cpefyvdl8s8
Y/yglafqwatxlpwbb3jckh0xpxpcm0wcymc/pzggn/hn3o+g/pdzs7e69gnj57aaaaftksuqmcc ">

L'immagine seguente visualizza l'output del codice sopra indicato:

Esempio 2

Ap+Gvaetaaaceeleqvq4jz2qTuiuyrsfz73v15jqjkdmtyzgKaxrd1ijpubizjorvMilusg3lcpfyjvesq
Fvm9agonbnili4mkxmyreyja0w/scermk6ano06jjzfo9t0czwftlz3+fh3emauhw // jqglutouvvw1wccc
Yfvgxk7efy0sio3jr2bpvc8udmw73ymaqodba0u3xcu3hbs2gazmyzm5g41l12oaom/hmckjoxsksksjwljs
OCZXHVXO+l4oeenpl5nms63TugxdgbmRutxMBFrm+Vwdggoozfvlykr06nier7qq2ksskca5zffet
ota6/cnha6exkznqbsv2a8f1adjq
Fgbwcvbn1jx/qwok5qub5hyqovsx1n7xkbjntfaavwujjzkiidkphavkgv+4kramq85do5jxetsnzjzsr
Aadtoumqqj2/xmypqdrytmndlzwoaeq2mqm7mktcdiryjvrlysuqmwxduxatbcn9ecarm1ged6kkxfln
HO/ES1KSBCA6BGL9PKPTW5QNIXVNMLVAFAGBCBKBTND69VIXPCIKAIKAIMNDHFCSHG3L66D5/GK4JTK+CAQ
K35PYPAJOWIEJETTNN9VUKKCIXPFZTTJ1K6V5FPS9N+64RFAFD4GGCWZSSH3PJLRFQCIYKYJIHYJMQWW
Rgzydqffpa2ffx9x4lh3as7brofdn0i0n39r6yc4ucok3rh0c7svpy2oZZE9H+gabgakhhoejqawj/zp
orm/un36xfqlqm41qtahariuk9zxtaamfmunxsv/w8Mal8BBBBsAuiorf00aaaasuVork5Cyii = ">

Produzione

Esempio 3
Se l'immagine è leggermente più grande, la lunghezza della stringa di Base64 verrà aumentata come mostrato nell'esempio seguente:

Ap+Gvaetaaaje0leqvroge2afwzv1rnhp8/53dkc0hzahvjuxdhltjeilglkvqvlinmzg0taxic6jcb4khicix/
Yuczr+RIDCS+jg7t3fjiydrqjovs28qkzrqdx6fxelcmk3ns3onb77+9898dtobsfclm7zwvpcpnfznl+z/n9fs
85Z/MECY78X44S0UTXPMGIS2KSFUTG0RIH2DHYEGA3TUBHXKY1A9FE9YADIQPZTA3LQRYE1RCMM8M8ZZLF01O/Z
C5O+RZVDBIUGC60IHG91TSXRL891PXEZP7XQREAUTKAPKC1GIH6AGSNWATMVOEKHBJVWARBY8SHNAPPC0YMWYP
Yxlmj4mmyalug+mwvg316th2nwy1iro6m8mc91dmyombrusonxnfcyklohvlzjswpkaca/pwtm+use7egw1ox1e
M4SVXZK7RF65ZS2TQME9GG7UVQ0L075ZX1D17JN0RA1AYZHA2ZDDCYWAQ6D43N3EBD9RWKU2X5O4ZJVVV9C36H0D
SZNZGS7MHRQEOD3MBPHW8ZKRZUTMWRU7JGR181OSYA0EBOMEBDF4APAYCDI2LTNLF7FMV9LA9GSIGZM00C7BOAW
NoeMJL/WHI7ffvldxoazpfrds2axcc5i3dweumnwpq2adixacitr1xmfdlh/iwq/ivmjjnzg2c2c29xx0uh2tdod
wiv5h0t0powflblwiiwmhugobli0tupae7tvfropvi75hfgj6accqdviezizmytnnnnkpismhgovga3t6qlywjg
hk4ufnlcv94s9j5q9abaa1cn5ptq1+vm2qowhojcsluzuav8g1ov5uta+5b/y+b33ty0/68bra+ix+wv3nezz+
V/itas8atifk2zvq36kocf8txlp+xgtlplrgmvog44px7fh5w3ntsyjyu6hywk6qps0tqny2q7k+ax9blon9n
ZHP4PCFPRX4QFTA/J5IXB7/S4BWSQHNP5ZUFCXS/FMGXNNKARNFEU/VPHNCZXK2G6KPAQTixHvpGTH7W2BIYN
ppxCyo+6ebintaagexrfkszmbsmqwpop7hsw34ze1ne0zb39qcupefpoo9+vse+ecEiacxr7jznnt1pgdcavig
zlqqd0cx8bpxuzipui0welfhdnpt7acunu/ymtju4gieyv/nlc/lefuaciywbcwbiisynbfdgll8nll8vulgpr
84zv2+ord4w0m5qnmrugehaoxsyla3xij/3d135+8ymfelkbzikyzo8xvdv+ykhnh9izwspljnysxvv7qwunfs
AB2BG+d7vppzn3danlog2ps/funwzypgodlztnjwijbrfa87d9alsaswb+e8l7mmtq0omnorhykbsze5r5xnmcc
M5CDRBNWH4O5V+EQP1YBJF4JOENBGEHZ8TSEDUFB6PGVDPXGGVOVBZTSL96PBFNNAXPQ0MMX8QHZ5OIZ6HGFCK
Wyox+wbgmtqvymmuHilyaolnzrfgjr8zzvj5tukuo2iwcs83zq7hk7qab9ogqdv2ta5lpx7yzd6xgknzqbrg7q
KRLL2INV6W3ARAA4YSOOOGDMTDTDODQBIC+VBFP7QQOZ10KUBVZHZJVY7SFGGC8UWX+G7HK5HKG+10Y4Z62JEX
pq1btmgdvbfmwlo8qx0wny4mul4cphjqewla5bwdf/oauc0lzzyfcbchgqa6zbsdv7mhdnvewwj13bcezlgy3g
9kp2uqvdbdqhk2khkindxjakqa2bkhv8pmsqxy8efbq+cegv0jayffyvniwa8wch+piqe3j3m/jhe8itrfwv3yy
9v33uqo5kf8ndde4ocerboseqc8pi0qbqzodmfluy5o5pw3jyyqhjfktmdmfmwyizu7wtpikgt9ezkoufcixj3
NAGF02K464K/BSW+SLESRAGYUHKGYAWT0MPNWSW+sukncz4ifpjpqhjfhn7onukmbpgawwb+rh5/78eamwqpgh
Ldm3ukzzob3/lzdwiycpyr3gxmzmqk4+3ldlxv/876xdxtlfutbzdkbjacnajylis8mgmm3k32rzrqv6pid9nu
wgpugqzavahzoevnu9+hzxb8knqpa115ymjjemn8ynvawtitd3xgh4fo8+wf730qhugc9ebdovca76clw/rvcy
Fwnkarz5ijb63uvps3Kaffriqa6wh7mh9peupvlby9g+2dtqunic2/ww0eqsb5pfb6w0/rvq0xy/a1fwgeljmx
Oin8fldsu3qdmivcarnqmwsnpbmvig5lvi+7fx+ycwvkos5gbyi21va230k8gexx25vtr1mjp2if1fwlyquyd7
c+pav0wt63oiv7am9bgvddizqzsywxaotkedvxnsjrbddfqgznvnbccwe+gzkddal5ncz6qekh/yzdcbmqam
Zdk3abcdjp0suftm7oie37aiihpxbmopydhnysb4hp3heewmmwxw8smpdhsbvxffqxpvvfmtui/dvcpwksqaf
Sdbkpbdy7kznztxpyflhonyjosv03ek8anyaj2jct8i7zuvg1vqyk9x+bwycr0yhq0pskpwdgd+2awuxubum+2awuxubum+2awuxubum
2xbfwdlygvb48aopooqht1szm1vjpi0c6gwrla54rn9zxsxj ++ d2iofvi2bxjrjdisaxad9inuylnhyc21lxxb
Ekswa23vayjb68vbap9d8vvz+tuv22oj5wayaguqy2cybsijkchh7unaulyvzh1hqjbtucu31e/6exafdmmsh
N974OV9/elsxzmf8hsz7kpufDutw4iH+NZ8A0SQY30FC5/GWGNG73WRRJF6MMDWARS+QBD2USEAVH3L9SHWDXJ
GI66QFRKT8Z8XOAZ4PKDMGAB2C5VNRelfvkinzzcnwd4iojsddxx41vj5t/gfdhyd9c5khngsgmpk04xbn1gr
5kwuqr3rmzqnjm3vqz0728/9nlz2+oqjqlsmenjwi6yclysileng8dpabpjrgsm9xwwz6xd88di3oal+kv23p
KD15IBEE4Q63+2MADCHVO0OCWBP/ZA+H/ISPD45XOMSYM/HU7UJOZ4HNNN8CQYBHDOSQKGG6+CRLNG9YLJYQYVT
si5yooglt3ywobmhuessut7b3kpftk+0fi5qhniu6dfycnqg2l5odvawg70gczn24swo9kovky1aikc2dtyxdl
wpiwvn7rayxgj2duc3gj6hfojjtokjtq/mlxo3yvj+l8jic1jebh6vyh/bpekyqa8e+u6aaaaftksuqmcc '>

Produzione

Eccoci qui! Abbiamo imparato a incorporare le immagini di base64 in HTML.

Conclusione

Esistono tre metodi principali per incorporare immagini in HTML che sono directory locali, URL esterni e aggiunta di immagini Base64. Le immagini codificate Base64 sono utili in modo tale che includendo questi documenti HTML riducono le richieste HTTP necessarie per il browser. Per incorporare l'immagine Base64, utilizzare HTML “Tag insieme al "src"Attributo che specifica la stringa codificata Base64. Questo post ha spiegato la procedura per mostrare le immagini Base64 in HTML.