-
Posts
-
Hey guys just a general question. I am loving the aesthetic look of the Masonry elements. But I tried to us the masonry gallery with with about 60 images and ran into some issues. Load times. the script is loading images by default at full resolution. Can you talk about why they don’t render as a bit smaller thumbnails and then load full res if you open the lightbox? that is how the normal enfold gallery works and it load much faster.
That being said my computer can load the larger masonry galleries pretty well. but I find that if you scroll down the page as it loads it behaves weird in that it will load many squares on top of each other and not expand down the page like it should. then when it is done if refresh the browser or change the window size (calling for a refresh) then it will expand to show all the thumbnails properly.
Then for mobile. Say an iPhone 4 on a fast wi-fi connection. that same 60 image masonry gallery is like sludge on the phone. It takes for ever to load but then after it is loaded it still hangs almost non stop if you try to scroll up and down the page. And if you want to rotate the orientation of the device it freezes also. Is there some added limitations on mobile devices with the script or something. I would think it was just the connection speed. But with the same connection the phone and computer are in different leagues. I tried to limit the initial load to a smaller amount of images, say 20 or so and then make the user hit the load more button. It was marginally faster initial load, but only slightly, but after it loaded another 20 or more the page froze up again. Is there a way to make the thumbnails be a smaller embedded size or something? If it is using the full size I could obviously upload smaller but other places that need the same image larger would have to be a completely separate image upload. Different than say a normal large size uploaded image that wordpress auto reproduces smaller and then the user picking the display size.
So basically the question is, is there anything you or I can do to make large masonry image galleries function well on mobile devices?
for reference I suppose the site would help
http://jackandaddi.com/portfolio/fine-art/
I don’t currently have a masonry gallery set up with a ton of photos say (50 or more) like I want to but if you go to the page above there is a smaller one and even it lags heavily on the iphone with a fast wifi connection.http://jackandaddi.com/gallery/rykowski-family/
shows a normal large gallery with 450×450 thumnails and it is pretty decend load time but quickly responsive after load at least, including orientation changeshttp://jackandaddi.com/terah-tim-wedding-photography/
shows a very image intensive blog post, 1200px images close to a hundred and it loads even quicker yet and is very responsive after loading.So what is so special about the galleries that make them slower especially the masonry one. I love it and it works great everywere but the iphone makes it almost unusable.
Hey!
The images you upload should be optimized for web. The theme and WordPress in general doesn’t have any web optimization in place so if you are using large images they will still be large when you load them in.
They do get re-sized to smaller dimensions but not file size.
The difference you are seeing on your phone vs computer is just in how much match and processing that needs to be done to render them. We are just including the masonry script and its actual performance isn’t something we’ve worked on or anything like that.
Best regards,
DevinThe images are optimized for web but with say 100 images at 500kb it is still 50mb total per say on the page at once. It is curious how if the same images load super fast on page as static images all at once, they are so much slower in the masonry script.
Oh well I will play with the images and see if I can get it faster. The trouble for everyone wanting to display large images, if you want to open 1500 pixel images in light box you have to upload them that large so its available. I just wish the masonry script only loaded smaller thumbnail images like your gallery script does, and then feeds the full size image upon request from the lightbox. that would presumably fix the issue, maybe. But that is only an uneducated observation/assumption.
————————————-
On another note. when I inspect my page with the masonry gallery an look under resources I see 1 of each image that is in the gallery. The full size image. And if I drag and drop on any of the thumbnails visible in the gallery the image that is copied to the desktop is the full size image. you can also open the lightbox and drag and drop that image to and it is the full size image.
The behavior on your demo is different. If you go to kriesi-shortcodes-masonry gallery and inspect that page and look at the resources there are 2 of each image loaded one full size at 1030 px for example and then a thumbnail at 705px for example. and if you simply inspect the code of the gallery you see that the smaller thumbnail is being loaded in the gallery by default. If you drag and drop this image off you get the smaller thumbnail as expected. But the big difference on your sample is that if you open the lightbox you get the full res image, great. It however is not drag and dropable.
So big questions.
1. Why is your lightbox image not drag/drop compatible and the one in the them is?
2. Your sample is the optimal behavior and why it is likely faster. presenting thumbnails and only full res upon request from the lightbox. How do we get this same behavior in our themes. your masonry script must be different than the one loaded in the theme pack for 2.4.1Can this be addressed please. thankyou
If your images are not getting their thumbs generated then you either need to generate them with this plugin: http://wordpress.org/extend/plugins/regenerate-thumbnails/
If after doing so the thumbnails are still not getting generated then you would need to dig into why WordPress isn’t able to generate thumbnails properly since the theme just taps into WordPress’ function for that.
Sorry Devin for being unclear. My images are generating thumbs by wordpress upon upload. What is happening is entirely based on the masonry gallery not loading them.
My concern is really the second half of my previous post. I am not saying the script loaded on the enfold theme sample site is different than the one packaged in the theme download but they aren’t behaving the same way for me. thumbnails are available to the theme to use. But the masonry gallery is only loading full size images in both the lightbox and the thumbnail tiles. It isn’t doing that on your theme page sample, you guys are getting thumbs in the tiles and full res in lightbox. http://kriesi.at/themes/enfold/shortcodes/masonry-gallery/ That is a big difference in performance.
http://jackandaddi.com/portfolio/fine-art/
this is my implementation of a smaller masonry gallery, the images are somewhat optimized and I plan on doing more in the future, that aside. If you inspect the page and look at a thumbnail tile it is a 1500px with image (full size) ideally it should be using a thumbnail right?I re-uploaded the images at the largest size of 1210 wide vs my previous 1500px wide which of course generated new thumbnails) and the masonry gallery is now loading about a 705 px wide image in the thumbnail and then the 1210 px one in the lightbox.
So is the 705px thumbnail a new size that is now being generated in the functions file for the masonry galleries? Is that why is wasn’t and is now displaying that way? It was calling for a thumbnail that didn’t exist?
You don’t need to re-upload them to get the thumb size generated. You can just use the plugin I linked above and it will run the files through and get them all done at once.
And yes, thats the correct size :)
No worries. Devin, I know I could have used the plugin But I wanted the max size smaller to try and speed up the galleries. So I had to reupload them anyway. Thanks.
I consider 500 kb as huge for a webpage I wouldn’t even make a full-size background that big.
You need to get into Photoshop , ‘Export for Web’ and then play with some settings there.
- The topic ‘Masonry load times’ is closed to new replies.