Cómo mostrar Basetop 10 imágenes en HTML

Al crear un documento HTML, puede incluir imágenes de varias maneras. Estos pueden estar utilizando URL de imágenes externas, imágenes locales e imágenes Base64. Cuando incrusimos una imagen en el documento HTML, significa que se convierte en parte del archivo HTML. Entonces, incrustarlo como contenido de base64 reduce las solicitudes HTTP. El html ""La etiqueta se puede utilizar para incrustar imágenes codificadas en base64.

En este artículo, aprenderá cómo se muestran las imágenes Base64 en HTML.

Cómo agregar imágenes base64 en html?

Base64 La codificación disminuye las solicitudes HTTP para que el navegador muestre las imágenes HTML. Al mismo tiempo, el contenido de Base64 se incrementará al 20-25 por ciento. Esto indica que el enfoque base64 es mejor para imágenes pequeñas a medianas, y tendrá un mayor efecto en el rendimiento de imágenes grandes.

Mientras incrusta una imagen base64, la URL de datos de la imagen se considerará. La URL de datos se divide en dos partes de la siguiente manera:

• Primer componente: la imagen codificada base64.
• Segundo componente: la cadena codificada Base64.

Para incrustar la imagen Base64 en HTML, consulte los ejemplos que se indican a continuación.

Ejemplo 1
Primero, agregue el ""Etiqueta con el"SRC" y "alternativo"Atributos para incluir la imagen. Agregue el tipo de medios de datos y la cadena Base64 al atributo "SRC". El atributo "Alt" definirá el texto que se mostrará en el navegador si la imagen no puede cargar:

AP+GVAETAAABHULEQVRIIE3VSURDYBTF8V/TJLQLHW5I3RX8JG4+HZUCI+ALKILV0D3JWAFZF9HJWVZETIKOAM
E4JNEYK5 KAICAE+CD3UYFNH27YEX5BQ+HJGA7AQOV4W9HFD7DYKWLOI0ITYZRTVM2MUR6BIODLDECAC8XHNS0
ct68iojnzc4adnpcy 098pamipaqtyz9l/wuirqa1hywdnoftbrcjjnyuzzwp6ttup2jgkpfzdopmssb+hwpfx
4r+tfewjp9uy8Goagja8Octywl tjh3jfiehmjmmwkwipm1vjitazauyb4dqu6ongfeywuxjwjw5cpefyvdl8s8
Y/yglafqwatxlpwbb3jckh0xpxpcm0wcymc/pzggn/hn3o+g/pdzs7e69gnj57aaaaaelftksuqmcc ">

La imagen a continuación muestra la salida del código mencionado anteriormente:

Ejemplo 2

AP+GVAETAAACEELEQVQ4JZ2QTUIUYRSFZ73V15JQJKDMTYZGKAXRD1IJPUBIZJORVMILUSG3LCPFYJVESQ
FVM9AGROBNILI4MKXMYREYJA0W/Scermk6ano06JJZFO9T0CZWFTLZ3+FH3EMAUHW // JQGLUTOVVW1WCC
YFVGXK7EFY0SIO3JR2BPVC8UDMW73MAQODBA0U3XCU3HBS2GAZMYZM5G41L12OAOM/HMCKJOXSKWLJS
Oczxhvxo+l4oeenpl5nms63tugxdgbmrutxmbfrm+vwdggoOzfvlyknkr06nier7qq2ksshskca5zffet
OTA6/CNHA6EXKZNQBSV2A8F1ADJQVDB4CAMMY+5RSUPR54ZIA/BRGLYL+WPPNIHWCB+YDBLGCVC8FEIZ3
FGBWCVBN1JX/QWOK5QUB5HYQOVSX1N7XKBJNTFAAVWUJJZKIIDKPHAVKGV+4KRAMQ85DO5JXETSNZZZSR
AadToUMQQJ2/XMYPQDRYTMNDLZWOAEQ2MQM7MKTCDIRYJVRYSUQMWXDUXATBCN9ECARM1GED6KXFLN
HO/ES1KSBCA6BGL9PKPTW5QNIXVNMLVAFAGBCBKBTND69VIXPCIKAIMNDHFCSHG3L66D5/GK4JTK+CAQ
K35pypAJOWIEJETTN9VUKKCIXPFZTTJ1KK6V5FPS9N+64RFAFD4GGCWZSSH3PJLRFQCIYKYJIHYJMQWWW
Rgzydqffpa2ffx9x4lh3as7brofdn0i0n39r6yc4ucok3rh0c7svpy2ozze9h+gabgakhhoejqawj/zp
orm/un36xfqlqm41qtahariuk9zxtaamfmunxsv/w8mal8bbbsauiorf00aaaaasuvork5cyii = ">

Producción

Ejemplo 3
Si la imagen es ligeramente más grande, la longitud de la cadena Base64 se aumentará como se muestra en el siguiente ejemplo:

Ap+gvaetaaAJE0LEQVROGE2AFWZV1RNHP8/53DKC0HZAHVJUXDHLTJEILGLKVQVLINMZG0TAXIC6JCB4KHICIX/
Yuczr+ridcs+jg7t3fjiydrqjovs28qkzrqdx6fxelcmk3ns3onb77+9898dtobsfclm7zwvpcpnfznl+z/n9fs
85Z/MECY78X44S0UTXPMGIS2KSFUTG0RIH2DHYEGA3TUBHXKY1A9FE9YADIQPZTA3LQRYE1RCMM8M8ZZLF01O/Z
C5O+RZVDBIUGC60IHG91TSXRL891PXEZP7XQREUTKAPKC1GIH6AGSNWATMVOEKHBJVWARBY8SHNAPPC0MWKKYP
Yxlmj4mmyalug+mwvg316th2nwy1iro6m8mc91dmyombrusonxnfcyklohvlzjswpkaca/pwtm+use7egw1ox1e
M4SVXZK7RF65ZS2TQME9GG7UVQ0L075ZX1D17JN0RA1AYZHA2ZDDCYWAQ6D43N3EBD9RWKU2X5O4ZJV9C36H0D
Sznzgs7mhrqeod3mbphw8zkrzutmwru7jgr181osya0ebomebdf4apaycdi2ltnlf7fmv9la9gsigzm00c7boaw
Noemjl/whi7ffvldxoazpfrds2axcc5i3dwekumnwpq2adixacitr1xmfdlh/iwq/ivmjjnzg2c29xx0uh2tdod
wiv5h0t0powflblwiiwmhuGobli0tupae7tvfropvi75hfgj6ecqdviezizmytnnnznkpismhgovga3t6qlywjg
HK4UFNLCV94S9J5Q9ABAA1CN5PTQ1+VM2QOWHOJCSLUZUAV8G1OV5UTA+5B/Y+B33TY0/68BRA+IX+WV3NEZZ+
V/ITAS8ATIFK2ZVQ36KOCF8TXLP+XGTLPLRGMVOG44YPX7FH5W3NTSYJYU6HYWK6QQPS0TQNY2Q7K+AX9BLON9N
ZHP4PCFPRX4QFTA/J5IXB7/S4BWSQHNP5ZUFCXS/FMGXNSNKARNFEU/VPHNCZXK2G6KPAQTIXHVPGTH7W2BIYN
ppxcyo+6ebintagexrfkszmbsmqwpop7hsw34ze1ne0zb39qcupefpoo9+vse+eceiacxr7jznnt1pgdcavig
zlqqd0cx8bpxuzipui0welfhdnpt7acunu/ymtju4gieyv/nlc/lefuaciywbcwbiisynbfdgll8nll8vulgpr
84ZV2+ORD4W0M5QNMRUGEHAOXSYLA3XIJ/3D135+8YMFELKBZIKYZO8XVDV+YKHNH9IZWSPLJNYSXVV7QWUNFS
AB2BG+D7VPPZN3DANLOG2PS/FUNWZYPGODLZTNJWIJBRFA87D9ALSASWB+E8L7MMTQ0OMNORHYKBSZE5R5XNMC
M5CDRBNWH4O5V+EQP1YBJF4JOENBGEHZ8TSEDUFB6PGVDPXGGVOVBZTSL96PBFNNAXPQ0MMX8QHZ5OIZ6HGFCK
WYOX+WBGMTQVYMMUHILYAOLNZRFGJR8ZZVJ5TUKUO2IWCS83ZQ7HK7QAB9OGQDV2TA5LPX7YZD6XGKNZQBRG7Q
krll2inv6w3araa4ysooogdmtdtdodqbic+vbfp7qqoz10kubvzhzjvy7sfggc8uwx+g7hk5hkg+10y4z62JEX
pq1btmgdvbfmwlo8qx0wny4mul4cphjqewla5bwdf/oauc0lzzyfcbchgqa6zbsdv7mhdnvewwj13bcezlgy3g
9KP2UQVDBDQHK2KHKINDXJAKQA2BKHV8PMSQXY8EFBQ+CEGV0JAYFFYVNIWA8WCH+PIQE3J3M/JHE8ITRFWV3Y
9V33UQO5KF8NDDE4OCERBOSEQC8PI0QBQZODMFLUY5O5PW3JYYQHJFKTMDMFMWYIZU7WTPIKGT9EZKOUFCIXJ3
NAGF02K464K/BSW+SLESRAGYUHKGYAWT0MPNWSW+SUKNCZ4IFPJPQHJFHN7ONUKMBPGAWWB+RH5/78EAMWQPGH
Ldm3ukzzob3/lzdwiycpyr3gxmzmqk4+3ldlxv/876xdxtlfutbzdkbjacnajylis8mgmm3k32rzrqv6pid9nu
wgpugqzavahzoevnu9+hzxb8knqpa115ymjjemn8ynvawtitd3xgh4fo8+wf730qhugc9ebdovca76clw/rvcy
FWNKARZ5IJB63UVPS3KAFfrIQA6WH7MH9PEUPVLBY9G+2DTQUNIC2/WW0EQSB5PFB6W0/RVQ0XY/A1FWGELJMX
Oin8fldsu3qdmivcarnqmwsnpbmvig5lvi+7fx+ycwvkos5gbyi21va230k8gexx25vtr1mjp2if1fwlyquyd7
c+pav0wt63oiv7am9bgvddizqzqsywxaotkedvxnsjrbddfqgznvnbccwe+gzkddbal5ncz6qekh/yzdcbmqam
zdk3abcdjp0suftm7oie37aiihpxbmopydhnysb4hp3heewmmwxw8smpdhsbvxffqxpvvfmtui/dvcpwksqaf
Sdbkpbdy7kznztxpyflhonyjosv03ek8anyaj2jct8i7zuvgqu1vqyk9x+bwycr0yhq0pskpwdgd+2awuxubum
2XBFWDLYGVB48AOPOOQHT1SZM1VJPI0C6GWRLA54RN9ZXSXJ ++ D2IOFVI2BXJRJDISAXAD9INULYHYC21LXXXB
Ekswa23vayjb68vbap9d8vvz+tUv22oj5oj5wayaguqy2Cybssijkchh7unaulyvzh1hqjBtucu31e/6exafdmmsh
N974OV9/ELSXZMF8HSZ7KPUFDUTW4IH+NZ8A0SQY30FC5/GWGNG73WRRJF6MMDWARS+QBD2USAVH3L9SHWDXJ
GI66QQFRKT8Z8XOAZ4PKDMGAB2C5VNRELFVKINZZCNWD4IOJSDDXX41VJ5T/GFDHYD9C5KHNGSGMPK04XBN1GR
5KWUQR3RMZQNJM3VQZ0728/9NLZ2+OQJQLSMENJWI6YCLYSILGG8DPABPJRGSM9XWWZ6XD88DI3OAL+KV23P
KD15IBEE4Q63+2MADCHVO0OCWBP/ZA+H/ISPD45XOMSYM/HU7UJOZ4HNNN8CQYBHDOSQKGG6+CRLNG9YLJYQYVT
si5YOOGLT3YWOBMHUESSUT7B3KPFTK+0FI5QHNIU6DFYCNQG2L5ODVAWG70GCZN24SWO9KOVKY1AIKC2DTYXDL
wpiwvn7rayxgj2duc3gj6hfojjtokjtq/mlxo3yvj+l8jic1jebh6vyh/bpekyqa8e+u6aaaaaelftksuqmcc '>

Producción

Aquí vamos! Hemos aprendido a incrustar las imágenes Base64 en HTML.

Conclusión

Hay tres métodos principales para incrustar imágenes en HTML que son directorios locales, URL externos y agregando imágenes Base64. Las imágenes codificadas Base64 son beneficiosas de una manera que al incluirlas a los documentos HTML reduce las solicitudes HTTP necesarias para el navegador. Para incrustar la imagen Base64, use el HTML ""Etiqueta junto con el"SRC"Atributo que especifica la cadena codificada Base64. Esta publicación ha explicado el procedimiento para mostrar imágenes Base64 en HTML.