Flickity carousel images are not loaded completely

Question

I am currently using the Flickity library to display corousels on my wordpress site.

The problem: When the site produkte is loaded the first time a lot of images get not loaded fully but only the first centimeter.

I am happy for any hints regarding this problem.

Kind regards Lukas

I think it has something to do with my code (html / css / js) because the images are there but the container is not large enough that they are fully visible. Only smal stripes of the images. You can see it when you clear your browser cache and reload the page. — Luke, Oct 24 '17 at 12:37

score 0 · Answer 1 · answered Oct 24 '17 at 09:35

0

1) Optimize images using Photoshop or below url and then upload in word press or add image optimizer api in your word press website

2) Minify CSS

3) Leverage browser caching for the cacheables

4) Minify HTML

hope this will help and boost website performance Best luck

answered Oct 24 '17 at 09:35

tushgraph

Thank you for your answer but my images are mostly not increasing 100 KB. I think it has something to do with my code (html / css / js) because the images are there but the container is not large enough that they are fully visible. Only smal stripes of the images. You can see it when you clear your browser cache and reload the page. – Luke Oct 24 '17 at 12:32
2) Minify CSS 3) Leverage browser caching for the cacheables 4) Minify HTML This will help if images are compressed already check above points 2,3,4 i am sure problem will be resolved if done with above points – tushgraph Oct 30 '17 at 09:29

score 0 · Answer 2 · answered Oct 24 '17 at 10:15

The most improvement you can get is to optimise the image size to make them as small as possible. Use this online service to reduce image sizes.

You can also install a plugin like Smush to optimise images automatically when they are uploaded.

Also to reduce image sizes in the future you can install this plugin to ensure files of excessive size are resized.

Once you have done this then you can use a caching plugin to speed up you site's overall performance.

Thank you for your answer but my images are mostly not increasing 100 KB. I think it has something to do with my code (html / css / js) because the images are there but the container is not large enough that they are fully visible. Only smal stripes of the images. You can see it when you clear your browser cache and reload the page. — Luke, Oct 24 '17 at 12:34

2 Answers2