Image to base64 converter using javascript?

I can pass the path of the image and wants to convert it into a base64 so i will pass it as image src.
Is there is any plugin or js/jquery code for that?

should i install any file to use this api?

I am not gone upload a file so it is noot able to convert my image since i am just passing the imaage path
like this
for (var i = 1; i <= 13; i++) {
var path = ‘img/image (’ + i + ‘).jpg’;
}
in this way i am loading images so i will have only the image path

If the image is on the server, why not set the image source to that path directly? OTOH, if the image is supposed to be on the file system of the user, the only way to access those files is via direct user interaction, i.e. a file input (which doesn’t require you to upload the file BTW).

Anyway, here’s a possible implementation using an XMLHttpRequest:

const img = document.getElementById('my-image')
const xhr = new XMLHttpRequest()
const reader = new FileReader()

// When the image is received, have the file
// reader convert it to base64
xhr.addEventListener('load', () => {
  reader.readAsDataURL(xhr.response)
})

// When the conversion is finished, set the image 
// source to the data URL
reader.addEventListener('load', () => {
  img.src = reader.result
})

// Open and send the request. Note that we have to
// set the response type to "blob" for the file reader
xhr.open('GET', './image.jpg')
xhr.responseType = 'blob'
xhr.send()

But again, I don’t quite see the point… ^^

1 Like

My images in the site loading very slow so i want to speed it up that is why i am converting it into base64.

Isn’t a base64 encoded file quite a bit larger? Anyway if at all you’d have to do the conversion on the server side – if you want to convert the image in the browser, you’ll obviously still have to load the regular image files first.

However, if you just create those img elements with JS (or actually just set their src attributes) you’ll already speed up the initial page load – you might call it some very basic lazy loading I suppose. :-)

1 Like

Yes i am create the image tag and passing the src value. I think i have optmize my images and reupload to test the load time because no other option left for me?
Is there any way to make my website load faster then now?

But i have to achive this by using only javascript.

Have you run your site through https://gtmetrix.com to see what the problems are?

Thanks for the link

1 Like

That would usually be the very first thing you would try it improve your load time with images. Make sure the images are appropriately sized (in pixel dimensions) and use an appropriate compression method and bit depth for the image type.

2 Likes

Yeah exactly, excuse me all for misunderstanding this post, I initially thought @phani was trying to upload images so I deleted my previous feedback. As @SamA74 said, image optimisation is very important for speed. Photoshop and the free option Gimp can help you optimise. Ideal settings for compression for JPGs is quality around 60-70% and if you can interlace them the loading effect will be nicer as instead of the classic load from top to bottom it will load every other pixel and the transition will be from a blurred image to a full quality one. Resize the images to just about the size you need them and it sounds like your site will be get faster again…

Thanks for the informatin and may i know that in gimp can i optimize all my image at a time because i have to optimize a lot of pictures.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.