Sorry for the slow reply. We will look into this soon!
I’ve made an issue here https://github.com/thriveweb/photoswipe-masonry/issues/26
I’m not seeing this in the latest version. Could it be you just need to rebuild your thumbs?
Please note: Images that are already on the server will not change size until you regenerate the thumbnails. Use AJAX thumbnail rebuild
Thank you for your answer.
Nope, this is not a thumbnail size issue.
In fact, the issue doesn’t regard at all wrong image sizes.
It doesn’t even regard the images embedded in the page, but only the ones which are opened with a click on the embedded ones.
Full size images should be LOADED only AFTER that an user click on the corresponding ones embedded in the article.
Instead, at the moment, all the images (both the ones embedded in the article and the ones that are opened after user click) are loaded immediatly.
For a live example, visit this webpage:
http://www.c41magazine.it/james-marvin-lilac-hand/
Keep your developer console opened in Chrome, and notice in the network tab how both all the full sizes images are loaded immediatly, instead of waiting for the user interaction with the embedded ones.
If something is still not clear feel free to ask me again.
Thank you in advance
With this post your are only embedding single images right? Why not use the gallery mode?
Yes, only single images, for various reasons (faster conversion to PhotoSwipe for older posts, text between different images, featured images are single, etc.).
I don’t know if the same problem affect also galleries, anyway, even if it wouldn’t, I think it needs to be fixed ASAP because it’s pretty crtical.
Everything that affects so badly page loading times is going to bring heavy penalization in SEO and SERP, especially on mobile devices (downloading 6MB of page instead of 2MB is also bad for mobile max data limits).
Ok, anyway, coming back to the issue… could it be done something about it?
I don’t think there is an issue. You could try turning off srcset.
http://mekshq.com/how-to-disable-responsive-images-srcset-in-wp-4-4/
Or use the gallery feature of the plugin.
jomo
(@jonathanmoorebcsorg)
Hi,
there is an issue, it’s a fairly serious issue, also reported as
https://github.com/thriveweb/photoswipe-masonry/issues/15
though maybe not initially well understood.
It’s not a thumbnail problem (so attempting to address it by lazy loading display of the thumbnails also doesn’t address the problem).
The issue is that the plugin downloads the full size images as well as the thumbnails. (retested on release version)
as above: “Full size images should be LOADED only AFTER that an user click on the corresponding ones embedded in the article.” which is what certain other plugins do.
Instead, at the moment, photoswipe-masonry downloads all the images, both the gallery thumbnails and the full size images, as part of the page load, making an enormous payload.
Generally on small galleries the user won’t notice if the internet connection is good, but on larger galleries it’s shocking, the difference between a <2MB page payload and a 40MB payload, depending on the number of images, and in the meantime the browser is spinning indicating to the user that the page download is not complete, even though the thumbnails etc may all be visible.
If you got high res images, then turning on photoswipe-masonry increases your page load by MB for every photo in the gallery, it’s going to add up pretty quickly..
@jonathanmoorebcsorg this is exactly what I mean!
If you try the demo on the official photoswipe website, the problem doesn’t occur instead.
So it seems to be related only to this wordpress plugin.
jomo
(@jonathanmoorebcsorg)
Oh yes you are right, it works well on the demo page, when you first open the lightbox it loads 3 full images, then as you start advancing through the gallery it starts loading more.
It looks like there’s a simple fix to that, there’s a code block in photoswipe-masonry.js which forces all the full size images to load:
$.each(items, function(index, value) {
image[index] = new Image();
image[index].src = value['src'];
});
value[‘src’] has been previously set to the href for the full sized image so this codes is forcing the load of all the full sized images.
If you comment it out, the normal and preferable photoswipe behaviour seems to be restored.
Yes, I see this as well. Using developer tools > network, its really easy to see that the full size images are being downloaded directly. NO thumnails are being downloaded.
This is fixed in the new version. Try the beta from here https://github.com/thriveweb/photoswipe-masonry
jomo
(@jonathanmoorebcsorg)
@zehawk
– no thumbnails downloaded is a different problem, it means you need to regenerate thumbnails, since photoswipe-masonry uses a different thumbnail size
– the full download can be fixed by commenting out the code block I indicated above in photoswipe-masonry.js, but that will only avoid downloading the full size if you have the relevant thumbnail size images available
– if your site has too many images to be able re-size conveniently, I have alternative code that uses the WordPress thumbnail size
@jonathanmoorebcsorg, thank you, your point was very correct. After regen thumb, I can see that the thumbs are being downloaded. The other issue still remains for which I’ll try the beta version.
