0

I have this image which I transformed into base64. The issue is the string that it gave me is so huge, I'm not able to see any other lines of codes. I inputted the given string in the source tag and it works the image. How do I shorten the base64 data of the image in order to see other lines of code?.

[an example of the string (couldn't fit the whole screenshot as it's so big)]

enter image description here

Was expecting the base64 string to be short in order to put it in the tag.

burnsi
  • 6,194
  • 13
  • 17
  • 27
Alchemy
  • 1
  • 3
  • 1
    before saying anything maybe it's important to put into perspective what you are actually asking for. A base64 encoded string is the whole picture binary data converted to string using a narrow space to represent its bytes content. You are asking how to make a picture with a size of 50Kb to weight only few bytes. You can't of course. So can you be more specific? – Diego D Jan 16 '23 at 13:01
  • if you actually want to do that, since you can't make that string shorter, you can only delegate to js the responsability to set the src attribute of the given img element so that such string will be embedded in a separate file you'll be linking as an asset – Diego D Jan 16 '23 at 13:02
  • @DiegoD I'm not asking to reduce the size of an image. I want to reduce the lines of the converted image which i got from a website. The issue is the string is very huge and i cannot see other lines of HTML code. – Alchemy Jan 16 '23 at 13:05
  • 1
    Could you describe why you want to do this, that might help us help you. As it stands your question has the answer 'you can't' as outlined by @DiegoD [unless you are prepared to cut down the definition of the image, for example]. – A Haworth Jan 16 '23 at 13:07
  • @Alchemy It was an analogy.. I'll say again: asking to shorten that string is like asking to reduce the size of image. You can't. I tried to offer an hand saying that the MOST you can do is using js to set the src attr of so that the string will be in a js file instead – Diego D Jan 16 '23 at 13:07
  • @DiegoD also if there isn't a solution to this. I'm trying create an email signature using html css. The problem is when i copy and paste the html result in the email signature setting, the images are not showing up and the font is also broken. Is there a way to include images and fonts in the email signature settings without it being broken? – Alchemy Jan 16 '23 at 13:09
  • 1
    I'm not quite understanding what you require. When you say you can't see other HTML lines, what are you using? Is it your browser's dev tools inspect facility or is it some editor or...? – A Haworth Jan 16 '23 at 13:12
  • @AHaworth oh the string of data which i got from base64 website after transforming the image, i put that in the source and it basically covers up the whole VScode editor. I can't see other lines of code in vscode. :p – Alchemy Jan 16 '23 at 13:14
  • 1
    Ah, thanks. So the problem is being able to see stuff below that string when you are in VScode editor, not a worry about whether it is working e.g. as a signature? – A Haworth Jan 16 '23 at 13:15
  • Yes! Exactly, basically I have multiple images which I also transformed those too and when I put those image sources, so if there are multiple of them, covers up the whole damn editor ;( – Alchemy Jan 16 '23 at 13:19
  • I'm not sure if you solved your problem somehow. Anyway now that I finally got that you just needed the text to be hidden in your vscode editor, maybe it could be enough to just fold the container div. It's not very straightforward and requires you to do it manually but once the div will be folded, its content will be collapsed and you won't have problems navigating the html document. https://stackoverflow.com/questions/49625557/how-do-i-collapse-an-arbitrary-selection-of-code-in-visual-studio-code-for-windo and https://stackoverflow.com/questions/66674742/wrap-off-just-some-markdown-blocks – Diego D Jan 16 '23 at 14:07
  • Is it possible that all you're asking is how to disable word-wrap in Visual Studio Code? There's a toggle at "View/ Word Wrap", that also displays the keyboard short-cut. – Álvaro González Jan 16 '23 at 15:20
  • If you don't mind [compressing the image](https://en.wikipedia.org/wiki/Image_compression), you could compress the image :P – starball Jan 16 '23 at 21:23

0 Answers0