Images are stored locally and preloaded, but they still load very slow

Question

I have some big images (6-10 mb), i store them locally (in a folder on my PC) and i preload them using a function (var myImg = document.createElement("img"); myImg.src = "path_to_image.jpg";) and calling it when the body loads. (onload="myFunc();") Actually, i use that function to preload all the elements that will be needed, not just images.

Despite that, when i click the button which shows the images when clicked, it still takes some time to load the images. Why is that? I don't download them from a server and i even preload them. What can i do about that?

By the way, it is a web app that i am building with HTML/CSS/JS.

Answer 1

The only thing I can think of is that the pictures are too large/high quality. Especially if you're using them as a background image.

Try and use something like:

https://compressor.io/
https://imagecompressor.com/

Answer 2

Use JPEG image where a deterioration with lossy compression for photographs is okay, instead of the lossless compression of PNG images.

Google has introduced a new image format WebP, which produces image files 25% to 34% smaller than JPEG. So using the WebP format would be better.