Performance problem with background-image

Navigation
1

My case is that I am developing a web of musical artists and had the idea of showing a page with several div whose backgrounds are photos of the different artists and when the mouse passes have the animation of a box-shadow showing the name of the artist. artist.

The problem is that, at least on my PC and another friend's, performance slows down so to speak; the scrolling is slower, the animations are slower, etc.

I have discovered that it is because of the amount of background-images, because if I try removing the images, the animations go smoothly as they should go, but when putting back images of background everything becomes slower. Is there any solution to this?

Here is the link to this page: link

P.S .: It is still in development so there are images that are not shown but it is because there are no photos of the other artists yet.

    
asked by fedlo 06.08.2017 в 14:14
source

2 answers

1

I've already visited your page :
The first thing I see is that the images have too much resolution, your page is well designed, I even see that it is responsive, but a 2mb image is too much for eg a mobile phone. I see that the artists pictures have 250px x 250px, the first thing you do is re-scale the background images to this resolution.

To help you with the performance theme use the Chrome development tools
Ctrl + Shtift + i , in the More tools & gt development mode menu ; Rendering . Here select FPS meter , you will see in which moments of the user interaction goes down plus the performance of the drawn.

In summary : lower resolution to images, luck

    
answered by 06.08.2017 / 19:41
source
0

When displaying images, in a gallery, for example, you should present the reduced version of it, instead of taking the full-size image and reducing it in real time.

To proceed, it is necessary to have a folder with all the images reduced in size, so that the images are presented in the gallery and if the user wants to see the image in its real size, then when clicking on the same take it to the original image.

The images in real size must be in another folder and it is necessary that all the images shown in the gallery have the same dimensions, because this creates an effect of homogeneity in the gallery. A gallery with photographs higher than others, for example, does not look harmonious.

    
answered by 06.08.2017 в 19:32
create clock and insert it into a table Alias for consultation in two tables with laravel