Colección de citas famosas - Colección de máximas - El formato de almacenamiento de imágenes del sitio web que no conoces: base64

El formato de almacenamiento de imágenes del sitio web que no conoces: base64

Recientemente, cuando imité la interfaz de inicio de sesión de 163 NetEase en el front-end, me sorprendió encontrar:

Pensemos primero en cómo configurar esta imagen. la gente puede hacerlo solo con img. Este último y una etiqueta, o fondo, etc., pero después de abrir las herramientas de desarrollador, encontré esto:

No le presté mucha atención, es solo una imagen de red, colóquela en el servidor del sitio web y luego sería bueno bajarla. Pero las cosas no parecen ser tan sencillas.

Déjame mostrarte el recurso:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAR4AAAA+CAMAAADKzIRmAAAAsVBMVEVHcEw3NzfPAyaJiYk2NjbPBCZlZWWhXGM3Nzc3Nzc2NjY2NjY2NjY4ODiJiYk2NjY7OzvP BC c2NjaKioo3Nzc2NjaKioo6Ojo2NjY3NzeMjIyIiIjVECw3NzfPBCY4ODjQAyfPBCY3NzfSCCrPAya JiYmKiorQBCeJiYnQBSfPAyaIiIiJiYmJiYnRBSjPAyfPBCaJiYmJiYmJiYnPAyZYWFjPBCbPAy bOAy Y2NjaIiIh1+0RMAAAAOHRSTlMAXPmnyoUPBUdu86PTOXO0FnH7NIzpRSHemiG0D8DPLFKyex/vhV1Ex2Kl79aXMJbA+uRo5ljV3b1RDw0AAAzoSURBVHja7Zxnl7K8FobBQiwooKBYsfc+rhnx//+ws1OA BELxvO+ z1nlmnXyQjuRy594lzCiKpKHtVvl/S2lj6+dVLXruZWZVr4fDfH67yZGOt7O9Ze1n2/GvgLOsrl6vInjGs+r8+ eLaXgL68BMd /znM0F8O53Ioka7k4Vlat9Ir1uJ4tofEKc/q32xD23nQj2oOxJekiXiWc9k5r+f+v3qy/qIeawtPPGNhtzKuNwx8GD5riUODilEv8ARoNo16Uf0YTgyPVXqltLnMgHS9Imm6q7 LjLT/RxI5q Dd93vdRnnvgdU1Gavt9PHJLulOnxqwieFKuI4am+0tv3MnlX15e3gIGXPCQaS933G2qG9fguNhS/oUjwBDs10zQ1/NHXZHpcBM/sKe/z83a9RGcdXlntO2k/eg6evu9X+KF VieExHb9TM0nr9z 0zoqZPSHP8BvnskC3dMWV4FuHXqjI9zsczvkp6W5pbW9EgrFd2O8jw1Frxpgt4BrERweNBE5 6po/FGJW2cC41MKjq5L9PjPDxo+Z04cXWYjRXRX6NLKQfPayvB Q39Qk7tXRcAzUbkWsx47TZX U5oA012/Ap+536EZHOrgAj+O6MM7d6OhU+vxSPMvEwHpaEp1FP3l0XvNUPAvHJgJr2zUk4snQHqCj12iDVUMqzZz2GAyP2bShATO8sAcYD3xfTTDUV1E8 KEHnuZeGeVYunVdpmcTTVyc1/ Oh+RYPbOrCMBhfKwoNgpLlsOCDdbwh+qLWoY2vTfQc+ JyDf1PQoHuF+DYbHFqSnMJ4Enbk8xENPbuTttxdIO66r+P1nSTzwcBXiwuqTOnlyT7Qeg5clI8LTh9McL1LXBTwC +B+UKT5EnZCwy2V4QkP+BA8aP3OC5ITxlKooJWx4vSzJ4MI0AAusugjinAmnPShdmusNOY BWyKtiGIbjO/AJomPgNqlQAMDc8wy/4XleI8CDn0CJ4/m5znKsJybgpVma659KzxjfhMuvEjwYiQpPCF1X F9jCRetxDa45Qf+xM3YcCR4vlKUaUXlDEvf4fjOQ5hAPSI8t4vmu4pCll

Inhmg7yjlfqmsxwzvjm3cp+a7qdwcf39f4pf5qskr2xa9iyhinaysjwdfdpamyrkdyjl+btzaupQpq2pkd3kt5wfc5l44r76mhqfwmnOQZO3ubtgqsZqeSzqeBy7JKWKKKKKKKWY7JKWYBY7JOBY7JOBY7JOTBY7JOBY7JKYBY7JOTBY7JKWYBY7JOTBY7JOTBY7JOTBY7JOTBY7JOTBY7JOTBY7JOTBY7JOTBY7JOTBY7JOS gr5res hwzk4nnmwynkt9sy8kbywdnnr0ywqbrkza6zhgmmoreemwrtxccj9u0swbywnlnv8m6b4ledabwet W QSZNHV66F2MOG50NW1LBP+BAPEHYDWTD2GNAZ6FSRWVKFXQMC3ONTOASLUBNSK8JVJI7HDIRHWFORBHERXAO6HXYYFG3HAWBTDWLHJGXRMOVGSXKCURIDTBPAEKLQMQMQMQMQMOT I/fic1 nk4hn0lqqTyObnktkg/7JGU7DOXNBBBPQKCDVBI6DZUM6SHBLITTOOS7YEIBFTDGYMPBMT1NOYY/GTYDK7G5OC+XEY6S16IF4LLLJ1BPKXCQ4GSHJCMUBSYDWWEX9GEX9GEC+XEY6S16IF4LLLLJ1BPKXCQ4GSHJCMUBSYDWWEX9GEX9GEC+XEY6S16IF4LLLLJ1BPKXCQ4GSHJCMUBSYDWWEX9GEX9GEC+XEY6S16IF4LLLJ1BPKXCQ4GSHJCMUBSYDWWEX9GEX9GEC b4ilqDobyvik6tgwmurvaar7dpiyk xbbo4wygra9q96t1y8kjsrdyvzzi3w/zomrbb/utf2yyp8iimqfzjldzqnr4b1olwqfmqwhcjma2um0bt0ejum3ellvggp0lfkh9px6hn Ffdy5gfvsiyw7gay+af7cju6ddzrbkikgfx5okmbkix4m61cvm49f8wc01fc+0aj5uxz+24pexldKekqeaqat9a1+vbxJugrvid/a7tblqcdutulccuelbunCfbfpi7Mrf9t IS1VAB6JGX+/ZXSIMH QTYLGTOKRJGWJXOKP2ABE+4KHPMHGELU8UTMDT61SRPMUJN2TXEDQN8CCEODWDAWSYHMDBDE8Y GACE/FBGATOBNI7SU0DNDK88 bhHrbiOz4UM+XisgnhKl+ wSCN9uKK2YGrg6jTokigctTOyEcDjktJS6YdsDhw9u8TCks1x6AEUoqvZVXEQyiRWyYm1aWEhyX/2DuEcyKfNzONySEzrT4ngSQzEhtJMG+RlZVzy1SZOKpkl9F44TqRGg 2oBsNzV2nwkpHDeoC dTUuk2VC2xLU5ukdlYJZli5+n44uOAMw/wgao4X1n+qy5QZjm1xPPGUPeGQvQ5BoAkzUJOoBOY7bAzWO/yWwdWOcSc9Vkvs2BobuXTKx0C0mBomuQ1weQRPc1H7KCUVBWTFld/ jE

8W3D/A8Rft14rOeCunGgp+pmUS1MX2ghnNZHs4Kgi2vEvDQa4EG+U5T5aY9PUggdJPJezAAkd9oRAn/B3hQxhRMdp1j/kGkpNbUWDi3qBj8SwWDATeBLs7xek1hbh2RFp5qq4k4kYSZ2Ns 9+IJ6Rf8YzzKrRj/P6jJ962m7ne2vktDp+3/zJRX0IZ5LhvtGy8zRlTWJ/3ot/66X e4rhiUmq6NZKKP1HWd6KFvP/JjzokumdZh9YxPWDkuNfYz3LzCozKhWtQSf4zH+F9Yyz3 6 24Zb95kfFuwu1XWA/KxnP9AI84FKe/Ao+yyhRU64PBpaDVr7MeJbuYtf/IWc9/m/bE36K8Z o2XV95by9df57li9Z5blvWsPpmvsD59wO5ut9vAEhZr8UgPdvWCLKK9O94fozasDr9GJ7z+ h f4gnnFm5Gd95KurxWVcguf9fuNew6IsHFjDnvcXO+nxJu0E6+c3a6fhn8OT7buvr08MgguyV +hfwqONCIIN2Rge3+9jeX lQm23Xl9hj3v3R/EM8sSn3mK45Kr0DO7Np3j9zQNv3UYwzM8vTk8gOoxDJL67jAg9h7+OTziCwjirz7mXfVPEGhfp6vX6pD08tvUGOB8PneVTfmENUNb7 04jJiXd9Qg21rSfcBLsRgI eb wUqPfPl90z2Srx0WwSOYiPh+xneyAMiJ9XOWpjzxlzyYCZBHpYsHcUnHc3uzBgM5oTQ8ynqjhHhgbJWH6/L5iyuYtUXtwZvH81d716aaXu59PSiIHnkIAuzIlu UUB3XNiP24aRgraVZLAfM8wjA +ZIg4/snamoZ9zf1LGwY/OK369ejoSMHDukzwANoT6dejx8ZsGQ++R2QFRLuHtMaCh2KZDcky/Z pHD5EvhyU2oEex8OYm/5OafSn5QtPuc3I2cvrWdWSMi6jAms2a AiHUTdTW84pL0vgIdY4InIkc ZuK9IhBrPm1nvM6N6I4Plid+sxzQrrFrF6517QjWWs1neYXcbLmeC12FspSDDittvr5Fqd95igDT5vDs8E9vZfpc6fGPSEeTA53vhwwuFNt2Q0Fne5x61rA qSvg6QZ4tofDYT6V/BnSz21+uF 6RtOyVMTNTYNbwkAx55HjwA4/a5/sneO7QYWxuIxYVdUeC9vA6Det37nopnpzujAv2uppSfJXMpsqCRzmeB+3Yuige5U7DZYWFzbSdeMd++jN4RJ1JdH mfplPJGQpp0UOKZ8jGSLcwnhPFgu6 8way58SQEQUUGV1E8ymyVTod34JdV1uyf/ I945HiCLSkeHENrcTxlGvd0BYJMbuj5a3aThDRr/xBPcq4hdHOiQVyeaTdbpf6ddqr1JAcX8

1xDDkGIZ0M7HFxA0/k7FaQTQdd9R2kH79hHyj/FAwb0LRsts3hfx9WV9G8qM17SlGsPForduvwujAfBFfczvgDiSPQ+js7rHfNmDA9J4x/ndflx5sPC+zAFz2ya2WI/d/xP91fy/2ww3h8EEy pNr/vMUlmK56J+WSrNUjzKkNUzHl16Bm1nFOHRymwn2CUKSh4kipTi+Thv3lYPeq9Py+HarbjKrEZY//u8b1WrX2l9zixWhEC1iwJE8Kyy7JEnc7yFXLZG9wkJ6rsUsUdnqPZfXr0xHy TaxKGqS ex3uQfCrn0Yji7JV3xyPb2zvvjo8ROV3psrtsYIkPtmH5H3KUgmsWzQULAAAAAElFTkSuQmCC

Son tantas cosas, esto, realmente no lo entiendo. No tengas miedo si no entiendes. Puedo usar Baidu. Lo que vi en Baidu es esto:

No entiendo, todavía no entiendo, así que miré al Maestro. Notas Base64 de Ruan Yifeng nuevamente

Solo entonces entendí que para ahorrar recursos del servidor, una solicitud al servidor requiere una solicitud GET/POST. ¿No sería bueno si lo pusiera localmente? No le cuesta a mi servidor. La eficiencia de la transmisión es rápida y también se puede cifrar (aunque no funciona muy bien).

Por eso debes tener espíritu de exploración y tener curiosidad por cosas nuevas.