How to send the web client a large number of images?

Hi all.
On the website there is a slider that uses a sufficiently large number of images, 100-150 PCs. please Tell me how to store and transmit these images to the web client? I want to minimize the number of queries and increase the speed.

Now data is stored in the site folder and passing it the path to the image tag . js framework populated with the path to the desired picture. The picture is loaded after changing the path.
July 2nd 19 at 13:19
2 answers
July 2nd 19 at 13:21
For example, you can use OWL slider.
And specify:
{
 lazyLoad: true
}
As I understand it, it'll just add an animated loader until the image is loaded. Correct me if I'm wrong. - zoila commented on July 2nd 19 at 13:24
: no, read about lazy load - ethel_Oberbrunn commented on July 2nd 19 at 13:27
July 2nd 19 at 13:23
1. You can glue a common substrate (which will be the same for all images) and differences (i.e., additive) - ship separately, an "extra" on the substrate, receiving the desired image.
So - will reduce significantly the total size of the images if they have a lot of similarity and one size "cloth", because the "appendage" is the only unique difference of this image from all others in the current slider.
2. A common "substrate" and "add-ons" - ship as a single stream of binary data and restore to a normal image on the client, putting the result in the slider.

To do this, You have to report all images in the tree, where each node of the "tree" contains auxiliary data. You can use a Huffman Code.

"Substrate" is the longest common portion of the image that is present on all images (coordinates X,Y, and RGB color).
The "add - ons" - slight differences between the images with a common "substrate" (the branch of the tree).

UPD: facebook.github.io/zstd
And how to implement it?
And as I understand it the number of requests from that not much decrease? Will change only the size of the images. - zoila commented on July 2nd 19 at 13:26
: request all images to be the ONLY ONE! How to implement?! Well, it's not for me - I already gave the algorithm) - ethel_Oberbrunn commented on July 2nd 19 at 13:29
: added in response... about "a tree" - animated pattern on Wikipedia is.. - zoila commented on July 2nd 19 at 13:32
: well this is something I realized, okay, the substrate is the longest common portion of an image. And what is the substrate in the case if the differences are significant? - Kyleigh_Hills commented on July 2nd 19 at 13:35
: substrate is not a fragment! This data set each pixel is 5 parameters: XY (position pixel) and RGB (composite color).
It is possible that the overall color is all in the position of the pixel, for example, blue, and shades different for different images (or mixture of shades). You know? - Kyleigh_Hills commented on July 2nd 19 at 13:38
the idea, I think I understand. But I also think that the more different pictures and the more, the more to zero is the advantage of using this approach, no? - gustave_Kertzmann52 commented on July 2nd 19 at 13:41
: well eyes You don't define, since there's always the colour mix and the same large pieces of data for each image can be an image that You can never imagine even 2 pictures. - Kyleigh_Hills commented on July 2nd 19 at 13:44
: can you give an example? Maybe there already in the Internet implementation.

Because, with all due respect, I see the gain in the number of requests, but I do not see any profit in terms of compression/savings: to calculate the final color will still need information about all color components. It will be just an extra filter. That is, in the worst case, the client will have to download the same amount of information. With the same success you can simply give the client pictures glued to the stream.

Or something I totally don't understand? - gustave_Kertzmann52 commented on July 2nd 19 at 13:47
: the last paragraph - You are just guessing.
Look again code Huffman coding on Wikipedia. The task is to find the same part on all images and unify in a single, but different, to connect, via the "tree". When the desired picture - the main one and the additional few bytes. - Kyleigh_Hills commented on July 2nd 19 at 13:50
: and no examples ready, maybe you know? If really there is any profit from this, it would be strange if one is not implemented even for such a task.

Or... can think of a spherical example with images not bigger than 4x4? I will try to implement. I'm almost sure win no - gustave_Kertzmann52 commented on July 2nd 19 at 13:53
such examples are only corporations most likely.
What words are different from images - thought?
That's right - nothing, except the presentation on the screen of the end user. - Kyleigh_Hills commented on July 2nd 19 at 13:56
: "It is possible that the overall color is all in the position of the pixel, for example, blue, and shades different for different images" - that is talking only about the vacuum case when osnovnoi the picture a specific pixel contains either 1 or 3 components needed to calculate the color of the corresponding pixel in the image, and the remaining components are taken from dopolnitelnogo image? - gustave_Kertzmann52 commented on July 2nd 19 at 13:59
: nonsense he advises you. High-tech, hard sold, not support nonsense. Plus you really don't need.

Ways to reduce the number of concurrent requests are two:
either merge everything into one file
or you can request a resource immediately, but just before he gets into range or will somewhere be used.

The first option, to merge all into a single sprite, you will not do. Since you have a lot of pictures, the final weight and size of the resulting image will be huge. It will be loaded for a long time and the memory of such a picture would bit well.
A variation of this option it offers for the sliders is not used. Because of these 100 photos total substrate may not be.
This approach is used here to create this animation https://paneralandofclean.com/
There is the substrate, and the individual sprites with pieces of animation like this https://prod-cdn.azureedge.net/20160828013219_1_0_...

The second option is to load the resource only when you need it, you just need.
In General, you probably have and everything works fine. As far as I understand, when you load the page once all 100 of these images are not loaded. And to boot they start later one, after changing the slide.

If so, it is quite a normal situation.
Necessary to reduce the number of concurrent requests. What you will have after page load to happen, can ignore.

To speed up the loading of images you can optimize their weight and placing them on the CDN - Kyleigh_Hills commented on July 2nd 19 at 14:02
: Yes, if not nonsense, then I agree: it's easier to make a "window": ship two left, two right and display Central. And then when turning - dogroses, but it will not reduce the number of connections.
Although it is possible to load 5 in a row) But! It is difficult and nonsense) - gustave_Kertzmann52 commented on July 2nd 19 at 14:05
: what's the reason to load 5 images in a row?
what would be the benefit of this for a live site?

so you can do the whole page server-side image rendering and the user to give it in 1 query. but why? - Zoie.OReilly43 commented on July 2nd 19 at 14:08
: I want fewer requests - possible "Windows" to reduce this number. - Kyleigh_Hills commented on July 2nd 19 at 14:11
: the advice is how to treat a cold truncation of the head.

who will write the backend for putting these pictures?
finished slider that he was able to work with such glued pictures?
nonsense zhezh full. - Zoie.OReilly43 commented on July 2nd 19 at 14:14
: Yes, all to raise this issue - nothing) I would cycle would make clicks and all... - Kyleigh_Hills commented on July 2nd 19 at 14:17
: so why do it to another advise? - Zoie.OReilly43 commented on July 2nd 19 at 14:20
: it is difficult, however, it is not nonsense, since it allows to save the traffic and number of flows.
Do that with this amount of photos - we still need to resort to a no OPTIMIZED delivery.
Agree? - Kyleigh_Hills commented on July 2nd 19 at 14:23
: I do not agree.
Again - nonsense.

As an example, here are some pictures:
i.imgur.com/iWKad22.jpg
i3.kym-cdn.com/photos/images/newsfeed/000/284/709/...
301-1.ru/gen-mems/img_mems/273c65cc74729db2d6f49bf...
memok.net/uploads/2014/08/13/53eb6c7a53d52.jpg

How are you going to have to look for "shared substrate"? What is the gain in speed of delivery or some savings from it?

Pictures taken there are small, almost all less than 100 KB.
If you take the real website, it can be pictures 400-500 KB
If the character is even 5 images of 500 KB, it will come a file more than 2 MB. How much will be loaded such a file? How much memory he utorret?
If you change at least one of the pictures in this "set", you will need to download it again on the new, not just the one that changed the picture. It is also such a savings? - Zoie.OReilly43 commented on July 2nd 19 at 14:26
: add.
now, these pictures jpg.
So you can use the substrate as you suggest, they will need to save as png with transparency.

How to grow the volume of photos, if you re-save the jpg with the png with transparency? - Kyleigh_Hills commented on July 2nd 19 at 14:29
: You don't understand and come up with off the top. Stop and reread everything from the top carefully. - Zoie.OReilly43 commented on July 2nd 19 at 14:32
: Yes? well, you clarify what I don't understand.
I have many questions wrote you at least one answer?

I fully admit that I'm wrong, but until I have the opposite impression that complete nonsense that you are carrying.
But let's try it again? I think it will be easy to prove me wrong. Below is a quote from your response and my questions to him:
>1. You can glue a common substrate
how are you going to glue a common substrate? The General theory is not necessary.
You have such a script? or maybe you are in the Internet something similar saw?
God bless him, with a script, you do somewhere on the Internet has ever seen such a method of optimization for photos in the slider (again, not for animation images, and slider. Not for graphics template, namely for photos in the page content)? A link to at least one website on the Internet, where your wonder of the innovative approach used to be able to?

>will ship as a single stream of binary data and restore to a normal image on the client
and how do you do?
The simplest here is to use a png with transparency. But you zhezh code Huffman tree a binary stream.
So the question is same - how you do it, without the theory in practice. You have a script? or saw somewhere the same script?

>"Substrate" is the longest common portion of the image that is present on all images (coordinates X,Y, and RGB color)
You do realize that the same jpg data for each pixel is stored as "X,Y coordinates and RGB color".
If I had to describe a picture and to transmit data in this form, this bmp will work. The size of the file will be much higher.
If you convert and substrate and the "difference" before passing it to jpg, you are sure that you have after encoding/decoding artifacts on the images are not added?
And performance - how much such conversion will be loading the client device? you zhezh back then it all to decode.

>UPD: facebook.github.io/zstd
what's the General Zstandard? With the same success a link to WinRar can be giving. It is also too tight.
I suspect you planned it as a file archiver to compress those huge bmp files to use.
Well, che you then these files are compressed was doing? Does he have a javascript version to work on frontend?
Yes, under node.js there are variations of this script is. Perhaps to adapt it for use on the frontend and will.
BUT. Myzh save (traffic, requests and all that). You are sure that if you use this script on frontend, it will not drag along a ton of dependencies? It does not, what is the script for unpacking in the end will weigh more images?

>You don't understand and come up with off the top. Stop and reread everything from the top carefully.
Well, I do not understand. I do not know how to advise complete nonsense, which in practice can not be implemented. Especially the beginner.
And I'm not "making stuff up", I have the parts tell where and at what stages you will have a deadlock, and trying to ask you, how do you out of this impasse was going to leave.
Notice that I'm still unpacking) - Zoie.OReilly43 commented on July 2nd 19 at 14:35

Find more questions by tags JavaScript