Hvordan vise Basetop 10 bilder i HTML

Når du lager et HTML -dokument, kan du inkludere bilder på forskjellige måter. Disse kan bruke eksterne bilde -nettadresser, lokale bilder og base64 -bilder. Når vi legger inn et bilde i HTML -dokumentet, betyr det at det blir en del av HTML -filen. Så å legge det til som Base64 -innhold reduserer HTTP -forespørslene. HTML “”Tag kan brukes til å legge inn base64-kodede bilder.

I denne oppskrivningen lærer du hvordan Base64-bilder vises i HTML.

Hvordan du legger til base64 bilder i html?

Base64 -koding reduserer HTTP -forespørslene for nettleseren om å vise HTML -bildene. Samtidig vil base64-innholdet bli økt til 20-25 prosent. Dette indikerer at Base64 -tilnærmingen er bedre for små til mellomstore bilder, og det vil ha større effekt på ytelsen til store bilder.

Mens du legger inn et Base64 -bilde, vil data -URL -en til bildet bli vurdert. Data -url er delt i to deler som følger:

• Første komponent: Base64 -kodet bilde.
• Andre komponent: Base64 -kodet streng.

For å legge inn Base64 -bildet i HTML, sjekk ut eksemplene som er angitt nedenfor.

Eksempel 1
Først, legg til “”Tag med“src”Og“alt”Attributter for å inkludere bildet. Legg til datatypen og base64 -strengen i "SRC" -attributtet. "ALT" -attributtet vil definere teksten som vises i nettleseren hvis bildet ikke kunne laste inn:

Ap+gvaetaaaBhuleqvriie3vsurdybtf8v/tjlqlhw5i3rx8jg4+hzuci+alkilv0d3jwafzf9hjwvzetikoam
E4jneyk5 kaicae+cd3uyfnh27yex5bq+Hjga7aqov4w9hfd7dykwloi0ityzrtvm2mur6biodldecac8xhns0
CT68IOJNZC4ADNPCY 098PAMIPAQTYZ9L/WUIRQA1HYWDNOFTBRCJJNYUZZWP6TTUP2JGKPFZDOPMSSB+HWPFX
4r+tfewjp9uy8goagja8octywl tjh3jfiehmjmmwkwipm1vjitazauyb4dqu6ongfeywuxjwjw5cpefyvdl8s8
Y/yglafqwatxlpwbb3jckh0xpxpcm0wcymc/pzggn/hn3o+g/pdzs7e69gnj57aaaaaftksuqmcc ">

Bildet nedenfor viser utgangen fra ovennevnte kode:

Eksempel 2

Ap+gvaetaaaceeleqvq4jz2qtuiuyrsfz73v15jqjkdmtyzgkaxrd1ijpubizjorvmilusg3lcpfyjvesq
Fvm9agonbnili4mkxmyreyja0w/scermk6ano06jjzfo9t0czwftlz3+fh3emauhw // jqglutouvvw1wcc
Yfvgxk7efy0sio3jr2bpvc8udmw73yMaqodba0u3xcu3hbs2gazmyzm5g41l12oaom/hmcjjoxSKSjwljs
Oczxhvxo+l4oeenpl5nms63tugxdgbmrutexmbfrm+vwdggoozfvlyknkr06nier7qq2ksshskca5zffet
OTA6/CNHA6EXKZNQBSV2A8F1ADJQVDB4CAMMY+5RSUPR54ZIA/BRGLYL+WPPNIHWCB+YDBLGCVC8FEIZ3
FGBWCVBN1JX/QWOK5QUB5HYQOVSX1N7XKBJNTFAAVWUJJZKIIDKPHAVKGV+4KRAMQ85DO5JXETSNZJZSR
AADTOUMQQJ2/XMYPQDRYTMNDLZWOAEQ2MQM7MKTCDIRYJVRLYSUQMWXDUXATBCN9CARM1GED6KKXFLN
ho/es1ksbca6bgl9pkptw5qnixvnmlvafagbcbkbtnd69vixpcikaimndhfcshg3l66d5/gk4jtk+caq
K35pypajowiejettn9vukkcixpfzttj1kk6v5fps9n+64rfafd4ggcwzsssh3pjlrfqciykyjihyjmqww
Rgzydqffpa2ffx9x4lh3as7brofdn0i0n39r6yc4ucok3rh0c7svpy2ozze9h+gabgakhhoejqawj/zp
ORM/UN36XFQLQM41QTAHARIUK9ZXTAAMFMUNXSV/W8MAL8BBBBBBBSAUIORF00AAAAASUVORK5CYII = ">

Produksjon

Eksempel 3
Hvis bildet er litt større, økt base64 strenglengden som vist i eksempel under eksempel:

Ap+gvaetaaaje0leqvroge2afwzv1rnhp8/53dkc0hzahvJuxdhltjeilglkvqvlinmzg0taxic6jcb4khicix/
Yuczr+ridcs+jg7t3fjiydrqjovs28qkzrqdx6fxelcmk3ns3onb77+9898dtobsfclm7zwvpcpnfznl+z/n9fs
85z/mecy78x44s0utxpmgis2ksfutg0rih2dhyega3Tubhxky1a9fe9yadiqpzta3lqrye1rcmm8m8zzlf01o/z
C5O+RZVDBIUGC60IHG91TSXRL891PXEZP7XQREAUTKAPKC1GIH6AGSNWATMVOEKHBJVWARBY8SHNAPPC0YMWKYP
Yxlmj4mmyalug+mwvg316th2nwy1iro6m8mc91dmyombrusonxnfcyklohvlzjswpkaca/pwtm+use7egw1ox1e
M4svxzk7rf65zs2tqme9gg7uvq0l075zx1d17jn0ra1ayzha2zddcywaq6d43n3ebd9rwku2x5o4zjvv9c36h0d
Sznzgs7mhrqeod3mbPhw8zkrzutmwRU7jGR181OSYA0EBOMEBDF4APAYCDI2LTNLF7FMV9LA9GSIGZM00C7BOAW
Noemjl/whi7ffvldxoazpfrds2axcc5i3dwekumnwpq2adixacitr1xmfdlh/iwq/ivmjnzg2c29xx0uh2tdod
wiV5H0T0POWflBlWiiWMHUGOBLI0TUPAE7TVFROPVI75HFGJ6ECQDVIEZIZMYTNNNZNKPISMHGOVGA3T6QLYWJG
HK4UFNLCV94S9J5Q9ABAA1CN5PTQ1+VM2QOWHOJCSLUZUAV8G1OV5UTA+5B/Y+B33TY0/68BRA+IX+WV3nezz+
V/ITAS8ATIFK2ZVQ36KOCF8TXLP+XGTLPLRGMVOG44YPX7FH5W3NTSYJYU6HYWK6QPS0TQNY2Q7K+AX9BLON9N
zhp4pcfprx4qfta/j5ixb7/s4bwsqhnp5zufcxs/fmgxnsnkarnfeu/vphnczxk2g6kpaqtixhvpgth7w2biyn
ppxcyo+6ebintaagexrfkszmbSmqwpop7hsw34ze1ne0zb39qcupefpoo9+vse+eceicxr7jznnt1pgdcavig
zlqqd0cx8bpxuzipui0welfhdnpT7acunu/ymtju4Gieyv/nlc/lefuaciywbcwbiisynbfdgll8nll8vulgp
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+Sukkncz4ifpjpqhjfhn7onukmbpgawwb+rh5/78eamwqpgh
Ldm3ukzzob3/lzdwiycpyr3gxmzmqk4+3ldlxv/876xdxtlfutbzdkbjacnajylis8mgmm3k32rzrqv6pid9nu
WGPUGQZAVAHZOEVNU9+HZXB8KNQPA115YMJJEMN8YNVAWTITD3XGH4FO8+WF730QHUGC9EBDOVCA76CLW/RVCY
FWNKARZ5IJB63UVPS3KAFFRIQA6WH7MH9PEUPVLBY9G+2DTQUNIC2/WW0EQSB5PFB6W0/RVQ0XY/A1FWGELJMX
Oin8flDSU3QDMIVCARNQMWSNPBMVIG5LVI+7FX+YCWVKOS5GBYI21VA230K8GEXX25VTR1MJP2IF1FWLYQUYD7
C+PAV0WT63OIV7AM9BGVDDIZQZQSYWXAOTKEDVXNSJRBDDFQGZNVNBCCWE+GZKDDBAL5NCZ6QEKH/YZDCBMQAM
ZDK3ABCDJP0SUFTM7OIE37AIIHPXBMOPYYDHNYSB4HP3HEEWMMWXW8SMPDHSBVXFFQXPVVFMTUI/DVCPWKSQAF
Sdbkpbdy7kznztxpyflhonyJosv03ek8anyaj2jct8i7zuvgqu1vqyk9x+bwycr0yhq0pskpwdgd+2awuxubum
2xbfwdLYGVB48AOPOOQHT1SZM1VJPI0C6GWRLA54RN9ZXSXJ ++ D2IOFVI2BXJRJDISAXAD9INUYLNHYC21LXXB
EKSWA23VAYJB68VBAP9D8VVZ+TUV22OJ5WAYAGUQY2CYBSSIJKCH7UNAULYVZH1HQJBTUCU31E/6EXAFDMMSH
N974ov9/elsxzmf8hsz7kpufdutw4ih+nz8a0sqy30fc5/gwgng73wrrjf6mmdwars+qbd2uesavh3l9shwdxj
gi66qqfrkt8z8xoaz4pkdmgab2c5vnrelfvkinzzcnwd4iojsDDxx41vj5t/gfdhyd9c5khngsgmpk04xbn1gr
5kwuqr3rmzqnjm3vqz0728/9nlz2+oqjqlSmenjwi6yclySileng8dpabpjrgsm9xwwz6xd88di3oal+kv23p
KD15IBEE4Q63+2MADCHVO0OCWBP/ZA+H/ISPD45XOMSYM/HU7UJOZ4HNN8CQYBHDOSQKGG6+CRLNG9YLJYQYVT
Si5yooglt3yWOBMHuessut7B3Kpftk+0fi5qhniu6dfycnqg2l5odvawg70gczn24swo9kovky1aikc2dtyxdl
wpiwvn7rayxgj2dUc3gj6hfojjtokjtq/mlxo3yvj+l8jic1jebh6vyh/bpekyqa8e+u6aaaaaelTksuqmcc '>

Produksjon

Her går vi! Vi har lært hvordan vi kan legge inn base64 -bildene i HTML.

Konklusjon

Det er tre hovedmetoder for å legge inn bilder i HTML som er lokale kataloger, eksterne nettadresser og legge til base64 -bilder. Base64 -kodede bilder er gunstige på en måte som ved å inkludere disse til HTML -dokumenter reduserer HTTP -forespørslene som trengs for nettleseren. For å legge inn Base64 -bildet, bruk HTML “”Tag sammen med“src”Attributt som spesifiserer Base64 -kodet streng. Dette innlegget har forklart prosedyren for å vise Base64 -bilder i HTML.