Jak wyświetlić Basetop 10 obrazów w HTML

Jak wyświetlić Basetop 10 obrazów w HTML
Podczas tworzenia dokumentu HTML możesz dołączyć obrazy na różne sposoby. Mogą to być użycie zewnętrznych adresów URL obrazów, obrazów lokalnych i obrazów Base64. Kiedy osadzamy obraz w dokumencie HTML, oznacza to, że staje się on częścią pliku HTML. Zatem osadzenie go jako zawartości Base64 zmniejsza żądania HTTP. HTML "”Tag można wykorzystać do osadzenia obrazów kodowanych Base64.

W tym zapisie dowiesz się, w jaki sposób obrazy Base64 są wyświetlane w HTML.

Jak dodać obrazy Base64 w HTML?

Base64 Kodowanie zmniejsza żądania HTTP, aby przeglądarka wyświetlała obrazy HTML. Jednocześnie zawartość Base64 zostanie zwiększona do 20-25 procent. Wskazuje to, że podejście Base64 jest lepsze dla małych i średnich obrazów i będzie miało większy wpływ na wydajność dużych obrazów.

Podczas osadzania obrazu Base64, adres URL danych obrazu zostanie rozważony. URL danych jest podzielony na dwie części w następujący sposób:

  • Pierwszy komponent: obraz zakodowany Base64.
  • Drugi komponent: String zakodowany Base64.

Aby osadzić obraz Base64 w HTML, sprawdź przykłady podane poniżej.

Przykład 1
Najpierw dodaj „”Tag za pomocą„src" I "Alt”Atrybuty zawierające obraz. Dodaj typ mediów danych i ciąg Base64 do atrybutu „SRC”. Atrybut „Alt” zdefiniuje tekst, który wyświetli się w przeglądarce, jeśli obraz nie może załadować:

Ap+gvaetaaabhuleqvriie3vsurdybtf8v/tjlqlhw5i3rx8jg4+hzuci+alkilv0d3jwafzf9hjwvzetikoam
E4jneyk5 kaicae+cd3uyfnh27yex5bq+hjga7aqov4w9hfd7dykwloi0ityzrtvm2mur6biodlDecac8xhns0
ct68ioJnzc4adnpcy 098pamipaqtyz9l/wuirqa1HywdnoftbrcjjNyuzzwp6ttup2jgkpfzdopmssb+hwpfx
4r+tfewjp9uy8goagja8oCtywl tjh3jfiehmjmmwkwipm1vjitazauyb4dqu6ongFeyWuxJwjw5cpefyvdl8s8
Y/yglafqwatxlpwbb3jckh0xpxpcm0wcymc/pzggn/hn3o+g/pZS7E69GNJ57AAAAFTSUQMCC ">

Poniższy obraz wyświetla dane wyjściowe wyżej wymienionego kodu:

Przykład 2

AP+GVAETAACEELEQVQ4JZ2QTUIUYRSFZ73V15JQJKDMTYZGKAXRD1IJPUBIZJORVMILUSG3LCPFYJVESQ
Fvm9agonbnili4mkxmyreyja0w/scermk6ano06jjzfo9t0czwftlz3+fh3emauhw // jqgluTouvvw1wcc
YFVGXK7EFY0SIO3JR2BPVC8UDMW73YMAQODBA0U3XCU3HBS2GAZMYZM5G41L12OAOM/HMCKJOXSKSJWLJS
OCZXHVXO+l4oeenpl5nms63tugxdgbmrutxmbfrm+vwdgguoozfvlykrkr06nier7q2ksshskca5zffet
OTA6/CNHA6EXKZNQBSV2A8F1ADJQVDB4CAMMY+5RSUPR54ZIA/BRGLYL+WPPNIHWCB+YDBLGCVC8FEIZ3
Fgbwcvbn1jx/qwok5qb5hyqovsx1n7xkbjntfaavwujjzkiidkphavkgv+4kramq85do5jxetsnzjzsr
Aadtoumqqj2/xmypqdrytmndlzwoeq2mqm7mKtcdiRyjvrlYSUQMWXDUXATBCN9ECARM1GED6KKXFLN
HO/ES1KSBCA6BGL9PKPTW5QNIXVNMLVAFAGBCBKBTND69VIXPCIKAIMNDHFCSHG3L66D5/GK4JTK+CAQ
K35Pyjowiejettn9vukkcixpfztttJ1k6v5fps9n+64rfafd4ggcwzssh3pjlrfqciykyJiHyjmqww
Rgzydqffpa2ffx9x4lh3as7brofdn0i0n39r6yc4ucok3rh0c7svpy2oze9h+gabgakhhoejqawj/zp
ORM/UN36XFQLQM41QTAHARIUK9ZXTAAMFMUNXSV/W8MAL8BBBBSAUIORF00AAASUVORK5CYII = ">

Wyjście

Przykład 3
Jeśli obraz jest nieco większy, długość łańcucha Base64 zostanie zwiększona, jak pokazano w poniższym przykładzie:

Ap+gvaetaaJe0leqvroge2afwzv1rnhp8/53dKC0Hzahvjuxdhltjelglkvqvlinmzg0Taxic6jcb4khicix/
YUZR+RIDCS+JG7T3FJIYDRQJOVS28QKZRQDX6FXELCMK3NS3ONB77+9898DTOBSFCLM7ZWVPCPNFZNL+Z/N9FS
85Z/MECY78X44S0UTXPMGIS2KSFUTG0RIH2DHYEGA3TUBHXKY1A9FE9YADIQPZTA3LQRYE1RCMM8M8ZZLF01O/Z
C5O+RZVDBIUGC60IHG91TSXRL891PXEZP7XQREAUTKAPKC1GIH6AGSNWATMVOEKHBJVWARBY8SHNAPPC0YMWKYP
Yxlmj4mmyalug+mwvg316th2nwy1iro6m8mc91dmyombrusonxnfcyklohvlzjswpKaca/Pwtm+użycie7egw1ox1e
M4SVXZK7RF65ZS2TQME9GG7UVQ0L075ZX1D17JN0RA1AYZHA2ZDDCYWAQ6D43N3EBD9RWKU2X5O4ZJVVV9C36H0D
Sznzgs7mhrqeod3mbphw8zkrzutmwru7jgr181osya0ebomebdf4apaycdi2ltnlf7fmv9la9gsigzm00c7boaw
Noemjl/whi7ffvldxoazpfrds2axcc5i3dwekumnwpq2adixacitr1xmfdlh/iwq/ivmjnzg2c29xx0uh2tdod
WIV5H0T0POWFLLBLWIIWMHUGOBLI0TUPAE7TVFROPVI75HFGJ6ECQDVIEZIZMYTNNNZNKPIMHGOVGA3T6QLYWJG
HK4UFNLCV94S9J5Q9ABAA1CN5PTQ1+VM2QOWHOJCSLUZUAV8G1OV5UTA+5B/Y+B33TY0/68BRA+IX+WV3NEZZ+
V/itas8atifk2zvq36kocf8txlp+xgtlplrgmvog44ypx7fh5w3ntssyjyu6hywk6qps0tqny2q7k+ax9blon9n
ZHP4PCFPRX4QFTA/J5IXB7/S4BWSQHNP5ZUFCXS/FMGXNSNKARNFEU/VPHNCZXK2G6KPAQTIXHVPGTH7W2BIYYN
ppxcyo+6eBintaagexrfkszmbsmqwpop7hsw34ze1ne0zb39qcupefpoo9+vse+eceiacxr7jznnt1pgdcavig
ZlQQD0CX8BPXUZIPUI0WELFHDNPT7ACUNU/YMTJU4GIEYV/NLC/LEFUACIYWBCWBIISYNBFDGLL8NLL8VULGPRPRPRPRPR
84ZV2+ORD4W0M5QNMRUGEHOOXSYLA3XIJ/3D135+8YMFELKBZIKYZO8XVDV+YKHNH9IZWSPLJNYSXVVV7QWUNFS
AB2BG+D7VPPZN3DANLOG2PS/FUNWZYYPODLZTNJWIJBRFA87D9ALSASWB+E8L7MMTQ0OMNORYKBSZE5R5XNMC
M5CDRBNWH4O5V+eqp1yBjf4joenbgehz8tsedufb6pvdpxggvovbztsl96pbfnnaxpq0mmx8qhz5oiz6hgfck
WYOX+WBGMTQVYMMUHILYAOLNZRFGJR8ZZVJ5TUKUO2IWCS83ZQ7HK7QAB9OGQDV2TA5LPX7YZD6XGKNZQBRG7Q
Krll2Inv6W3araa4YSOOOGDMTDDDODQBIC+VBFP7QOZ1KUBVZHZJVY7SFGGC8UWX+G7HK5HKG+10Y4Z62JEXEXEX
PQ1BTMGDVBFMWLO8QX0WNY4MUL4CPHJQEWLA5BWDF/OAUC0LZZYFCBCHGQA6ZBSDV7MHDNVEWWJ13BCEZLGY3G
9KP2UQVDBDQHK2KHKINDXJAKQA2BKHV8PMSQXY8EFBQ+CEGV0JAYFYVNIWA8WCH+PIQE3J3M/JHE8ITRFWV3Y
9V33UQO5KF8NDDE4OCBOSEQC8PI0QBQZODMFLUY5O5PW3JYYQHJFKTMDMFMWYIZU7WTPIKGT9EZKOFCIXJ3
NAGF02K464K/BSW+SLESRAGYUHKGYAWT0MPNWSW+SUKNCZ4IFPJPQHJFHN7ONUKMBGGGGWB+RH5/78AMWQPGH
LDM3UZZZOB3/LZDWIYCPYR3GXMZMQK4+3LDLXV/876XDXTLFUTBZDKBJACNAJYLIS8MGMM3K32RZRQV6PID9NU
WGPUGQZAVAHZOEVNU9+HZXB8KNQPA115YMJJEMN8YNVAWTITD3XGH4FO8+WF730QHUGC9EBDOVCA76CLW/RVCY
Fwnkarz5ijb63uvppps3kaffriqa6wh7mh9peupvlby9g+2dtqunic2/ww0eqsb5pfb6w0/rvq0xy/a1fwgeljmx
Oin8fldsu3qdmivcarnqmwsnpbmvig5lvi+7fx+ycwvkos5gby21va230k8gexx25vtr1mjp2if1fwlyquyd7
C+Pav0WT63Oiv7am9bgvddizqzqsyWxaOTKedvxnsjrbddfqGznvnbccwe+gzkddbal5ncz6qekh/yzdcbmqamam
ZDK3ABCDJP0SUFTM7OIE37AIIHPXBMOPYYDHNYSB4HP3HEEWMMWXW8SMPDHSBVXFFQXPVFMTUI/DVCPWWKSQAF
Sdbkpbdy7kznztxpyflhonyjosv03ek8anyaj2jct8i7zuvgqu1vqyk9x+bwycr0yhq0pSkpwdgd+2awuxubum
2xbfwdlygvb48aopooqht1szm1vjpi0c6gwrla54rn9zxsxj ++ d2iofvi2bxjrjdisaxad9inuylnhyc21lxxb
EKSWA23VAYJB68VBAP9D8VVZ+TUV22OJ5wayaguqy2cybssijkchh7unaulyvzh1hqjBtucU31e/6EXAFDMMSHSHSHSH
N974ov9/elsxzmf8hsz7kpufdutw4ih+NZ8A0SQY30FC5/GWGNG73WRJF6MMDWARS+QBD2USAVH3L9SHWDXJ
GI66QFRKT8Z8XOAZ4PKDMGAB2C5VNRREFFIKNZZCNWD4IOJSDDDXX41VJ5T/GFDHYD9C5KHNGSGMPK04XBN1GR
5KWUQR3RMZQNJM3VQZ0728/9NLZ2+OQJQLSMENJWI6YCLYSILENGG8DPABPJRGSM9XWWZ6XD88DI3OAL+KV23P
KD15ibee4Q63+2madchvo0ocwbp/za+h/ispd45xomsym/hu7Ujoz4Hnn8cqyBhdosqKgg6+crlng9yljyqyvt
si5yooglt3ywobmhuessut7b3kpftk+0fi5qhniu6dfycnqg2l5odvawg70gczn24SWO9KOVKY1AIKC2DTYXDL
Wpiwvn7rayxgj2duc3gj6HfOJJTOKJTQ/MLXO3YVJ+L8JIC1JEBH6VYH/BPEKYQA8E+U6AAAAFTKTSUQMCC '>

Wyjście

No to ruszamy! Nauczyliśmy się, jak osadzić obrazy Base64 w HTML.

Wniosek

Istnieją trzy główne metody osadzania obrazów w HTML, które są lokalnymi katalogami, zewnętrznymi adresami URL i dodawaniem obrazów Base64. Obrazy zakodowane Base64 są korzystne w sposób, który poprzez włączenie ich do dokumentów HTML zmniejsza żądania HTTP potrzebne do przeglądarki. Aby osadzić obraz Base64, użyj HTML „”Tag wraz z„src”Atrybut, który określa łańcuch kodowany Base64. Ten post wyjaśnił procedurę wyświetlania obrazów Base64 w HTML.