I was wondering if there's a way though to kind of preload those images to make them appearing faster and smoother. Or maybe there's a way to preload all the other pages and images into the cache so that at least all the following pages after the first appear smooth and fast? Whatever helps to make the pages load faster and smoother.
Each image consists of a variety of images, all of them within one wide image (prepared in PSD) and the visitor can shift left and right to call for the respective image to appear in the center. Unfortunately sacrificing on the image quality or make them smaller is not an option here.
I know there are posts here on preloading images ad stuff but I can't find any that work with the image embedded in the HTML code.
There are a couple of ways I can think of to reduce the issue, but they all require splitting up the very large graphic file. To begin, browsers will try to load any image file referred to in an <img> tag, but you don't really have much control over the sequence in which they are loaded. They're generally going to load in the order in which they appear in the HTML code, but that's not a hard and fast rule.
You could stick with plain HTML and just have multiple <img> tags. And if you store the image files on different domain (or subdomain), it will give you some improvement in performance because most browsers will only keep 4 simultaneously open HTTP requests per domain. This is certainly the easiest solution and the best place to start.