Using Image URIs in SAP Design Studio
With real-time SAP Design Studio applications getting more and more complex, performance optimization is becoming increasingly critical. One performance related issue that we faced recently was with the loading of images at application startup. None of the images were showing up until background processing was complete. We had to figure out a way to solve this and using data URIs(Uniform Resource Identifiers) seemed the obvious solution.
What is a data URI? A data URI, as we know it, has the contents of the file encoded as a string. So using it helps embed the image in the CSS code. This gives a big performance boost when loading multiple images, because it helps cut down on the many HTTP requests required to load the image files from a location.
But the challenge was to figure out how to use them in SAP Design Studio. Here is the step by step sequence of instructions on using image URIs in SAP Design Studio. We used image URIs in a Textbox Component & in an Image Component.
Image URI in a Textbox
1. Convert the chosen image to the image URI scheme (base64 encoded string) using an online image URI converter. (ex: http://webcodertools.com/imagetobase64converter )
2. Copy the contents of ‘CSS background’ and paste it in a class in the CSS file, as in ‘orders’ here.
3. Drag and drop a Textbox in the application. Now give the CSS Class name (here ‘orders’) and set the height and width according to the properties of the original image.
4. Another way to insert the image URI in a Textbox is through the CSS Style in Properties. Insert the same code that you put in the class ‘orders’ in step 2.
Image URI in an Image Component
This is similar to the previous method and is suitable for small or icon images.
1. After converting the image to a base64 encoded string, copy the image URI code from the online URI converter.
2. Drag and drop an Image component on the canvas. Paste the image URI code in the ‘Image’ property of the component. And your image is ready for display !
Pros of using Image URIs
• Since image data gets embedded in the CSS file, HTTP requests to load external image files is significantly reduced. So images load much faster.
• While web browsers will not cache inline-loaded data as a separate resource, external CSS files using data URIs are cached.
• Images get loaded in one shot, without waiting for the background processing to complete.
Cons of using Image URIs
• Content must be re-encoded and re-embedded every time the image changes.
• Base64 encoded data is larger in size than its binary equivalent.
• Sometimes for very large images, resolution is not satisfactory.
I hope this post on using image URIs in SAP Design Studio was helpful and I seek your ideas on how you handled the image loading problem.
Hi Manoj,
That's a good detailed explanation of the Image URI concept which complements the following related posts:
How to embed images inside of a Design Studio App without uploading to server.
Design Studio 1.2/1.3 - New Icons with minimal CSS and no uploading font files!
Of the two techniques described, Text component and Image component, what are the relative pros and cons of using each? If I understand correctly, you seem to be recommending the Image component for small images and the Text component for larger images. Is that right? What's the reasoning behind this?
Regards,
Mustafa.
Hi Mustafa,
Yes. If you are known with the standards of image(static height and width) go with text component and if you want an image to be responsive then use image component.
the difference between the both ways is while using the text component the image must be used a background image. while in image component we use the image as image/base64 uri format.
Regards,
Manoj Kumar
Thanks Manoj.
If you want to save yourself from having to use an online tool to Base64-encode your Image, consider this component:
Design Studio 1.2 SDK - An Image Component free of MIME Repository worries
You can use it as-is or just use it to grab the Base-64 URI.
I tired adding Background Image, Its not working for me 🙁
Could any one help me on this.
.someclass {
background-image: url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAcIAAADICAYAAAB79OGXAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAACXZwQWcAAAHCAAAAyADsplREAAAABmJLR0QA_wD_AP-gvaeTAAAvY0lEQVR42u2debydVXnvf2u97373cIbMOSEJIYEAgQAKUoyioLZORS0OcQBna6FVr7Za6q297a291kK5ON_2ilV7tZNDrVoUtYiKiggKKHMSMhBCck6GM-yzp3et9dw_3mntfXYgZCADv-_n87LHs_fJ5uz93b9nrfUsJSIghBBCnqxovgSEEEIoQkIIIYQiJIQQQihCQgghhCIkhBBCKEJCCCGEIiSEEEIoQkIIIYQiJIQQQihCQgghhCIkhBBCKEJCCCGEIiSEEEIoQkIIIYQiJIQQQihCQgghhCIkhBBCKEJCCCGEIiSEEEIoQkIIIYQiJIQQQihCQgghhCIkhBBCKEJCCCGEIiSEEEIoQkIIIYQiJIQQQihCQgghhCIkhBBCKEJCCCGEIiSEEEIoQkIIIYQiJIQQQihCQgghhCIkhBBCKEJCCCGEIiSEEEIoQkIIIYQiJIQQQihCQgghhCIkhBBCKEJCCCGEIiSEEEIoQkIIIYQiJIQQQihCQgghhCIkhBBCKEJCCCGEIiSEEEJ8Qr4EhDwxKKUAQAGQ9FT13EW820RE-KIR8kS8N_lmI-SQCC8x20F6fx2KxySEMBEScjDll6e4TFRKqeC9Jy0ZedbyJScsHB5cMbtcXhZF4aJAML8UhnN0oCv-YzjrWrExe6zCzk4n3r6n2d4yOjG18cebt24BsF1EbG-6ZGwkhImQkMMtv7yGqZTSnz3v9FOfsnTR02dXq2uq5ejsUhicpLWep5WCSg8oQM2oiqZpDwCcg7MO4hystXCx3dUxZkOrE9--p9X62V2jO29566333i8irt_vQQihCAk5lPLrSmJKKfUfF5x97inz5lw0WK28oBJFZ4elsKK1hgo0oJOhwH1-n4lArANE0hHDNGE6B1gHZy1MbFrt2Nwx1Wx9Z93E5HUvv_lXt_m_D51ICEVIyKESoM5S2B8vG1l06eqTXz5vcODScjk6PwwDqCCASsUHrYAs_SmVCxF7y4ECiJNUgJn8PAk67xQAnCRSNAatTvyTPY3WP__TAxv__eqtO7Zn6RSA4_ubEIqQkIMqwH847cSV55-49LLhSuUNUVQaCQINKA3RifSgdVr-VJ4AkUsxrYvm_sskiOx9KJILMZMhUhnmonQCcd2p0RmLThzvmGw0v_iTLY98-u0PPvQAhUgIRUjIgUowF-DHTl224oVLl7xneKD2ligqDeVlz67Up5PL-fXemGA-61N1B8P0_SeZDDMB-hL05ZhdZ116P-RSVGlZtd2Jp6Yarc9975FtH333g9s29v5bCCEUISH7nAKfqtTQ588_593zhgf_qBJFc1Sgk4V-mfB0kfyyJDjzSBMhupdBJAIskqCf8Pwjk6TkJVKZIcFEmklqVC65vtXp7NndaF7zplt_9bFfiUwxHRJCERKyzwIEgBvOOvW3VyyYe9VgpbJaBwFcKjTlJz7dfQqgkCI8CeZr6dFTGkVXWRRAIToI4NAzZuiKSTReqRTOFaVUX5TWYbrdunvj-MQVz79n_beydEghEkIREtJPgoGI2GcpNfypc8_66_nDg--IohJcOs6Xyy4tgSpv_K-4TSVLIzwBqsx-jzJXBkiTH_zZoijGBL3EmE-g8UqovRJMJJlMwNEQxHGMXVONT73r1_f86U0ik0qpAIDl-58QipCQriT4pVUnPv3seXOvHapUzlSBLtKcX_rskwjzx1E944bqMSSIIhVKlgq7xgvRLcCe8UNfgFn5NAuT4slSpelwqtn69R27dr_9NVu23sJkSAhFSEjXYvQfnHHqW5fPGv5kpRxVRRUp0B8PTCbAYMY4YL5sIiufAl5JFEXZND07422XCRCe_NCTDPcmwVSSifgws2yap0ZAi6DV7jQ3jk--83kbN36Wi_EJoQjJk1uCeSK69fRVHz5u9tD7g1KIdGU6lNZpsgOgdJr-sHchAjMToWe_fqFQfBFmV3SlQ-mTEtPLnhAlXV8orpg4k91HemagKgGMMdg22bhyzYZ17-8dGyWEIiTk2Bdg_sGvlAp_uXrVPywcHHijDoNEQLpP2svaouliSUQuRD_9-ZNkulLho9VG5VEnzqSJzZMZCgHml7tLoX4K7E6FyaFEwVmLHc3GF85bt_6tImJYKiVPVth0mzwZ0SLiBpWq3X7qqi8urNZeDig46xKxCZKdOpUASkGQyE9UKpVMkJLcR5RCegFQAtU1Ltg7Pqj65cFicX3mxR4R9o4Tdgmwa_KMlxwdkuuBLgnCASIOCsBIVHnDL05cOTis1OtFpJHJkH8ihImQkGM3DWb7AUa3n3LKlxcMDrwM2p_lmaU-eBNjACjdUw5NpJZd7pJfz9jgY86TAbpk1-98vhyid1ZpJsBMmoIZpVDxxZj_rMt1p51gtNH8xtM2bVgLoAPuakEoQkKOaQkqALj15JO_uKhWe13WGs3fGcKfGTpDiJjZNSYvm-bDhL1t1fbVhOgeHwSK5Af0nzjTb4ap615q0W9MMd8C2DkoCMQKHmm3_nXN5o2X5s_GDwdCERJyzEkwEBFz04oTP3LC4MB7VBB0CUv1rhf0xNglSa9TTCFF_7r8WXuGB1Uf88GriEr3zb2zSKW7TNpfgJlM-6VA6Wra7SdGla453NRsfPTCrZv_UCkVIllnyA8IQhEScgxIEABCETHXHb_snWcMDX9Cp63SujvFoGv9n1Ld3WL6TozplWLuu57F9F1C7JWg-IEQMybP9MwoLeTXkw5R7GCR7GuYirRrkg1mLsFIn0cJYJ3D3a3Gu17y8EOfTGVo-BlBKEJCjn4JBiJiP71w5Lm_OWvOd6JSWEpmh-pcfkXq24sQ0V9-fnl0xsSYnr6iUD1hsF9A9N-PXWVRr0yar5gv7iNIZ4VmAsxSoUPPGGJPeTR9nqwTjQLQcS6-YXrihZeP7riRHWjIkwHOGiXHvAsBuFcGlZG_Wr7ss1EQlJxzicCc80qgAklniWZyE38Lwfw2KSSnVCKbXIZS7DyvPMPtxzghPN_126rJnzgjvWmvK-khHwvsSpNewszWIGZXlbUuPbs29NmX1GprAIz2UTghTISEHG1p8Afzl_zz4uHa6yqlUv6J3q9DzMyE6CU9f5G8P0GmZ-F8IT-1byKUnjMz1hQm_-k_caYQpd-PtBCm133GL7m6Hin2-fawLW7_yzO2bLyEqZAc62i-BORYl-Bxn37GJfe9YOHrgvEY03EM5SUuyXd-d95O8IkoxDqI7dn-yCYJStLNcSW7X9cu8g6w6eGf39vR9z42efz0sYvnLI5sg97u3zGVnPdY4qS7rJr9Gx7DayNh9Lp_WbzkEhGxAILeLaQIoQgJOcJdCEBmnzln0WmLhq_6r9eOYNeCENIymI5NMV7mCVF6hejv6NArnEwm3qlzDs66blHmInuUo0t2LnmcnscW6wAr_QXtN972fv8u2Ykn8n1IdgIgVApPKdeufPFAdVF6FU1IKEJCjrI06M78g9UfGCwHS3YviHD9yxeg0nSInUPTmCQ9WX_ZgSdEP6056TpycdlCdpkcYTNxeenNPsbRdT8Uj_Voz-UfXemvJwGmt2fP83hwAAZ0sPRP5i78QNqHlKmQUISEHEV_12blJSedM7Rk4PegFGp1i5ufPxfrVtVQbTp0nEPLmmKySJ6u4O3m0E-KfUTkC8tPeDYVV34qXaczDjfzfL_n6i2nzpBfJsD8-gN7MZeUypd9cOGCcwEYfmaQY_LLMwfAyTGYBkMRMc_9_IVfGlo8uFZEoAA0BgOcccsE3vHhLWjXAjgAZa1R0UH3qgbVp1Ua4LUP7V03uI8TZEQgnRiIOxBru7ZeyjrWKASAjpAs4dMo1hRmE2IAf51h7wzQ5DrZhzmePb_gXu6ftV3dVm9_5ZmNDWu5tpAci3D5BDk20-BbTn7GKa846RX-DbVpi7vOm4Xb1gzj6T-dxPRggLZLmk-XPRnmIlHSNUsUUF3tz7KFd6qf_LKfE4E0W5B2G2pwAMHSJQhOOAHBksVQc-dBDw4AANzUNDC1C66zGXZ6E2xzKySuQwUVqKAKgUK2UgPJpeyrrLfOQnqELXv5sgBvGUjvbdL3y8UJYl_-kTcMPgvAj9PXmI25CUVIyBGaBrWIuOd-7sL_FpaDIEuDmbdCK_j2qxfijDvrCKzABgqtdIeGck8y7NoFIhWLQs8CevRpjaaQlCWn6kCgEZ39FES_9TxEa9YgOHEF9KzZUKVSvjhPpYJVEIjEEDMB29iAzq6fIh79FszE7VCwUOFQuuRDEmGpVMTeZdUjwlx6PdfBk2HxmL4ofTEKAoXgdzapd__RF_BjKGilFLdrIsfOZwf_mMkxJEIFQC158dLVZ152-s9LlbAifnpKqQ-HuPhz2_DSL-9EfVaQVxorQYCy0vu-ctxvoebtNiGNacA5lH7zeRh465sQPWMNdKUGMTHQ6SAQh0AraF20bMsqm0YUHAJARVAB4EyMeNcP0Nny94jHvgPoADqsJamwS2DdIntU4WGm-DJ_K1-uWqC1g9KCIADaHWl98BPxmiv_X_yrNDnzw4NQhIQcYSIMRcQ865PnXzln5awreh2VYUOFUtPhj9-_HvN3WXQilQe6qg4Qab1_bVREIHv2IDjrDAx-4P0ov-AFyXM3m4g0EIYazgmmWg4TLYvptoWR5LkjDdTKAWZVAwxXAkArOCuInQKCEiBAZ_t1aG_4ANz0r6FK87r3AFbSI7q9JEH09AsHAOWS86n0tBboQLp-PvmYULhvnfzt6lc0rshea_7VEYqQkCNHggAQoqRnPf-fnndbZVa0XJz0FSEEmB4O8Mzrd-Etn9yG6aHAvwnVIED0uJKhAuIYUq-j-tY3YuDP_gzBrGGg2UQlUNCBwsN7Orh3ewsbdrYwVjdomWTSp19NDTVQLSksGAywckEFpx9Xw8jsCHBAywhUGMG1x9Fe999hd3waKhwGdOglPsl3icovo3dOj-Sl1Ex6_mm3-Ga-xhOTsvnkFzd_Y9ck9oCTZghFSMgRJUItIu6s9531iuOfs-SruqSKyZj9wptWiAPgXX-xEafe30SzqrtluK_JUCmg3YbEBoMf-gvU3vY2SCdGycYoRwE2jLXw_fsncc8jTbQMUA4VolAjDJLSqPae0zmBcYK2cejEglqkcOZxFTzvtNk4fn4VpmNhJAIChfihj8Fs-mOooAylIxSlUr_rWyHCRHwuEV6Qik89uvj6_GNhLfCN79pXveqK1lez15x_feRoh2uCyDHzt6yUwtxVsy_WoX7M5QPKCWyk8Z-vWQijBNqfEwOg6SxicY_dSqUTQ4zBwEevRu1tb4ObbqAGA-MEX7x5FFd9Zxt-9mAdzgG1kkZJq3RSjMBaB-OSwzoHl85WLWmFWqQRW8GP1tfx4W9vxVdvHYUDUAljSNxGuPTdKJ38WWjVhlYxgiDZTCNIx_W0tghCi1LZIKrEiKoxoopBWLYIQ1fMDhXs8zpDESAMFM5ZHVycTUzinx2hCAk5MtIgACAYDhdFw-Xn7msjsOq0xQPnDOGWZw2jOmW6oqMC0LQWscjeH845SGMatb_5EGqvfTVcfRqDkcaW3W186Ftb8e27xqEgqJVUIj7nYJ3AOsBYgbUCY5GeJod1kq6VT3aLqEUKzgH__oud-PB1W7BjsoNqRQOmBT3yegTLP44AU9DaIAgNwpJJ5Fc1iCoGpcgi2E_x7SUUYu4cXLh4Nhb5rz0hFCEhh__v2Jx86clnh5VgKR5HK7GoI7h-7Qh2Dynojp1xe9Oa_jJUgIyPo_yOy1F90xvgpuoYKmvc-0gdH_rWVmza2cZgWUMBidxEUgk6WOsS-TlfhokQi_tkUhQoCIYqIe7b3sJffWMzHhxt5TLEwsuhj3sXytFUkfhKhfjkQMXX634BKhV9_IfeVTkH7DRDKEJCjpxQKCKYu2rOs_Od5_eRUtthxwlVfP-ieShNGThnu8whqQyNL0OlIJN1hOevQe2_XwFpTGMg0rh_exNXXf8w6k2LakkXndkkEZpLE6FxkpRDreSlUWOT8qixxXmXijDpqiYYiBTG6gYf_s9N2LqrjVqkABfDLroSrno2lGseeOJ7LAQIQ-Cpq3G-ZFNJCaEICTn8f8dKqag8KzpP6cf_uVxrWNz0soXYvKwM3bKwzuUL6bNF7w1rYDMZGgOUI1T_xwegojIiZ7F7OsY139uKqZZDFKpk94hMgFY8sWWJ0HnpMJNguoOFJ0GbpkaXnlZDhd31GFd_ewvqbYtIG0BXEc__CAQBAHvov3VAYcG8YI1SKuJnCKEICTncUTAdo4rmRiNhJTx9v94ERtCcVcJ3Xz0C1XawkokrGafLZDhtDSwEmJpC9JpXInz604GpKYShxrU_2o6HdrdRCVUiO-8xEpkhHx_MJWdd1-Hykmh2XylSYVZeFUE10nhgewOfu2k7SlEA5ZpwAxfCDL4WynaekNd9oKpOO3FEjQAQjhMSipCQw-xCAPb4Fx-_PIj0ov2tC1brBnc-Zy5-ffYgomkLIwKTykzSfqQCoNHpwM0aRvTGN0LabQyUA9z0wAR-cP8EBspBIkCRPNX5MrPpBJks5WWym3HYnjQoiVhd-vsYJxgoB_j2r3fiFxsmUCtrQARm9vsgunzIU6EIEJWw6O2vDJYj6TlKExKKkJDDLEI3vGJopQ602t_hMSWA0grfe-1xaITJFkwuk6EInLVQIrBTddgLno1g9WqoVhONjsOXb9uNQCV7Gbp81qd4k2ScN2PUdcuw9_DvY7NkmY0vunQnqKT_p7WCf_35KKwVaGnBVZ4KW3sBlDv4qVDSDjhZP_IgUOqMk4MTRShCQhEScvhF-D-B8uzKiSrdtQj7acNyw2LzU4Zx63PnIpqKYSDp3r2SlzohDrWLXgxAUC1p3LJxEvc80kAU6kJimfS6lkw4LyVm44K9SdAbO0zXFbouiUouRusElVKAX26u4_bNU6hEycp4M7B2v__9-_y9QwCtFY4b0StV3myVEIqQkMP3N_x30GE1XHYwPo_LHYcfrl2EnXND6I6FFQcLgQVgOh1g8XEonXsupNGACHDjfRNJ6dJJsql8mgZdn5KnPzvUdiXF3qMQo-kjS5eNNUrShea_7t0NrRQgBrZyAVw4D5D4EH_7UBisquXpZwg_RwhFSMhhiYLZJI0dKIXlcORgPGbYdtizrIqbXrYQQT2ZHJMlQtNqITz9dATHLUJgDXZMdnDX1gaiQOVJzThvsovNyqBuxhigv0wiXzbh3-66L2cJMtug3qTPFQUKd2ypY3w6RoAOXGkpXOlMKBz6ftjVsh4BEHX9vyCEIiTkiXVhelSUxlwARVnwAMqDlbrFbS8dwaaTqggayRpCC4GJOwhWnQqUSogChQfHWtg51Ul2qXWF8BJJoWv2p-1ZN5inRK-jTHLZeeOIfgk1WXQfp4-RlVkDBWzb08amnU1EISAIYMtnHqLyaLbZcPKyBwHmAKh030gIRUjIE0n2cR-pUA_5G8cL9l-I2go6QyF-9NrFcHEya9Q4BwcgPOEESCqgTTtbaBuXd40pZom6fHZn7LzOMa5HeD2Hsc5LlcmSC-OSI3bJxB3nH-lknEbbYtOuFsJ0DaULTzp0L7ao_EIY6mEAZRTLLQk5KuEO9eRoT4QAEAWBriW7TciMcCL7EVeqdYP7LpyHe24Yw-pbJtAeCiFBAL1gQbKgHsC2iQ5M1gZNJY7Q6Wm-44NScEhOk_3_VPcu8r2ykWy-jxTn0z5pLt29N9upQiQZJ4ydw7bxdv4NQIJFB1eA4ifBtHONAFqpCoCS9_-CMiQUISGHQYQq95x41tsf-_XYUwtw0yVLsfz2CQTGwgUBUKlAJEl8U61kDLHjBIESBErlEtS5DNMtkbKuNEp5m9n3CDuNtIJCeLkcRfK-oSJJOk0W2AOxAONNk-kToocO4CvAvrw2CtLtPUURkqMZlkbJMYGk_zmYfTajpsW2M4Zw24sWIpyMYSURDVIx2bS5txVBLIKOCIx46wX9CTPWL5uKN6ZYTJbxF-Dbfovw058xkpRc4_Q6SZdZZL-XIDgE_ktd568npPYIEyEhR6gRpUhS6gDTYbnlcOvaxVj1410YGJ2CMxaSboJbCpDLUCQRokOSBpNDoKGSEmlaC82jq5cMHysVJiXSpDSarWv0JSQiCAOFvDuqa6T_5gO3YbGQXuVfNJKjkCKTIGEiJOTwq8-JTdqpSGaOno_n_f2kDtoOU0squHntYui4BbtrF0QlG__OqgawzsKlTbqzMT0rkk-U6bgsvbliScRe1hCadH2hcdI12SaW9HHS2_J_niTt15xzmFML08sKyu48hC93kgxFFJxThhIkTISEHH4JKgAdG9t6XrbEQawMqmQ5xV2_vQinfHUdFq_fDGgNJ4Ils6JkGYO4bApMOhkmGRiUtF7r0l9ICaDS3y4La6qPqCVLgiiSbfEPFq8EKmmCFCyZHaVlUkCbLYdEfshTYXK-05FJAB1wfJBQhIQcdhG2YDCeX-uQzx71y6Oi9k-QygjsUIifvGEZzrr3PswzFh3jsGJ-hHIIGGuhlUpnhqZHOmsmmyDTtaTDu6D2IbHm5VJPfpkQjXUYKCusmF9FO05awOn4_oPz4vYtiyo4lwjfWjUJoEURkqMdlkbJ0YxKtWdMx-4U6yWog7Cw3n-W8rTBQ885Dr-Ysx3Btp1oO2DF3AoWzy6h0TFJK7a0TOqchRObnnrXS1ZCLY5sTeDM612xN2H2GP51LrluuhNj-bwyls2J0DYKsLsQxncclPHBGV85ROUyFFFott1YmgjZeJtQhIQcxkQoAIxpmK1w-SK8bhnODGL79UylUoQfndfB7i3rgSDCcDXAmuVDmGp1YK1Nx_Vsuvt8IiprbS6t7DSXWp8jv93NvJw8R3KY9Ki3Y1xw8mxUIw2LCsLOrxCYDRBVPkhpUKcl0e6yqDigPu0eQrLn0wG0OieEIiTkAD6si_4xrfHOZrHilREL84k7OM9XagseWQrcWLoTFROgGVu8-Ix5qJWAjokTOdlCUtYTn81l6Emtz5Elykyi2c9mj2lscbQ7BvNqGi8-Yx4aHQsnEUqtb6X_4IMV0IryqEDBOQURDecEo7vt5j7_LwihCAl5gnEAgumHpx90VrpLoofgs7miy_ip-wUmWnvQiQWrj6vhN1fNwZ56G84aOGdgrYHJDmcRW09ivtTczISXJUpjLeJcfNnjFfcXZ7G73sRLz1qIkxbW0OxoaLsN5eZXAXVgb-vescFsmYRzKu8zag3wwCazIf0McfwzJBQhIYcxGALQO362fZON3WQ2oxLplkjZmoa-fUj3g0hFeKi5BbeM34yqqqJjLH7v2Uswu6rQ7HRgrYGzpifp9cgxlZqxiSTjTIbWE18mVGe8tGjyx59utbF4Vgm_e8EyTLcNnBpGufElhGbzAZdFiySYfDyIy5dL5KXSTgeT37jRbgYQgGVRQhEScthFqCYfmNhmWmZ90nvMy4r9EuJBkOG3dn4TE_EE2h3g1JEa3vW8EzBebyM2aXKzcXqY_HAuk6JNLxtPnAbWmeJnTHofX6QmOe2YGFONDq540UocP6eMZhxAmW2oTX80WeN4MNOgSybIZGkwGyNstOz6H95lt4EzRglFSMgRIUIBMNWZjO8QAWCLMau-qdD7wf0SoY6wpb0Z_zn6ddR0DXumO3jDmiV4zbmLMDbegDVmRhr0ReYLMi-lGpP-nNnLzxSXx8ancdmFy_Dq85ZgfLoDh1kYqF91wGkwl2DPmsHeNAgBdu5xdwCY6vm6QQhFSMgTbsHEbg6ATG6a_KkzaecV66VC5yXBg7SsYkAP4Lqd38Cdk79EVQ2g0Y7xl79zKl5y1kLsnpiGWAOxcSI3UwjNpOeNNUl69G_LSqaZ_EwqTWOSxzMxdo5PY-1vLMWfvvRUTDY6cGo2Kq2vY6DxKTgdHbAEkwtpSVR0usOFSs8ngjQxcPeG9k-RdfXhRBlCERJy2LEAwoe-u-U207JTmQDFeanQzWy7diAlUq00BIJrH_577GhvRyBlKAiued2ZuPjs47BrTx2mE0PbGMoZKBsDNoZYA6SSFGvgTHIk4jSAye4TA9ZAWQNtY8TtNnZPTOPN5x-Pay55CjrGAqhhfPpBRLvfCa0cDkZ_jCT1AXBZItQQp7vKos2WTF37tfZt6RNa_vkRipCQIyAYAsDUhslNcb1zaz5hJivaZUsopP9yiv2VYUVXMNrZjk9suQZ1UwdsBIjDNZechfddtAqddow9k01IHCd7GBoDZVLBpeeVTQ6YOL0tPTWJFF0cY_dkA2It_vKVZ-JvXnc2YmMQSBmb6-PY9NDbMRA8DIvqfv9LuscFu0ui1ql8skySrjV2T7if_-QutwkcHyQUISFHDC5NJs2prVPfdkYgSbexPBWK4KCXSAWCgWAQ65sP4OrNf4PxeDdCV0WzY_CHLzoZX3jHGpy3ci7GppoYm2yg1e4kZc84KXtmabD7fFIabbY7GJtoYE-9hQtPH8G_vecCXP5bJ2Oy0UZZ1bClvhP_eMcf4tzaj6F15cAl2DVLNCmDWptJUCenTsMY4P6N7euRtFYz4NIJcgygWN8nx8QfslIhgPLwKbNPedofPe2H0VA4JEqgtQJK6Sa4CtABkj2S0q-BeScytf9L0BUU6raOxdFiXLb0nVg1cDqmbR21ioYV4Ia7d-DffrYZP1s3hl31NgAgCjTCQGdPnfSJsw6xdVBKYeGsKs4_ZSEueeZyPOe0EThxaHWAodIQ7th5O_78lo_jPYtvwMUnTMHG-1cSnTk5JhEfRMFaDWd1unheA1ZBXIipup269E9HL_zRXfYBAG0RMfzrIxQhIUeGCDWAKgD1jCvP_8LQcYMXQwtUAKhAQQUqXxqnA6Rbx6ciPEgybLomIhXh4gWvwgvmvQhlXUZLmhishBAA63fU8fMHd-HOLXuwYbSOPdNtGJsEqlIYYP5gGSeNDOGc5XNx3onzsWLBIEQcptsOtaCGlmvhaw9-Ddfe_RWcOziGz5yzDs71THR5nBLMtlTyRehcIkJxQZ4EXXr5wc2tr577trE3pxG0KSJMhIQiJOQIESEAlAHoFWtXvuTEF674UlBWSerTCipMhAggkaNW-e5CXUvvDlCGRgwaroFTq6vw0gUX46zBsxHpCG1pIQwE1SiEUkDbCJodk2_sGwYatShEuZS0L2vGFs5qVIIK2q6N23beii-v-zLuGrsPpWAQ_3jWXTht1jisffxp0Ben30s0k6BzRRoUpyBGw7kAnTbwmf_YvfbPrm1cl4bYNj8_CEVIyJElwwBADUDtmVdf8O3BBdWzoQUIkJRIw1SAuQy9ZHiQZJjRci0IBKfWTsMzZz0LZwychfnRfAQqTBpswwJKvE0ikn0MtQoRKA0jBmOtUdy55078YNuNuHvnPVCi0LRDeO3INvzJqffCmdLjHhl8tCRYjAsGcC6VoC3S4Paxzi9WX7r9IgANAA0R4YxRckzA_QjJsYRDMoFjcsedo9dWL1j6f4JIAwpwEGijIKFAaZXPHFU63bfQeWVSydtr7rcQK7oCgeCBxn24d_ouzC3Nw4rKSTixehIWl5diXmkeanoAgQ6gAFhxaLoGdrZ34qHpLVg3uQ7rJ9djZ2MnAglQDWuIjcLCUhtvW7YZcMF-S9AfE8wl6JIZos4FeRKEU3BWw1oNGwM__GXjWgCT3mtNCBMhIUdYIsy-3NUADD7jqmd_b2hB7XQoSdNgWh4Ni8kzeZk0S4I9yfBAZOhjxaIjbVhxCFWAsq6grMoIVJDcDotmp4XpRhPGGminUVJlaNEQJxAn2N0q4Ypl6_C65Zth49JBS4LOK4lCdNJOzWo4G8CY5LrRnfGvV79-24sA1NNEaPjZQY4VuHyCHDOkH8wWQAxgfPsdOz4ad2zeaSZfTmGKxtxi0-u61htmD4gD7kuaEagAVV3DYDCIik7W_DVdE1N2ClN2Ck3XhDhBNaxiKBxCLazlkgSAhg1w1sAk1i55GGLCx_GaqK51gr1jgnn7tFyCGkjHCK1N5Bh3BN_92eTHAYynr62lBAlFSMgR7MP0wzrc-M8P_Ed9rPFTuER4cPsow96-pHLwd3VS0AhUgFCFCFWIQIK8tZlXrgEkaRlnncJlx29GGBq4fZwlOnNSjE5l788OLcqhiQQVnEnLoVZDOY1HRuOf_OEn618HUEpfW1qQUISEHOGp0KUf2K1N39v0v1qN2GTCe-xkmFrP9XSgOYjpsI8Vuxb_-9crpTBlQzxnzi48c_4onCntw2ugusYD_WbZWbu0fHaoC5LlEb1jgjZJho2mNZ_55viHkCyg74C9RQlFSMhRQSZCNfbDbT_evXHPtcY4iJX-Msy6z9gsORZ9ScUd-nQIeNKVpGNNIjTAiMKAsrh8yUYA6lGf1xcgcgH6pdBkEkwmumRmaDoxxuokCaZp0FkNaxTueKD9mb_7evMniZYRg5NkCEVIyFGTCi2ANoDg7mvuuLq-q3G_iOojw-y85EJymQwz4z1KOjwoQpTk-ZWaEQgxaUKsXbANJw6Pw9pgnwWYT4hxRSlUvCQoaRIsZocGhSCtgnIa28fMA6_6wI6_TT8n2uDYIKEICTm6fJgmmBjA2JYbt1zRmu7E4lDI0GTnJT-f2c3Z7PKjp0NfiPuriBmPm9KWAMdHTVx63GbAhX3l1zsbdMbawDT15eOBtkiB2TpBawIYq2CNhjMKYgNMTzvzj9ftucIIxrzXkRYkFCEhR1kqdGmS0Tu-t_XG0btHr4xjl7QlM93J0DmBZGL0dqlwexk77CfE_ZKi8meqdq_kb9gAbxnZjFmVJqwN-sivNwF6ZVBbjAVam_YOdUF6dC-Wt6kM85JoR-HHtzeu-tjX6jd6aZBjg4QiJOQolaFFMtEjXHftPR8f3zrxdWsEziZHlgazXe3zpJiNE7qescOecqn0Ws-XYo8Y-woyLYsmAixunbYBzqmN46L52-BM1PNzKl8K4S-HgCvGASVtnG3zCTFeKdSmpVCTrBPMkqAzGmJD3Lux_c03XTX6MSRrMltgSZRQhIQc3T5EOoMUgPnVVbe9b3K0_ksrSGRokAqxEGA-icb0SYdWZgqxd_0h-osR0ueqfH9ESaUqaboDLlv0IILAwYr2kp_ungSTjQHaotyZJLy0NZrNZoXq5D5Z-jMaxmQTZJKyKFyAh7Z1bn_ZB7a-N33NmmBJlFCEhBwTqdAhmfofw2LnPZ_71dvruxqbnSskmJdKTZL-nOsZR9yrELsX48vekmI_MaJ47KTRW9JxdNKGeP7wDpw9aw-MidLd4buTXzEL1BsDdMWMz6wMmskR6fhgVgK1JoCzCtYoOBMALsToWLzlfZ96-PdacT4uyOUShCIk5BiSYVYide3NjQc3XrfhzdMTre3WAdYInJFEhiYZK8zTofUuW-na5d7ZvUsRrkeMzluo75dPs56nqSQ7TmGO6uB3F24G0g1y4YojL33abFG8LsYAvQbZ_jigmCBNgUUp1BoFG2tYE0JciF274-3XfGnsTT-5z6xPvziwJEqeNLDpNnnSyFApZZGU-2q7b95xe1DSbznhRSd9vjpcGUkkJdCBSjq6aAUlabMXncW3tDm3lmR7J6higky2pVO2o4TK9dadBnuCohhA5S3QBFMmwOVztmBxpYGOibravSWL49NTl_4-Xu_QrKQq-Xhhtmi-OBWbLqEwyTghRGPPRLzjE18Ze_MXvz99R_psTUqQPJlg023y5PqDTzpzl5A05sbcNQuftvyilZ-tza4u0yrZrkmnzbm1zvYzTGsn2Y72ShXX5QL0pJc161be7f28KAquUyxQbDmNxaqBT59wJ8paYJzXIzQTsRQCRE8f0SSJqrxU6lx3U21xCi6fKKOhRGHnns5DH_nSjjf_0w8at6eObgCIhR8MhCIk5JiXYQhgAIAaXDV0yspXr_6_tXkDT9EaCHQqxEAl2xX2EWKxu31yn-K6vWxmWCz3y89KNg6JpJvMZBziLxbcjxfOHsW0LXnRsUh7-fle-WVLK3rF55_aYgwRAmwfa935wc8_fPn1t5v7UwlOI9lVgh8KhCIk5BgXYaambMumAINq0erfP-dvhxYN_3ZY0lBK0nToCxGA9jbyzVIiepKhlwQT8fWXozMOIoASoC4BnhZN4JrF96ItQd5YW6SwaCHDIh36yyVcfup1k0n7hzqXjAtCFJwRPLit8a3Xf2jr-0ansAPJmOA0koUk9CChCAl5EibDKpJyaXXlZWe8e86Kue8tVUqqS4Y6SYY6S35ZSsyE15US8yco2qap7lQIAVycDDA6KBhR-Miie3FmtY5pFyZ38beDQjH-J94WSiLIU19xPeCs8jrKaIhNdrxoNg1uX1f_36-_cvtHUTTSbjIJEoqQkCe3DAMAlfSQRRcte9HI0xb_ZXVW9SStNZSWHhkWCTFPgLp7TLBIiJ78sjNK8oX6SgHjNsTFQzvw_gWbMGGjxHw95c-iqwy6T12WDHv6iaY9Q_NJNQ4Y29N58Js_3f3nf_1vE9env1ELxexQfhAQipCQJ7EMkcowQlIqFT1LLz3lzWe-d3DR8BtL5VIuPq2TiTI6nTCjlFc27SmNdokRPafpFlCxaAxog08dtw4LAoNWtmdgmgRzESKVXZ4MMUOC-czQdEww2SdCodm0WP9w8wvv-MTWq7ftxtb0N2ikaZCzQwk_A_gmICSXoUZSIq2kp3rRRcc_f_5Zi95bnV07OwiDRHoKXaVSlUuxEKHqHR_smSzjTLKQcMKFuHzuI3j98BjGrbeaSeBNioGXCpHPFvU32HWiksYAafoDFEzsMLqn_cvrfz5-9Ye_NHEDii47WccYLpYnhCIkZIYMs1JpGcnYoQCYs_xNp64dPmHO75YHyicGge6WX1YqVd0JUfUsq8jOCpJF-E3RWB618JGRzdACGKiuRYZFWRRdawXFIRFfVyJELkljHCbq8Ybb19ev_YNPjn0FwHj672oi3U4JnBRDCEVIyD6mw3J6WERYvOLSVa8YXDLrDVGtvDIoBdDebNFCfoUQs1TYNYlGBM4B06Lx5_MfwYXVOqbSneN9CeZJEJnouscI4dI9hFNhxokA1929sf6Fd31q7N_bFttTqbdSATIFEkIREvK4hJilw0yIpUQ_GDl-7crfGloxe200WF4TRmGotc4lCD8Z-iXR9Hpxgkmr8YzaND44dxRNFxSrIsQ7TSVYpMLuMikEcA5od6zZNRnffNsD9S-__7M7bwAwmoq84wmQE2IIoQgJOaB0qPsIcWDOmgVnzHvqyAsrc2rPCyvR6bqktdbaS4peeTQdH0yHB3H1_FGcVIrRENW9XMIXoRQJMd802AHt2Np609yzZbT9_etvHf_uF29s3IVkAkyvAB1TICEUISEHS4h-QiwhmWWargrEnLlrFq6addr8p5fnVJ9eqkWnBaVgsQq0Shbkq7wyOiUaa2t1_P7wOCbSWaJddE2SEVgniK1Iu-0enmzE9z001r75hjunfv4vP5i-H8AeFEXXTH4xOA5ICEVIyCEWovakGKFoYC8Ayihj4bynjZxQO354ZXl25aSwVlquw2BEonDukHYDV87dXZkfqajjvf2sdbF10rRO1Tsds3u643ZM1s2mR_bEG-58sLn-KzfVNzdj7EQy5pfJzyDbYiqRn6MACaEICXkipag9KYbeoVFkvazRdxVAbeFCXTtzrqqiWi4pLw5ONUw8OhG3Nm7HNJIyp78xbiY-l8ovOzL5sfxJCEVIyBEhRT8tBt55_zZfbPCSpEJ3odSlh_VO89RH-RFCERJyJEsxS4JeJ9IZRz-kz-G88-B7lhCKkJCjWZAzuo_2EWHqO743CaEICSGEkEOM5ktACCGEIiSEEEIoQkIIIYQiJIQQQihCQgghhCIkhBBCKEJCCCGEIiSEEEIoQkIIIYQiJIQQQihCQgghhCIkhBBCKEJCCCGEIiSEEEIoQkIIIYQiJIQQQihCQgghhCIkhBBCKEJCCCGEIiSEEEIoQkIIIYQiJIQQQihCQgghhCIkhBBCKEJCCCGEIiSEEEIoQkIIIYQiJIQQQihCQgghhCIkhBBCKEJCCCGEIiSEEEIoQkIIIYQiJIQQQihCQgghhCIkhBBCKEJCCCGEIiSEEEIoQkIIIYQiJIQQQihCQgghhCIkhBBCKEJCCCGEIiSEEEIoQkIIIYQiJIQQQihCQgghhCIkhBBCKEJCCCHE5_8De0UdDu1C350AAAAWdEVYdENyZWF0aW9uIFRpbWUAMDYvMjcvMTcdZR1hAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA2LTI2VDE5OjA1OjAyLTA3OjAwJXN56AAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNi0yNlQxOTowNTowMi0wNzowMFQuwVQAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAAElFTkSuQmCC');
}