Home > Blockchain >  how to convert image to responsive css code
how to convert image to responsive css code

Time:01-08

Recently, i noticed many website is not using image for there logo and even for some content images. I am unable to copy those images or open image in new tab.

When i checked in inspect elements those are codes not real image.

Example,

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="210" height="45" viewBox="0 0 286.2 58.1"><path d="M63,10.9c-4.4-7.2-14.1-3.1-12,5.2C53.8,27.3,67.4,30,72.4,40c2.7,5.4,1,10.9-3.2,13.3s-11.6,3.4-16.1.1c-2.3-1.6-2.1-2.8-3.3.3-.3,1-1,2.1-2.2,1s-1.9-6.9,1.4-9.1,3.5-.6,5.4,1.3c4.7,3.9,10.7,2.8,12.2-.4s0-5.3-2-7.6-7.4-6-11.2-10.4S44.7,16.3,47.2,9.9s8.3-10.7,15.6-7c4.3,2.2,8.5,7.2,6.1,12.1s-6.8,4.5-9.2,1,4.5-3.1,3.3-5.1Z" fill="#000" fill-rule="evenodd"></path><path d="M82,22.5c.2,6.2-6.8,5.7-7-.2A3.1,3.1,0,0,1,78.5,19a3.9,3.9,0,0,1,2.2,1A3.8,3.8,0,0,1,82,22.5Z" fill="#000" fill-rule="evenodd"></path><path d="M75.5,36.3h-.3c-2.9,1.7-2-1.7-.5-3.7s3-2.7,4.3-2.6a2.5,2.5,0,0,1,2.1,1.8c.8,3.9-3.5,14.9,1.1,17.7a2,2,0,0,0,2.7-.4c.8-1,1-2.7,2.1-3s.9,0,1,1.4c.4,3.9-1.4,9.5-6.7,7.6s-4.6-11.3-4.6-16.3c0-.3-.1-3.3-1.2-2.6Z" fill="#000" fill-rule="evenodd"></path><path d="M110,29.5a2.3,2.3,0,0,0-2.3-1.6c-2.6.2-3.1.1-5.6.2l-6.3.3c.4-3,.7-6,1-9,1-8.7,1-14.1.2-16.1s-1.7-2.1-3.2-1.8-2.7,4.3-3,11.6a152,152,0,0,0,.8,16.1l-3.2.9a14.2,14.2,0,0,0-2.6,1c-.4.2-.5.6-.5,1.2a4.5,4.5,0,0,0,.5,2c.8,2,2.2,5,4,9.2l3.6,8.3c1.1,2.6,2.5,3.8,4.3,3.8a4.5,4.5,0,0,0,2.5-.6c.3-.4.1-1.2-.4-2.5a39.3,39.3,0,0,1-3.1-10.7c-.3-1.8-.4-5.3-.5-8.4,5.5-1.2,9.3-.9,12.4-1.7h.2c1.2-.7.5-.3.9-.8S110.2,30,110,29.5Zm-16.5,17-.2.2h-.2a6.6,6.6,0,0,0-.5-1c-.3-.6-1.5-5-1.6-5.1s-1.1-4.1-1.3-4.5a1.4,1.4,0,0,1,0-.7,1.1,1.1,0,0,1,.4-.6,4.8,4.8,0,0,1,1.4-.6h.2v.4l.2.8.3,2.2,1,6.1.3,2.4Z" fill="#000"></path><path d="M129.1,48.7c-3.4,4.2-8.2,8-13.6,6.5-3-1.1-5-4.1-6-7.8a22.7,22.7,0,0,1-.2-11c1.2-5.5,4.6-10.1,8.5-10.2,7.4.8,11.2,8.9,7.4,14.7-2.1,3.2-6.5,4.9-8.6,5.9s-1.4.5-1.3,2.1c.3,3.7,6.6,3.7,10.6-4.6.4-.7,2.9-4,4.5-3,3.4,2-.9,6.8-1.3,7.4Zm-15.5-5.2c4.4-1.4,8-5.3,8.4-7.4.6-3.9-5.5-7.3-7.7-.8-.6,1.6-.8,5.3-.7,8.2Z" fill="#000" fill-rule="evenodd"></path><path d="M158.9,34.1c-.3,3.3,4.7,20.6,1.1,20.9s-3.5.4-4-.8,1.5-10-.2-7.3c-.4.6-.3.7-.9,1.8-6,10.7-14.1,7.8-18.8-.8a35.8,35.8,0,0,1-3.6-20.2c1.3-12.4,6.6-28.6,19.1-25.9,9.8,2.1,3,15.2-.4,11.8C143.1-4.1,127,38.7,144.8,49c5.2,3,9.6-6.7,8.5-11s-.9-3.1-2.4-2.7-5.1,3.8-6.2,2.8-2.2-6.4.6-6.6,5.1.9,8.9-3.7,6.3-2.9,5.7,1.6c-.3,2-.9,3.1-1,4.7Z" fill="#000" fill-rule="evenodd"></path><path d="M181.8,27.7a16,16,0,0,0-10.1-3c-5.5.6-10.5,4.2-10,9.9.2,2.5.5,12.9,1.4,17.2a4.1,4.1,0,0,0,2.6,3.2,3.2,3.2,0,0,0,3.8-1.6c.9-2.1-.1-4-.6-5.8-1.1-3.6-1.5-8.6-1.8-11.7-.6-6.4,9-7.2,11.3-3.5-1.6,2.5.8,4.1,3.7,1.8s1.6-5-.3-6.5Z" fill="#000" fill-rule="evenodd"></path><path d="M195,55.5c13.4-2.2,18.5-23,1.9-30.1-17.2-5.6-18.1,33.5-1.9,30.1Zm-6-16.7c1.5-16.4,12.3-8.8,13.6,1.9S186.7,57.5,189,38.8Z" fill="#000" fill-rule="evenodd"></path><path d="M214.3,34.2c-2.1,4.6-1.2,23.2,8.4,14.4,2-1.9,2.3-8.1,1.5-13.4-.2-1.2-1.2-4.9-1.5-6s.7-3.4,2.5-4a3.1,3.1,0,0,1,3.7,1.8c1,2.4.4,6.3.3,7.9-.4,4.7-1.1,10.6.6,13.7.7,1.3,1.7,1.4,1.7,2.4.2,3.5-4,5.8-5.6,3.6-.4-.6-.1-1.5-.7-2-7.9,7.1-16.6,1.6-16.5-8.6.1-2.2-.3-5.8.6-9s1-4.7,2.2-6,2.6-.5,3.1-.1.3,3.6-.3,5.3Z" fill="#000" fill-rule="evenodd"></path><path d="M249.6,50c1.4-4.8,3-12.6,2-15.5S244,28.6,241,33c-1.8,2.8-1.8,12.5.5,18.2.5,1.3-.5,3.2-2.2,3.8-6.6,2.2-1.5-16.1-5.4-21.9-.8-1.3-1.8-1.4-1.9-2.4-.4-3.3,3.6-5.5,5.3-3.4.5.6.2,1.5.9,1.9,7.3-6.7,18.2-1.7,18.9,8A40.6,40.6,0,0,1,254.5,52a10.3,10.3,0,0,1-1.7,3,2.2,2.2,0,0,1-3.1.1c-1.2-.9-.6-3.5-.1-5.1Z" fill="#000" fill-rule="evenodd"></path><path d="M278.7,28.7c.6-5.2-1.6-20.5-5.6-20.8-1.1-.1-1.4-2.8-.6-4.4s2.4-2,5.3-.8c4.7,1.9,5,19.3,5.1,24.6s-.1,11.3.7,16.1a20.3,20.3,0,0,0,1.3,4.5c.8,1.9,1.7,3.2,1.1,4.3s-4.8,3.3-6,2.1a7,7,0,0,1-1.4-4c-7,11.1-18,2.4-19.5-8.2s7.8-22.2,19.6-13.4ZM267.8,49.1c8.7,6.3,11.5-10.1,7.1-16.1s-18.8,7-7.1,16.1Z" fill="#000" fill-rule="evenodd"></path><path d="M13.2,45.3C6.4,43.1,1.5,36.5.4,29.6-2.9,10.4,17.4-6.9,37.8,2.7,38,7,36,13.2,30.5,15,57.8,32.2,34.5,67.3,6,55.8c-5.2-2.7-2.4-7.5,3.1-4.7s14.3,2.1,19.4-.7A22.7,22.7,0,0,0,36.8,43a28.5,28.5,0,0,0,1.9-3.6c.5-1,1.8-5.2.8-5.6s-.4.2-.5.5a19.2,19.2,0,0,1-3.9,7.3,19.5,19.5,0,0,1-8.4,5.8c-4.1,1.4-8.8,1.6-15.3.2a23.1,23.1,0,0,0,1.8-2.3ZM32,4.5s.1.7.2,1.8a9.1,9.1,0,0,1-3,7.5l-1.6,1.4c7.7,4.8,11.7,15.3,7.3,22.6-6.1,9.8-18,7.6-24.5.8s-5.9-16.1-1-22.9A28,28,0,0,1,32,4.5Z" fill="#97ca4f" fill-rule="evenodd"></path><path d="M8.8,26c1.5-14.6,18.3-17.4,24.5,2S6.5,43.7,8.8,26Zm13.7,9.6c13.3.5,6.9-13-1.8-16s-13.4,16,1.8,16Z" fill="#000" fill-rule="evenodd"></path></svg>

Base64

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCABlAfIDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4 Tl5ufo6erx8vP09fb3 Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3 Pn6/9oADAMBAAIRAxEAPwD3 iis3V9Yi0uEcB53 5H/AFPtUTnGnFyk9BNpK7Ld1eW9lF5txKqL2z1P0HeuavfFsjErZQhV/vycn8qwLu7nvZzNcSF3P5AegFMgt5rqURQRtI57KK8SvmNSo WlovxOeVVvRFifVtQuCTJdyn2Vto/Sqpkc8l2P1NdNZeEScPezY/6Zxf1Nblvo2n2oxHax59XG4/maUMBiKus3b13BU5Pc4KO uoseXdTLjoBIa1LXxTfwECbZOnfcMH8xXa7UVCAAFxzgV5cOgpV6dXBuPLPcJJw2Z6XY3a31lFcopVZBnaeo5xViqunW5tdNt4CMFIwCPfvVqvdp35FzbnQttQrg/FvxV0TwzO9lCr6hqCEhooWAWM jt2PsMn6VR LPjmTw9p6aRp0hTUrxCzSqeYIs4z/vHkD6E leKeHvC seKb022lWplK8ySudscfuzf05PtVjO7f47a6ZcppOnLH/dYux/PI/lXU HvjZpGoSJb6zbPpsrf8tg2 H8TwV/LHvXHTfA/wATx2  O70uWQDJjWVxn6Epg/jivPtS0y90e/ksdRtpLa6j 9HIOfYj1HuOKQz7BjkSaNZI3V43AZWU5BB7g06vnj4W PZ9A1SHRr YtpNy xNx/wCPeQngj0UnqPfPrn6HpiCiiigApGZUQsxAVRkk9hS1g NrxrDwPrdyhw6Wcm0/7RUgfqaAPKLv456n/bTSWen2raUsmFR1YSyJ65zgEjnGOK9tsb2DUdPt722bdBcRrLGfVSMivjoDAxX1D8MpWm HGiM3UQlB9FdlH6CgDrKKKKACiiigAooooAKKKKAI7i4htLeS4uJUihjUs8jthVA6kk15N4i ONrbTvb6BYfa9pI 03BKRn3VRyR9cVyfxS8dyeItVk0mwmI0m1cqdp4uJAeWPqoI4/P0x50SB1IH1oA9MX44eJxJuNnpZX 55Tj9d9d54M Len Jb2PTb 2On38nEXz7opT6A8EH2I/GvnijzHiIljcpInzK69VI5BFIZ9m0VBYzPcWFtNIMPJErsB2JAJqemIKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigArzbxr8W4PC tPpNnpv264hUGZmm8tEJGQo4JJxgnjuK9Jr50 KPg/V9O8RalrrQeZplzMHWdDnYWAGGHUc8A9OlAHp3g74qaV4rv106S3ksb9lzGkjBklx1Ct69TggcV3tfG9tdT2N3Dd2r7LiBxJG3owORX15pOoR6tpFnqMP ruYUlX6MM0AXKKKKAK99eR2FnJcSdFHA9T2Fed3VzLeXLzzNudzz7ewrc8WXpku47NT8sQ3N/vHp n86xLO0kvbuO3iHzOcZ9B3NeBmFaVWr7KOy/M5qsruyLGl6VNqlxsT5Yl /IegH Nd1Y2Fvp8HlW6bR/Ex6sfUmsjWda0nwN4eNzdMViT5Y415eZz2HqT grwzX/iz4n1m4b7LdHTLXPyw22N2P9pyMk/TA9q9LCYSNCN3rI2hT5fU k6K Urbx14rtJfMh8QX 7Of3kvmD8myK9N8GfGYXVxHp/iZYoWbCpfJ8qZ/6aD H6jj2FdpZ6Vr ppYWDxqw8 VSqDuB3NYHh3R3urlLuZCLeM5XP8bDp FS6vYz2V//AGjKovrdjk7 3oDjt6Hp7V0Wmala6jBm3O0qMNGeCv4eleXyqvif3unLsu/mY25p 8XqKKK9Q2PlX4gaq q OtZuWJKxXL26D0WM7OP  Sfxr6K8FaBB4c8J2FjEiiXylkncfxysAWP58D2Ar5v8b2L6f43123bgm9llXj F2Lj9GFfTfhnU01nwxpmox8Ce2Ryv91scj8DkfhQBq15J8brvQX0q3tZXR9cjcNCsZBdIz97f6Ke3vjHevWZVZ4nVH2MVIDgZ2n1r5Y8SeD/Eui6rNHqNnd3Tu5IvI0aRZ/8Aa3DPPseRQBzTAFSD0Ir688PXEt14b0y4nz50trE756klRmvnzwb8NNY8R6jE99ZT2WlowM0k6GNpF7qgOCSemeg/SvpNEWONURQqKAFA6ACgB1FFFABXIfFJynw21kjukY/ORR/Wuvrj/impb4a6yB/cjP5SIaAPmKvqL4Zx V8ONEX1gL/99MT/AFr5dPAzX1l4Ntza CtEgIwUsoh/46KQG3RRRTAKKKKACiiigArhvir4lbw94Oljt5Cl5fk28RBwVBHzsPoP1Irua dvjNrJ1HxqLFTmLTYhGP8AfcBm/TaPwoA4bStLu9Z1S202wi8y5uHCIvQD1J9ABkn2FfSvhP4e6L4Y09E yw3V8yjz7qVNxY99oP3V9h Oa4z4H GljtLrxJOmZJibe2yPuqD87D6nj/gJ9a9goA8i K3w8sjpUviDRrVILi2G65hhXCyR92wOAw6n1GfQV5l4I8KT L/EMNmsZNlGwe7l/hWPuM rdAPfPavqkgMCCAQeCDUVtaW1lF5VrbxQR5zsiQKM/QUATAYGB0ooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAqC9s7fULGezuo1lt50MciN0KkYNT0UAfIOt6VLoeuX2lTMWe0maPcf4gOh/EYP419C/CK8N38OrFGOWt3kh/AOSP0IrzL416cLTxvHdquFvbVXJ9XUlT gWux BNwX8M6pbk58u93j2DRr/VTSGeq0UUUxHm2oTfaNRuZc53SNg 2eK6LwjZgRTXjD5mPlp9Op/p Vcqc7jnrmu0sZRYeDWuQceVbyTE/TJrwMvj7TEOT6XZzUleVzwL4m JpPEfjC4RHLWVizW9uo5BIOHb6lh QFd54J Dth/Z0N/wCJo3nuZVDrZhyixA9A2CCW9R0HTmvNfh9p66x490eC4G9PP8 QH LYC/P4gV9UV7x0nB6r8IfCWoQMtvZvYT4wstvK3H1UkqfyrxXxh4F1XwddBbtRPZyHEV3Gp2N7Efwt7fkTX1NVTU9Ms9Z06fT7 BZ7aZdro38x6EdQaYHlPwe8aNexN4W1STzGRCbN5DncgHMZ9cDke2R2rp9RtZ9A1VZbZiqN80Z9u6n1rxDXtKv/AIf NPKhlJmtJFuLSZh/rE/hJ/Iqfoa hrye38R EYNUtuUeJbmP2GOR/MfUVx42j7SnzL4o6oipG6ua2l6lFqdmJk Vhw6f3TV2vP8AQtQNhqSEn91IQkg7YPQ/hXoFPBYj29O73W4U5cyPEvjh4aZLq18SW8eY3UW90R2YfcY/XJX8Fo C/jGO2d/DF9IFWVzJZMx43Hlo/wAcZHvn2r2LVNNtdY0y5069jEltcIUdT6eo9x1B9RXyz4n8OX/g/wAQyWE7ODG3mW1wuV8xM/K4PY8c hFdRZ9Y0V5d8O/inBrEcWka9KkOpDCRXDHCXP17K/t0Pb0r1GmAUUUUAeM/Fzx1rOl67FomlXUllGkCyyyx8PIWJwAewAHbrn2qn8M/iRrM/iK20TV7l723uyUilkx5kTgEjnuDjHNbvxa8A6hr89vrWjxCe5ii8me3HDOoOVZc8ZGWyO R6Vznwx H2tx KrbV9VsZbG1siXUTDa0jkEAAdcDOc 2KQHvFcp8S4zL8OdbA7QBvwDA/0rq6w/GkH2nwRrkIGS9jMB9dhpgfJjhijBQSxHAHc19k2cAtbKC3HSKNUGPYYr5I8P2/2zxHpVvjPm3cSkeo3jNfXtABRRRQAUU13SNGd2CooyzMcAD1NcdcfFbwZbXn2Z9YDsDgvFBJIg/4EqkH8KAOzoqlpmr6drNt9p0y gu4c4LQuGwfQ h tXaAEZgilmOFAyT6V8hazfS6xr9/e4LyXdy7qPXcx2j8sCvqbxZetp3g/WrxPvw2Mzp/vBDj9cV8zeC7Aah410O0/hN5GzD1VDvI/JTQB9PeHNKTQ/DmnaYgH jQIjEd2x8x/E5NadFFABRRWbrmu6d4c0uTUdTuBDAnHqznsqjufagDSorzrwn8WrLxR4l/sg6ZLZiUMbaV5Q5kIGSGUD5TjJ4J6V6FLLHBC8s0ixxoCzu5wFA6kk9BQA ivLvEPxs0fTpGg0a0fVJFJBlL VED7EglvwGD61yv/C9Ne80t/Zmn7Oy/P/PNAHvdFePaR8dreSYR6zo726HrNbS Zj6oQD RNepaRrem69YreaXeRXUB4LIeVPow6qfY80AX6KjnnhtbeS4uJUihjUs8jnCqB1JNeTa/8crW2uWg0LTftiKcG5uHMan/AHVxkj3OKAPXaK8Ps/jxfrOv27Q7eSEn5vImKsB7ZBB nH1r1Lw14x0XxZbmTTLoGVRmS3k WSP6r6e4yKAN6iiigAooooAKK5jxr42sfBemxz3EZuLqclbe2VtpcjqSecKOMnB6jg1zfgr4uQeJtZTSr/ThY3E2fIdJvMRyBnacgYOBx1z7UAel0VDd3ltYWsl1dzxwQRjLySsFVR7k1m6N4q0LxDJLFpWpwXUkQy6IfmA6Zwece9AGxRWPrfivQvDoH9q6nBbORuEZO5yPUKMk/lXLj4zeDi DdXYX /8AZHx WM/pQB6BRWXo3iPR/EMJl0nUILoLyyo3zL9VPI/EVqUAFFFVNR1Ox0iye81G7itbdOskrYH09z7UAW6K8zvvjf4at5SlrbX94o/jSMID9NxB/Srmk/GPwrqUixXEtxp8jcD7TH8v4suQPxxQBz3x5tVNlot5j5llkhz9VB/9lpvwFk/0fXIv9uFv0YVofG9orrwRpl1BKkkf9oIVdGDBlMUnQjr2rG Arf6Zrif9M4T r0Ae2UUUUAea38P2fULiLGNsjAfTPFdTp8Q1PwZPZA/M8MsB/EED9CKoeLLExXaXij5JQFY/7Q/ t/Ko/C oi2vGtZGxHP8AdJ7N/wDX/wAK8LDv6vi3GWz0/wAjmj7s7Hg3grVV8O NdMvbn5I4Z/Lnz/ArZRifpnP4V9WAhgCCCDyCO9fPPxY8FTaHrkus2kJOmX0hdyo4hlPUH2Y5IPqSPTL/AAX8XL7w9aRabqlu1/YRgLE6tiWJfTnhgOwOMete4dJ9CUVwcHxi8FypmXULiBv7r2crH/x1SKiu/jP4QgjZree7u2A4WO1dM/i4WmBzXx5tYQui3gAE5MsRPcrwf0P866H4P3JvPhv5DnIgmmhGfQ/N/wCzV43408ZXnjPWFvLiMQW8K7Le3Dbgg7knuT3PsK9j Gts h/CtbmZSj3RkuFB77jtT8wFP41E2lFt7A9EU8cYr0bSpzc6VbTE5Zoxk 44NcKLIDRmvWJDGYRoOxGCT/n2rsfDef7Bts/7f/oRrxssUo1Wn1V/xOejozVrnPGfg y8Y6K1ncYjuY8tbXAGTE39QehH9QK6OivcOg Qtb0S/wDD qS6dqduYbiP8VdezKe4PrXoXgT4uXOkCLTfELyXVgBtS65aWEejd3X9R71674p8I6X4u002uoRYkXJhuEA8yI oPp6joa bvFXhHVPCGpfZdQj3ROT5Fyg SYe3ofUHke45pDPqm0u7e/tY7q0njnt5V3JJG25WHsamr5g8DePb/wAG3wXL3GlyN /tSenqyejfoe/Yj6Rs9Ws9R0dNVspRPaSRmRHTuB1GPXjGPWmIyPFvjjSPB1sjX7vJcygmK2hALuB39APc1S8F/EbTPGc89rDbzWl3CnmGKUghlzjKkdccZ6da fNfvNV16 n8Q39vcCK7lKpK6EIMdI1J44Hb612PwQgZ/HFxMB8sdi4P4umP5UgPavEvirSvCdgl3qszIsjbIkRCzSNjOAB/M8V5N4g N01/a3NnpmjRxwzI0ZlupNzEEYPyrwPzNdn8YdCfV/BT3UKlp9OkFwFHUp91/wAgd3/Aa8g8BeBn8b3t3EL9LSK1RWc7N7NuzgAZH93rTA5a0uZ7G6hubWVop4WDxyL1Vh0IrZl8b Kps7/EWpjnPyXLJ/IisvTYVk1aygu0IRriNJkzzgsAw4/GvqC08A ErLBh8PacWHRpYFkYfi2TSGfM58Sa9MxU6/q0hPUG/lYn/wAerpfBB8Z3PirT5tPfVZVEyGZ53kMJjz8wctxjGff05r6OhsLO3ULDaQRgdAkYGPyFZ/irVv7B8K6lqa4328DNHnpv6L pFMR418W/HUuqapN4e0 Yrp9qxS5KN/rpQeVP yp4x3OfQV55Z6PqmoQvNY6Ze3USfeeC3eRV pANTaDpcviHxHY6b5jb7ycK8h64PLN9cZNfWOn6fa6Vp8FjZQpDbQoERFGAAP6 9IZ8m6Lrep G9UW 024e3uIzhlOdrj 669x7fyNfUHhPxJbeK/D1vqtuuwvlZYs5Mcg 8v8AnsRXk/xx0Sys9R07VrdEjuLzek6qMbyuMOffnGfp6Vb At3IW1yyz 6XypgPRjuU/oo/KmI774lOY/h1rZHe32/mwH9a8P8AhSgf4j6Xn HzCP8Av21e5fEeMyfDvXQO1qz/AJEH leD/DGcW/xG0ck4DyPH aMKAPqCs7UfEGj6RKsWo6pZ2sjDcqTTKpI9cE9K0a YPigJ/wDhY sfaCxO9PL3f3PLXGPbrQB7jqvxN8JaXatKdXhunHCw2p8x2P4cD6kgV4J4z8ZX/jLVRc3I8m1i4t7VWysY9T6se5/CoPDfg7W/FcxXS7MtEhw9xIdkSe27ufYZNUtb0a78P6zc6XfKouLdgGKnKsCAQQfQgikM6T4T2bXnxH01l6WyyTt9AhX bCuj MvjCe61ZvDNpIUtbba13tOPNkIDBT7AEHHqfamfAlYT4m1R2A88WYCH/ZLjd oSuQ IYK/EPXQTk/ac/wDjooAyNJ0fUNd1BLHTLWS5uH5CJ2HqSeAPc16HafAzXpoA9zqVhbyH/lmA0mPx4rrPgdp1tD4Vu9QVFNzcXLRu/cKgGB9OSfxr1CmI XfFPw81/wAJxfabyGOayzj7TbtuVT23AgFc/l71T8Ga/d HPFNleWsjhHlWKeMHiWNjggjv1yPcV9E PdBvvEvg 80vT50iuJSjDzCQrhWDFSR0BxXD C/hA2j6jFq/iK5gka2PmRW0JLIGHIZmIGcdQMdfypAZ3xp8XSyXieGLSQrDGFlvCp  x5VD7AYY/UelcT4H8E3njTVHhjk z2cADXFwV3bc9FA7sefpjPscLVtTfWdYvNTkzuu5mmwewJ4H4DA/Cvor4T6QmleALGTYFmvc3Uhxydx X/x0LQM5jVvgVYtZMdI1S4S6UZC3QVkc hIAK/Xn6V5FNDq3hbXTG/n2GpWj9VbDKeoII6g/kRX13XmXxk8KR6n4fOu28f8Apunj94R1khzzn/d 8Px9aYjY HPjtPGOlNHchI9VtQBcRrwHHZ19j3HY/hWz4w8Qp4W8L3urFA8kShYkPRpGOFB9snJ9ga a/BuvSeG/Fmn6ijERrII5wD96NuGz646/UCvUvjtqezS9J0xG4nlad8HqEGB r/pQBz3gDx74o1Hx/YWt5qUl3Beu6SwuBtACM2VAHy4xnjtXv9eC/A7RxdeI73VZF WyhEcf  /f8FB/76r3qgDxb48adJ5mjaoCTHiS2Yeh4Zf5N Qry7w27xeK9FePO9dQtyMHqfNXivoP4taet/8ADy/YgF7VkuEOOhDYP/jpYfjXgvgy3 1eONCi/wCn F/  XDf0pDPT/jw2o/ZdISNZf7M3SNMyg7PM XZu/DdjPqa8l0TXL/w7qQ1DTZhFciNowxXIwwwePyP1Ar6y1HT7bVdOuLC8iWW3uEMbow6g/1r5G1KxfTNWvdPkJL2txJASe xiufxxmgRa07TNZ8V6y0NpHPf38xLyO7ZPuzMeg9ya7Zvgh4nFr5gudNabGTEJW/LO3FehfB3Q4tM8ExX5QfadRczO OdgOEX6YGfqxr0GmB8jzW t EdcCyLcabqUGCCDg49QRwyn8Qa gvhx47XxjpTx3QSPVbUATovAcHo6j0Pcdj9RVL4xaDbal4Ml1IoBd6cRIkgHJQkBlPtyD9QK8e HOrvo3jzS5lbEdxKLWUeqyEL jbT FID6X1fVbXRNJutTvX2W9tGXcjqfQD3J4H1r5c8WeK9Q8Xau97euyxKSLe2DfJCvoB6 p7/AJCvTfjrrbpBpuhRNhJS1zPz1CnCD6Z3H/gIrkvhd4Jj8V6zJdX6FtLsiDIh6TOeifTufbA70AYGh CvEfiOLztL0uWWD/ns5EaH6FiAfwzUWveE9c8MtGNX0 S3WQ4STcHRj6blJGfbrX1jFFHBEkUMaxxooVEQYCgdAAOgqlrej2ev6Pc6ZfRCSCddpyOVPZh6EHkUwPkv 0bz zP7NNzKbHzROIC2UDgEbgOxwx6da9U Av8AyFNc/wCuMP8A6E9eU31lNp1/cWNwAJreVonx0ypwf5V6r8BT/wATXXB/0wh/9CekM9xooopiIL20jvrSS3lHyuOvcHsRXnt9ZTafdNBMMMOVYdGHqK9Jqrf6fb6jB5Vwmf7rDqp9jXFjMIq6uviRnUhzGDp2rWmr2T6VrEccqyr5ZEq5SUHsc96888VfBKZZXuvDM6vGcn7HcNgr7K/f6N ddhqXh27sFeVSstuvJcHBA9x/hTbDxBfWICbxNEP4JOcfQ1y0sbOj 7xC ZEajjpI8H1Dwn4i0p9l7ol9EfUQl1/76XI/WqsGiatcyCODSr Rz0CWzn lfTkPi 2YfvraVD/skMP6U6TxfZqv7u3ndvfAH867PruHtfmNPaR7nk/g74O6heXUd54lj yWSHcbUsDJL7HBwq/r9Otekapdf2tdwaXpyL9njIC7BheBjI9FAqObUtU1 Q21tHsiP3lTpj/aatRIbXwvpzSsRLdyDAP94 g9BXNVrfWE1HSC3ffyREpc/oZXiF4rZbbTID8lsuX92P8AnP411WlQG20q2iIwVjGR7nk/zrjNJtZNW1gNKSw3ebKx789Px6V39PALnnKtayei9Ap6tyCiqWqaxp2iWn2rU72G0hzgPK2Mn0HqfYVDo3iLR/EMLS6TqEN0qHDhD8y/UHkV6ZsadZ taJYeIdKm07UoFmt5R07qezKexHY1oUUAfJvizw1c E/EM l3BLquHhmxgSxno38wfcGux D3i99J1waDdSH7DftiHceI5u2PZun1xXQ/Hm1h w6NeYHniZ4s9ypXP8wPzrxWG5eyuIruPh4HWVfqpyP1FIZ9D/GeJD8PXO0ZjuoSvsc4/kTXMfAWzJn129I4Cwwof  y3/stdV8YAZfhncS k0DH8XUf1rJ BAH/AAjeqEdftvP/AHwtMR6pLGk0TxSKHjdSrKRkEHqK8L8E27 B/jHcaDKWFvcq8ETN/EpG M/kNv1Jr3avKfjHpM1oNM8YWCD7Xp0qJKR3TdlCfYNx/wADoA8k8TxDRfHOqLjC21 8g47bt4/Q19Y18x/FJIZvGs1/bndBqVrBdIfUMgX/ANlr6G8L6iureFtLv1OfOtY2J98DP65oA1q8  M07RfDyaNek1zCjfQNu/8AZRXoNeffGeFpfh7LIoJENzC7ewLbf5sKAPKfhJCJfiTprH/lkkz/APkNh/7NX0TrGs2Gg6bLqGpXKQW0Y5ZupPYAdST6Cvlfw34huvC sLqllHDJcJG6IJgSo3DGSAQT dLq ua34u1RHvp5725Y4hgjUkLnsiDp/OkMueN/F1x4x19r50MVtEvl20JP3EznJ/2ieT A7V6v8EdBmsPD93q1whQ38gEIPUxJnDfiS35Z71z/AIL Dd1cyx33idfIth8y2Ktl5P8AfI 6PYc/SrPxc8byWkg8KaPIII44wLt4flwCPliGOgxgnHqB60Aes6hDb63ot/ZJJHNHcQyW77GBHzKQQfzr5P0y7l0XXLO8YMstldJI4HXKOCR hFej/AhbseI9T8okWAtP3qj7plLrsOPXaJK534oaE2h Or7Cbbe9P2qEjod33v8Ax7d YoA l4J47q3iuIWDxSoHRh0KkZBrA1vwJ4d8RatDqWqWAnuYkCZ8xlDgHIDAH5sZPWuT Dni PU9EGgXUmL2wX9zu/5aQ54x7r0 mK9PpiIbW1t7K2jtrSCOCCMbUiiQKqj0AHSvAPjdHGnjuFkA3PYRs/13yD QFfQpOBk18r PtdTxF401C/hcPbBhDAw6FEGM/icn8aANn4OXgtPiHChbAuraWDHqeH/9krN J6eX8TNdX/prEfzhjP8AWs3whff2d4y0a7zgJeRhj/ssdp/Qmt/4vQ V8SL9sf66KGT/AMcC/wDstIZ33wJud/hzVLYnmK8DAegZB/VTXq1eF/Ai/EWuatYFuZ7dJlH 4xB/9DFe6UxBWb4hkaHw3qki/eW0lI/74NaVVNVtzd6Re2yjLTQPGB7lSKAPjvpF9Fr698PwC18N6XABgR2kS4 iivkEfNAPdf6V9gaFcJd HtNuIzlJLWNgR7qKQGhUN3bRXtnPazKGinjaN1PQqRgj9amqOeeO2t5J5nCRRIXdj0AAyTTA O722azu7m0YktBI8RPupI/pXffFi7e6uvDbOTubR4pSPQsTn VcXIr694ikFurF9RvG8tcc5kfj/wBCrv8A42W62uv6PAg SPThGvHYMRSGdP8AAdAPD rv3N4F/ARr/ia9YryD4DXSnT9atM/Os0cuPZlI/wDZa9fpiOd8eoH H3iAEA40 ZvyQn leA/DGLzfiPo3 zI7flG1e8fEa5W2 HmuM5A32rRDPcv8o/nXhnwrlEXxH0rOPmMijPqY2oA m6 W/iTEIfiLraqMAzB/zRSf1zX1JXzD8Uf Sj6v/vR/ i1oA998CII/h/4eA76dAx pQE/zroa5v4fSib4e6Aw/hso4/wDvkbf6V0lAHHfFOdYPhxq 4/fVIx9S6ivnXw4u/wAUaOg/ivoB/wCRFr2r4535g8KWNirYN1eAsPVEVj/6EUryn4eWZvviDokQXIS5Ex9ggL5/NRSGbvxpdm IG1jwtlEFHtl69P8Ag/aRW3w6spUA33EsskhHc7yo/RQK4X466Y0Wt6XqiodlxA0DN6MhyB Ic/ka6P4Ia5FdeGrjRWbE9jKXVT3jkJbI/wCBbv09aYj1KiiigD5d JcC2/xI1tFGFaZH/Fo0Y/qTXVfAmUL4k1WHPL2itj/dfH/s1cd4/vV1Dx/rdwjZU3Plgj/YUJ/7LWx8Hb5bL4iW6M2PtVtLbj3PD/8AslIZ9I0UUUxBUaXEMrFY5o3YdlYE1T1yCe40ieO3yXIBwOrDPIrz0ZRgRlWB6jgg1wYvGvDzUeW6M51OV7Houp6amp24hkmljUHOEIwT71hv4O5/d3vH 1H/APXrJt/EGp24AFyXUdpBu/XrV1fF16B80FufwI/rXLPE4Os apF3/rsQ5wlqyZfB0mfmvVx7R/8A16vW3hOxiYNM8sxHYnaP0/xrKfxdfH7sNuv4E/1qjda7qN2Cr3JRT/DGNo/xqPa4GGsY3/rzFzU1sjqb3V7DRojBAiGUdIoxgA /p/OuQnnu9Wvgz5kmc7VVeg9h6CksdNutRk2W0eRnlzwq/U122laNBpceR887D5pCP0HoKIqtjWr 7Bf18w96p6DtH0xNLsxHwZX aRh3Pp9BWhRRXtQhGEVGOyN0rKyPlz4i IZvEXjO kdybe0le2tkzwqqcEj/AHiM/l6Vg6Xqt7oupQ6hp1w9vdRH5XXuO4I7g9xXZX3w 1Sf4oS6Q9rMLS5vGnFwqnb9nZixO7pkA7frW/43 Ds9vI9/4XjM0B5exL/OnuhP3h7E59M9KZRp H/jjZSwpF4gsZYJwOZ7Vd8be 0ncP1rbu/jP4St4C8Ml5dPjIjjtyCfxbA/Wvnm8tbjTpvJvreW1l/uToUP5GoUIkkWOP53boq8k/QUAdP418aXvjTVUubhBBawArb26nOwHqSe7HA59h Od4a0abxB4jsNLhQsZ5lEn zGDl2P0XNauh/DnxRr0qiDTJLaE9Z7wGJB Y3H8Aa908DeALDwXau6yfadRmXE1yy44/uqOy/z/LABP8QtP 3/AA91m2RclLYyqPdMOP8A0GvHPhR41tPC2qXNpqchjsL4KfNxkRSLnBPsQcE w96 inVXRkYAqwwQe4r5e8d C7zwfrEwMTHSpHLW1wB8oUnhGPZh09 opiO8 KvxEsbvSE0bQNRWczsGuZ7Z8qEHIQMOpJxnHYY713 hWX/CQfDLTbPVC0n2zS4kmZuWO6Mc/Xv9a cvC3hq98W6zFp9jGzIWHnzAfLCnck/TOB3NfWFvBHbW0VvEu2OJAiD0AGBQB8iatbX1hqMum6hIzT2JNtgkkKFJwF9BzkfWvcvglrAvfCU2mO372wnIUf9M3 YH/vrcPwrC M3gy4a7XxNp8DSRsgS9VBkrtHyyY9McE9sDtmuU EWsvp3j 0gjYvFfo1vIq89tyt BXr6E0hn0rWP4r0g694U1PTFx5lxAwjz/fHK/qBWxRTEfGbq6MyOpWRSQynqCOoNfUfgLRdE07wtp1zpNtCDc20byXAUGSRiozubr1zx2rz34n/DO6e/n1/QbczJMS93axjLhz1dR3B6kdc88548qttc1TSopbS11S7s03HzIY52jAbvkZ4NIZ9F PPiFY EbJ4IHjn1eRf3VuOQmf4n9B7dT tfOtpa6l4j1pIIRJeajeSkkseXY8liew6kntWj4f8ABniDxTODp9jI0Uh3Ndz5SLnuWPX8MmvoLwT4C07wZaExn7RqEoxNdMuCR/dUdl9u/egRa8F E7bwfoEenxMJZ2PmXE MeY5/oOg9hWD8WvCb IvDQvbSPffadulRQOXjI dR78Aj/dx3r0CimB8dWF/c6bfQX1lO0NzCweORDyD/AJ7d6908L/GfSL2zWLxD/oF4gAaRI2aKT3GMlfofzNY/xE E873U2s G4RIJCXnsV4IY9Wj9c9Sv5eleOzxvazvBcI0MyHDxyDayn3B5FIZ7B8QPi3bX2nS6R4beRlmG2e8KlPlPVUB5ye5I6Hjnpy3wt8KjxB4lF3dRg6Zp2Jpiw V2/hT p9h71keFvBOteLbmNbG2aO0J e8lUiJR6g/xH2H6da irHw3b G/Bs kaRGzMtvJhmxullK/ePuTj9KBHyrJOxke5iARtxkQdlOcivRPjMgk8V2F8o W60 Nh DN/jXDJoOsySC1j0i/ac/II/s7g56YPHFe1fE/wRqGqeGtHuNPga5vNMh8mWOPlnQquSB3IK9OvJoGeZ/DXVl0fx/pcznEc8n2Vz/10 Uf Pba oq XPBvhHWdY8UWKR2FzFDBcxyXE0sTIsaqwJ5I 9xgD1r6jpiCiiigD5U8daI3h/xnqVjs2xGUzQehjf5hj6ZI/CvUfhH47sn0eLw7qVwkF1bZW1eRsLLH1Cgn IZxj0xjvXQfErwGPGGmx3FkUTVbUHyixwJV7oT29Qex pr5zv7G60y8kstQtpLa5Th4pVwR/iPfpSGfYNxcwWkDz3M0cMKDLPIwVQPcmvEvib8T4NVtJdB0GTfaycXV2BgSD 4nt6nv2ryWCBrqeO3t4mmlP3Io13N AFeneDvg9qWpzR3fiFXsbEEH7Pn99KPQ/wBwfr9OtAif4M EHvdUPiS7jItbUlLXP/LSXkFvooyPqfatf47aS8llpWrohKwO1vKR2DYKn81I/EV61aWlvYWkNpaQpDbwoEjjQYCqOgFV9Z0i013SLnTL6Pfb3CbWHcdwR7ggEe4pgfOPwz8UReFvFqTXb7LG6QwXDnonOVY/Qjn2Jr6YM8K2/wBoaWMQ7d/mFht2 uemK WfFvgrVvB966XkTSWRb91eIv7tx2yf4W9j Ga55rlzbCBp3Nup3CMudgPrjpSGeo/Fb4hWevxJoejyGWzjkElxcD7srDoq qg859QMV5zo2pS6NrdjqcIJe1nSXb/eAPK/iMj8a6Xwh8Nta8UzRytC9lppILXUy43D/YU/ePv0965zUNJurHxDcaKYZXvIp2hWIId74PBC9eRgj2NAH1fo2s2Ov6VBqWnTrNbzDII6qe6kdiDwRXzj8UlK/EjV892jP/kNa9w G3hy58MeDbezvQFu5XaeZAc7C3RfqABn3zXlvxp0C7t/Fa6xHA72d3CitIqkhZF Ug mRtx68 lMR3XwX1QX3gb7IT 8sbh4iP8AZPzqf/HiPwr0WvJ/gp4b1TSrbUtTv4ZbaK8EaQwyAqzBdx3kHoPmwPx9q9YoA f/AI36n9r8XWunq2UsrYEj0dzk/oFqT4HaU1z4nvdUYfu7S28tf99yP/ZVb865b4ipcL8RtZW4jcTS3AMalTl1wAmPXgADFe6fDTwvL4W8IxQ3SbL65c3Fwv8AdJ4C/goGffNIC14 8Mf8JX4TubGMD7Wn762J/wCei9B9CMj8a bNG1jUfC ux31oTDd2zlHjccHBwyMPTjB ntX11XmPxG Fw8QyvrGi7ItTI/fQscJcY757Nj8D3x1pgb3hX4kaD4ntkH2mOzv8fvLWdwpB77SeGH0/ECo/HXxA07wxpEy291FPqsqbbeBGDFSf42x0A6 /Svm7UtPu9JuTa6nay2k3/POdNpP0z1 oq94f8L6v4luFg0ixeVScGbG2JPdm6f19qQGUSzZZizEn5mJyST6n161Y0  m0vUrW/tv9fbSrMmehKnOK9w1X4VR2fwzn0rTh9p1VZFvGk6GaRQQVHoNrMAPf3NeV6X8P/FOrXi28OjXMOWw0tyhiRPck/0yaBn0fY KdHvtPtrtL2JFniWUKzYIDAHB9 aK462 DGiR2kKT3l48yoodkfaGbHJA7DPaimI9Kqld6RY3xLT26lz/ABrw35iiiplCM1aSuJpPcxbrwlAoLw3Uij0dQ3 FYVxppgk2edu5xnbj tFFeTjMLSgrxVjGpCK2L1l4d 1gE3W0e0f/ANetu28L6fAQZA87f7Z4/IUUV04bCUeVS5dSoQja9jZRFjQIihVHAAGAKdRRXeahRRRQAUUUUANkjSVCkiK6nswyKZDbW9sCIIIogeuxAv8AKiigCWiiigApGVXUqwBUjBBHBoooAbFFHCmyKNI19FUAU iigAqKK2ghZmihjjZvvFEAJ tFFAEtFFFABUT20Erh5II3cdGZATRRQBLRRRQAUUUUAFQzWltcMGnt4pSOhdA2PzoooAmAAAAGAO1FFFABRRRQAUUUUAFFFFABUF1ZWl6gS7toZ1HQSxhgPzoooALaztbNNlrbQwKe0SBR lT0UUAFFFFACMiuhR1DKwwQRkEVQi0LSIJvOi0uySTOd6wKD eKKKANCk2ru3bRuxjOOcUUUALRRRQAUUUUARvbwySpK8MbSJ9x2UEr9D2qSiigAooooAbJGkq7ZEV19GGRSqoVQqgADoBRRQAtFFFABRRRQB//2Q==" />

Pure CSS : https://jsfiddle.net/L3k5n479/ (Due to only 30K letter limit in the question. i am unable to add here this 3rd code)

I tried making like siteground but writting own CSS in too hard. i googled and found some tool but it breaking the pixel or image colour. But these logo are perfect as image without any effect in clarity

I have 4 questions

  1. How to make like this. is there any free tool avaiable for better quality
  2. Is SVG is a CSS or it a different code?
  3. What is the benefit of using codes instead of images?
  4. what is best approach Pure CSS, SVG, Base64 or something other?

CodePudding user response:

  1. Depends if you're asking about SVGs or Base64s really. You can find plenty of tools online to convert an image file to Base64 code but for an SVG you'll need to make it from scratch, it's not exactly an image, more of a set of instructions to draw a bunch of vectors (which will look good at any size, since they are not made of pixels like a normal image).
  2. SVG is Scaled Vector Graphics. A set of instructions to draw shapes basically.
  3. I have used Base64 image encoding before for a few things at work, where I want to be able to send one .html file and have everything in there, rather than needing to send a whole load of files. It's just another tool really, sometimes it's the right tool for the job.
  4. Really, depends on what you're doing. Best approach is not universal.

CodePudding user response:

so basically you are asking, Base64 vs SVG vs Image vs CssImage

Well first of all, Base64 and CssImage are not that different from a normal image, the only difference is a normally images data is stored in a .png or .jpeg file whiles the base64 and CssImage are a bunch of text in your html, all in all they are the same thing, just a bunch of pixel data, There are two main categories of images.

  • Pixel images ( Base64, Images, CssImages )
  • Vector images ( SVG )

Just so you know, there is HtmlSVG where you see the svg codes directly in the html file. ( check this website for a snippet https://www.w3schools.com/graphics/svg_inhtml.asp )

Vector images are mathematically defined, hence they generally are( 90% of the time ) very small in size hence your websites load faster and consume less data, and they produce sharp images, so where ever you can use an svg, use it. SVG's are best used for logos and extremely simple images, so to answer your questions :

  1. Yes there are many tools you can use to make svgs, you can use Inkscape (i personally use inkscape) which is free, or you can use Adobe Illustrator, this site has a list of Vector image tools https://windowsreport.com/vector-graphics-software/#:~:text=Adobe Illustrator Adobe Illustrator is the most popular,it offers a wide range of advanced features.

  2. Svg is its own thing, it is not a part of css, but it works with css, people use svg in other things appart from web developments, svgs can be used to define the tool path for a 3d printer,so svg is a big thing on its own.

  3. if you are using CssImage or Base64 codes, the only advantage is that everything comes in one big html file, but note that this can cause your webpages to load slowly, because the html file itself is big, you have an entire image in there, its advantageous to separate the images from the html codes in big projects, for small projects you can go ahead. SVG is a different beast, and has huge advantages when used in the proper areas.

  4. Best approach, i will say use SVG where ever you can, and if you have to use an image, dont use css or embedded base64 images, note that I am speaking from a point of view where your project is going to expand over time and maybe your website serves over 10000 users.

  • Using an image file is straightforward, any new developer you hire can easily read your code and understand what is going on.
  • Base64 and Cssimage require a lot of text, that means if i am scrolling through your html to make changes to your website, i have scroll through all that text, its more convenient to put it in a separate file .... like an image file.
  • That is not the purpose of css and html attributes, css is supposed to style your html not define images, hence css was created and optimized for styling html not defining images, same for html tags, they define the structure of your webpages, they are not meant for defining your images, so for the sake of using them for what they were built for, i will suggest you use normal image files and SVG files as opposed to embedding them into the HTML and CSS files.
  • Related