Como exibir BasEtop 10 Imagens em HTML

Ao criar um documento HTML, você pode incluir imagens de várias maneiras. Estes podem estar usando URLs de imagem externos, imagens locais e imagens base64. Quando incorporamos uma imagem no documento HTML, significa que ela se torna parte do arquivo html. Portanto, incorporá -lo como conteúdo base64 reduz as solicitações HTTP. O html “”A tag pode ser utilizada para incorporar imagens codificadas pela base64.

Neste artigo, você aprenderá como as imagens Base64 são exibidas em HTML.

Como adicionar imagens base64 em html?

A codificação base64 diminui as solicitações HTTP para o navegador exibir as imagens HTML. Ao mesmo tempo, o conteúdo base64 será aumentado para 20-25 %. Isso indica que a abordagem base64 é melhor para imagens de tamanho pequeno e médio e terá um efeito maior no desempenho de imagens grandes.

Ao incorporar uma imagem base64, o URL de dados da imagem será considerado. O URL de dados é dividido em duas partes da seguinte forma:

• Primeiro componente: a imagem codificada base64.
• Segundo componente: a sequência codificada base64.

Para incorporar a imagem base64 em html, confira os exemplos declarados abaixo.

Exemplo 1
Primeiro, adicione o “”Tag com a“src" e "alt”Atributos para incluir a imagem. Adicione o tipo de mídia de dados e a string base64 ao atributo "src". O atributo "alt" definirá o texto que será exibido no navegador se a imagem não puder carregar:

Ap+gvaetaaabhuleqvriie3vsurdybtf8v/tjlqlHw5i3rx8jg4+hzuci+alkilv0d3jwafzf9hjwvzetikoam
E4jneyk5 kaicae+cd3uyfnh27yex5bq+hjga7aqov4w9hfd7dykwloi0ityzrtvm2mur6biodldecac8xhns0
ct68iojnzc4Adnpcy 098pamipaqtyz9l/wuirqa1hywdnoftbrcjjjnyuzzwp6ttup2jgkpfzdopmssb+hwpfx
4r+tfewjp9Uy8GOAGJA8OCTYWl TJH3JFIEHMJMMWKWIPM1VJITAZAUYB4DQU6ONGFEYWUXJWJW5CPEFYVDL8S8
Y/yglafqwatxlpwbb3jckh0xpxpcm0wcymc/pzggn/hn3o+g/pdzs7e69gnj57aaaaaelelftksuqmcc ">

A imagem abaixo exibe a saída do código acima mencionado:

Exemplo 2

Ap+gvaetaaAaceeleqvq4jz2qtuiuyRsfz73v15jqjkdmtyzgkaxrd1ijpubizjorvmilusg3lcpfyjvesq
Fvm9agonBnili4mkxmyreyja0w/scermk6ano06jjzfo9t0czwftlz3+fh3emauhw // jqglutouvvw1wcc
Yfvgxk7efy0sio3jr2bpvc8udmw73ymaqodba0u3xcu3hbs2GAZMYZM5G41L12OAOM/HMCKJOXSKSJWLJS
OCZXHVXO+L4OEENPL5NMS63TUGXDGBMRUTXMBFRM+VWDGGOOZFVLYKNKR06NIER7QQ2KSSHSKCAFFET
ota6/cnHa6Exkznqbsv2a8f1adjqvdb4cammy+5rsUpr54zia/brglyl+wppnihwcb+ydblgcvc8feiz3
Fgbwcvbn1jx/qwok5qub5hyqovsx1n7xkbjntfaavwujjzkiidkphavkgv+4kramq85do5jxetsnzjzsr
AadTOUMQQJ2/XMYPQDRYTMNDLZWOAEQ2MQM7MKTCDIRYJVRLYSUQMWXDUXATBCN9ECARM1GED6KKXFLN
HO/ES1KSBCA6BGL9PKPTW5QNIXVNMLVAFAGBCBKBTND69VIXPCIKAIMNDHFCSHG3L66D5/GK4JTK+CAQ
K35pypaJowieJettn9VukkCixpfzttj1kk6v5fps9n+64rfafd4ggcwzssh3pjlrfqciykyjihyjmqww
Rgzydqffpa2ffx9x4lH3as7brofdn0i0n39r6yc4ucok3rh0c7svpy2ozze9h+gabgakhhoejqawj/zp
orM/un36xFQlqM41QTahaRiuK9zXTAAMFmUnxSV/w8MAL8BbBsAuiOrf00AAAAASUVORK5CYII=">

Saída

Exemplo 3
Se a imagem for um pouco maior, o comprimento da string base64 será aumentado como mostrado no exemplo abaixo:

AP+GVAetaaaje0LeqVROGE2AFWZV1RNHP8/53DKC0HZAHVJUXDHLTJEILGLKVQVLINMZG0TAXIC6JCB4KHICIX/
Yuczr+ridcs+jg7t3fjiydrqjovs28qkzrqdx6fxelcmk3ns3onb77+9898dtobsfclm7zwvppnfznl+z/n9fs
85z/mecy78x44s0utxpmgis2ksfutg0rih2dhyega3TubHxky1a9fe9yadiqpzta3lqrye1rcmm8m8zzlf01o/z
C5O+RZVDBIUGC60IHG91TSXRL891PXEZP7XQREAUTKAPKC1GIH6AGSNWATMVOEKHBJVWARBY8SHNAPPC0YMWKYP
Yxlmj4mmyalug+mwvg316th2nwy1iro6m8mc91dmyombrusonxnfcyklohvlzjjswpkaca/pwtm+use7egw1ox1e
M4SVXZK7RF65ZS2TQME9GG7UVQ0L075ZX1D17JN0RA1AYZHA2ZDDCYWAQ6D43N3EBD9RWKU2X5O4ZJVV9C36H0D
Sznzgs7mhrqeod3MBPHW8ZKRZUTMWRU7JGR181OSYA0EBOMEBDF4APAYCDI2LTNLF7FMV9LA9GSIGZM00C7BOAW
Noemjl/whi7ffvldXoazpfrds2axc5i3dwekumnwpq2adixacitr1xmfdlh/iwq/ivmjjnzg2c29xx0uh2tDod
wiv5h0t0powlblwiiwmhugobli0tupae7tvfropvi75hfgj6ecqdViezizmytnnnznkpismHgovga3t6qlywjg
HK4UFNLCV94S9J5Q9ABAA1CN5PTQ1+VM2QOWHOJCSLUZUAV8G1OV5UTA+5B/Y+B33TY0/68BRA+IX+WV3NEZZ+
V/tas8atifk2zvq36kocf8txlp+xgtlplrgmvog44ypx7fh5w3ntsyjyu6hywk6qps0tqny2q7k+ax9blon9n
ZHP4PCFPRX4QFTA/J5IXB7/S4BWSQHNP5ZUFCXS/FMGXNSNKARNFEU/VPHNCZXK2G6KPAQTIXHVPGTH7W2BIYN
ppxcyo+6ebintaagexrfkszmbsmqwpop7hsw34ze1ne0zb39qcupefpoo9+vse+eCeiAcxr7Jznnt1pgdcavig
zlqqd0cx88bpxUzIpUi0WelfHdnpt7ACUNU/ymtJU4gieyv/nlc/lefUaciywbcwbiisynBfdGll8nll8VULGPR
84zv2+ord4w0m5qnmrugehaoxsyla3xij/3d135+8ymfelkbzikyzo8xvdv+ykhnh9izwspljnysxv7qwunfs
Ab2bg+d7vppzn3danlog2ps/funwzypgodlztnjwijbrfa87d9alsaswb+e8l7mmtq0omnorhykbsze5r5xnmc
M5CDRBNWH4O5V+EQP1YBJF4JOENBGEHZ8TSEDUFB6PGVDPXGGVOVBZTSL96PBFNNAXPQ0MMX8QHZ5OIZ6HGFCK
Wyox+wbgmtqvymmuhilyaolnzrfgjr8zzvj5tukUO2iWCS83ZQ7HK7QAB9OGQDV2TA5LPX7YZD6XGKNZQBRG7Q
krll2inv6w3araa4ysooogdmtdtdodqbic+vBfp7qqoz10kubvzhzjvy7sfggc8uwx+g7hk5hkg+10y4z62jex
pq1btmgdvbfmwlo8qx0WNY4Mul4CPHJQEWLA5BWDF/OAUC0LZZZYFCBCHGQA6ZBSDV7MHDNVEWWJ13BCEZLGY3G
9KP2UQVDBDQHK2KHKINDXJAKQA2BKHV8PMSQXY8EFBQ+CEGV0JAYFFYVNIWA8WCH+PIQE3J3M/JHE8ITRFWV3Y
9V33UQO5KF8ndDe4oCerBoseqc8pi0qbqzodmfluy5o5pw3jyqhjfktmdmfmwyizu7wtpikgt9ezkoufcixj3
NAGF02K464K/BSW+SLESRAGYUHKGYAWT0MPNWSW+SUKNCZ4IFPJPQHJFHN7ONUKMBPGAWWB+RH5/78EAMWQPGH
Ldm3ukzzob3/lzdwiycpyr3gxmzmqk4+3ldlxv/876xdxtlfutbzdkbjacnajylis8mgmm3k32rzrqv6pid9nu
wgpugqzavahzoevnu9+hzxb8knqpa115ymjjemn8ynvawtitd3xgh4fo8+wf730qhugc9ebdovca76clw/rvcy
Fwnkarz5ijb63uvps3kaffriqa6wh7mh9peupvlby9g+2dtqunic2/ww0eqsb5pfb6w0/rvq0xy/a1fwgeljmx
Oin8fldsu3qdmivcarnqmwsnpbmvig5lvi+7fx+ycwvkos5gbyi21vA230k8gexx25vtr1mjp2if1fwlyquyd7
C+PAV0WT63OIV7AM9BGVDDIZQZQSYWXAOTKEDVXNSJRBDFFQGZNVNBCCWE+GZKDDBAL5NCZ6QHEKH/YZDCBMQAM
ZDK3ABCDJP0SUFTM7OIE37AIHPXBMOPYYDHNYSB4HP3HEEWMMWXW8SMPDHSBVXFFQXPVVFMTUI/DVCPWKSQAF
Sdbkpbdy7kznztxpyflhonyJosv03ek8anyaj2JCT8i7zuvgQue
2xbfwdlygvb48aopooqht1szm1vjpi0c6gwrla54rn9zxsxj ++ d2iofvi2bxjrjdisaxad9inuylnhyc21lxxb
Ekswa23Vayjb68VBAP9D8VVZ+TUV22OJ5WayaGuqy2CyBSIJKCHH7UNAULYVZH1HQJBTUCU31E/6EXAFDMSHSH
N974OV9/ELSXZMF8HSZ7KPUFDUTW4IH+NZ8A0SQY30FC5/GWGNG73WRRJF6MMDWARS+QBD2UESAVH3L9SHWDXJ
Gi66QQFRKT8Z8XOAZ4PKDMGAB2C5VNRELFVINZZZCNWD4IOJSDDXX41VJ5T/GFDHYD9C5KHNGSGMPK04XBN1GR
5kwuqr3rmzqnjm3vqz0728/9nlz2+oqjqlsmenjwi6yclysilengg8dpabpjrgsm9xwwz6xd88di3oal+kv23p
kd15iBee4q63+2madchvo0ocwbp/za+h/ispd45xomsym/hu7ujoz4hnn8cqybhdosqkgg6+crlng9yljyqyvt
si5yooglt3ywobmhuessut7b3kpftk+0fi5qhniu6dfycnqg2l5odvawg70gczn24wo9kovky1aikc2dtyxdl
wpiwvn7rayxgj2DUC3GJ6HFOJJTOKJTQ/MlXO3YVJ+L8JIC1JEBH6VYH/BPEKYQA8E+U6AAAAAFELFTKSUQMCC '>

Saída

Aqui vamos nós! Aprendemos como incorporar as imagens base64 em html.

Conclusão

Existem três métodos principais para incorporar imagens em HTML que são diretórios locais, URLs externos e adicionar imagens Base64. As imagens codificadas Base64 são benéficas de uma maneira que, ao incluir os documentos HTML, reduz as solicitações HTTP necessárias para o navegador. Para incorporar a imagem base64, use o html “”Tag junto com a“src”Atributo que especifica a sequência codificada Base64. Esta postagem explicou o procedimento para mostrar imagens base64 em html.